file upload examples

tried to get below example of upload working…showOutput and createComponent methods…where are they defined?

    MultiFileMemoryBuffer buffer = new MultiFileMemoryBuffer();
    Upload upload = new Upload(buffer);
    upload.setAcceptedFileTypes("image/jpeg", "image/png", "image/gif");
    		event -> {
        Component component = createComponent(event.getMIMEType(), ///where is createComponent defined????
        Object output = null;
		showOutput(event.getFileName(), component, output); ///where is this defined????



Thanks Olli. a few more questions

1/ the upload component does not allow for hooking up to remove file events. as a result, once a file has been uploaded and you display it, when you clikc remove X mark, we cannot hook up to removals.
No events for removals of files from the UPLOAD

2/ …how to add a google map to layout…with vaadin 10 all is unlike it was with earlier versions of vaadin…
GoogleMap googleMap = new GoogleMap(“apiKey”, null, “english”);

how to add it in Java to a VerticalLayout etc…

1: Can you create a ticket here: ?

2: I haven’t looked at that particular add-on, but generally components are added to layouts by layout.add(component).

Olli Tietäväinen:
1: Can you create a ticket here: ?

2: I haven’t looked at that particular add-on, but generally components are added to layouts by layout.add(component).

I know that layout.add(component) is the typical obvious practice…unfortnuately in here there seems some unorthodox stuff going on and I cannot add the map that way starting recent versions of vaadin,
hence I posed the question seeking some Vaadin 10 examples with pom. I tried using

	    	GoogleMap googleMap = new GoogleMap("apiKey", null, "english");
			googleMap.addMarker("DRAGGABLE: , new LatLon(", new LatLon(position.getLatitude(), position.getLongitude()), true, "");


and now… googelMap is not a component…in old versions it was simple now it requires such simple stuff requires extensiev a PhD in google searching for finding an example that will work with Vaadin 10/11:(

it used to be that you could do

VerticalLayout root = new VerticalLayout();

googleMap = new GoogleMap(new LatLon(60.440963, 22.25122), 10.0, apiKey);


NOW…I cannot add the maps
using layout.add(googleMap)

to make long story SHORT.

				VerticalLayout v1=new VerticalLayout();
		    	GoogleMap googleMap = new GoogleMap("apiKey", null, "english");
			    LatLon latLon=new  LatLon(position.getLatitude(), position.getLongitude());
			    googleMap.addMarker("DRAGGABLE: , new LatLon(", new LatLon(position.getLatitude(), position.getLongitude()), true, "");
				//v1.add(googleMap); //NOT WORKING idea how to add this dumb map

Thanks for bringing up the stack removal. I agree - the app should be able to turn it off if not needed. Gave it a +1 on github.

Martin Israelsen:
Thanks for bringing up the stack removal. I agree - the app should be able to turn it off if not needed. Gave it a +1 on github.

I am asking myself a different question…is ANYONE USING those components? such things render them UNUSABLE.
What is going on with Vaadin…I do not recognize the toolkit since the one I used like 6 years ago… this is all
reinventing the wheel it seems

I am getting forbidden error(404) when i am using vaadin-upload in angular5 application.

Please help me on it as soon as possible.

When I select the file from upload file button the file is showing processing and immediately giving forbidden error even rest end API is not triggered
Code snippet

(upload-request) = “upload($event)”


upload(event) {
file = event.detail.file
//POST call to send the file to service
this.uploadServie(file).subscribe(respose => {})

HI guys! Could you provide a short tutorial on how to upload a file to MYSQL Database? On Upload Component Example I can get it worked…

here where I’m stuck! I don’t understand how the RECEIVER works and if it should implemented.
Around I didn’t find any example, just this example on GITHUB…

@Route(value = "upload")
public class FileView extends VerticalLayout  {

    private final DBFileStorageService dbFileStorageService;
    private final DBFileRepository dbFileRepository;
    private DBFile dbFile;
    private Button button = new Button("ok");

    private FastByteArrayOutputStream outputStream;
    MemoryBuffer buffer = new MemoryBuffer();
    Upload upload = new Upload(buffer);
    //private Receiver receiver;

    public FileView(DBFileStorageService dbFileStorageService, DBFileRepository dbFileRepository) {
        this.dbFileStorageService = dbFileStorageService;
        this.dbFileRepository = dbFileRepository;



    private void createSimpleUpload() {

        upload.addSucceededListener(event -> {
                    event.getFileName(), buffer.getInputStream());

       upload.addFinishedListener(finishedEvent -> {

                   finishedEvent.getFileName(), buffer.getInputStream());


       button.addClickListener(event -> { // 

          System.out.println("file" + dbFile.getFile_name());




    private void createComponent(String mimeType, String fileName,
                                      InputStream stream) {

        try {

            byte[] bytes = IOUtils.toByteArray(stream);

            dbFile = new DBFile(fileName,mimeType,bytes);

        } catch (IOException e1) {


import org.springframework.stereotype.Repository;

public interface DBFileRepository extends JpaRepository<DBFile, String> {


@Table(name = "files")
public class DBFile {
    @GeneratedValue(generator = "uuid")
    @GenericGenerator(name = "uuid", strategy = "uuid2")
    private String id;

    private String file_name;

        private String file_type;

    private byte[] data;

    public DBFile() {


    public DBFile(String file_name, String file_type, byte[] data) {
        this.file_name = file_name;
        this.file_type = file_type; = data;

Olli Tietäväinen:


Broken link, 404.

Found what appears to be the source code for that demo of Upload component:

Yep, looks like the demo has been refactored into its own submodule.

Olli Tietäväinen:


New Link:

1: There’s a related ticket with some workarounds here: