Drop or Choose Upload

UI component das combines the classic file chooser upload with a the ability to drop files

View larger

Close

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

• Issue Tracker
• Source Code
• Discussion Forum

Compatibility