Drop or Choose Upload
UI component das combines the classic file chooser upload with a the ability to drop files
Drop or Choose Upload is a pure server-side UI component that combines a classic file upload chooser with the ability to drop files onto the component to upload them. The logic of both upload variants is hidden behind a single interface.
You can set callbacks for start, finish, fail and progress events (see example). Uploaded files are stored to java.io.tmpdir by default (call setTempFolder to change the location). Alle Parts of the compontent can be customized through getters and setter or overriding.
You can access the UI components using getLayout, getDropTextLabel and getChoose. Also all components have css classes for addiontal styling.
No Changes to the scss or widgetset are required.
- Vaadin 7: Version 1.1
- Vaadin 8: Version 2.0
Sample code
package com.example.demo; import java.nio.file.Path; import com.vaadin.annotations.Theme; import com.vaadin.server.VaadinRequest; import com.vaadin.ui.Notification; import com.vaadin.ui.Notification.Type; import com.vaadin.ui.UI; import com.vaadin.ui.VerticalLayout; import server.droporchoose.UploadComponent; @Theme("valo") public class DemoUI extends UI{ private static final long serialVersionUID = 6255201979868278965L; private final VerticalLayout mainLayout = new VerticalLayout(); @Override protected void init(VaadinRequest request){ UploadComponent uploadComponent = new UploadComponent(this::uploadReceived); uploadComponent.setStartedCallback(this::uploadStarted); uploadComponent.setProgressCallback(this::uploadProgress); uploadComponent.setFailedCallback(this::uploadFailed); uploadComponent.setWidth(500, Unit.PIXELS); uploadComponent.setHeight(300, Unit.PIXELS); uploadComponent.setCaption("File upload"); mainLayout.addComponent(uploadComponent); mainLayout.setMargin(true); setContent(mainLayout); } private void uploadReceived(String fileName, Path file) { Notification.show("Upload finished: " + fileName, Type.HUMANIZED_MESSAGE); } private void uploadStarted(String fileName) { Notification.show("Upload started: " + fileName, Type.HUMANIZED_MESSAGE); } private void uploadProgress(String fileName, long readBytes, long contentLength) { Notification.show(String.format("Progress: %s : %d/%d", fileName, readBytes, contentLength), Type.TRAY_NOTIFICATION); } private void uploadFailed(String fileName, Path file) { Notification.show("Upload failed: " + fileName, Type.ERROR_MESSAGE); } }
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Vaadin 8 support
- Released
- 2017-03-30
- Maturity
- BETA
- License
- Apache License 2.0
Compatibility
- Framework
- Vaadin 7.0+
- Vaadin 8.0+
- Browser
- N/A
Drop or Choose Upload - Vaadin Add-on Directory
UI component das combines the classic file chooser upload with a the ability to drop filesSource Code
Discussion Forum
Drop or Choose Upload version 1.1
The UploadReceivedHandler must no longer be provided in the constructor.
Drop or Choose Upload version 2.0
Vaadin 8 support