Directory

← Back

Drop or Choose Upload

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

Author

Rating

Popularity

<100

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);
	}

}

Compatibility

(Loading compatibility data...)

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 files Drop or Choose Upload - Vaadin Add-on Directory
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
Online