file upload examples

Flow
1

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");
   upload.addSucceededListener(
    		event -> {
        Component component = createComponent(event.getMIMEType(), ///where is createComponent defined????
                event.getFileName(),
                buffer.getInputStream(event.getFileName()));
        Object output = null;
		showOutput(event.getFileName(), component, output); ///where is this defined????
    }
    	
    );
2

Here: https://github.com/vaadin/vaadin-upload-flow/blob/master/vaadin-upload-flow-demo/src/main/java/com/vaadin/flow/component/upload/demo/UploadView.java

-Olli

3

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…

4

1: Can you create a ticket here: https://github.com/vaadin/vaadin-upload-flow/issues ?

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

5

Olli Tietäväinen:
1: Can you create a ticket here: https://github.com/vaadin/vaadin-upload-flow/issues ?

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

Olli,
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.setSizeFull();
			googleMap.addMarker("DRAGGABLE: , new LatLon(", new LatLon(position.getLatitude(), position.getLongitude()), true, "");

			googleMap.setMinZoom(4);
			googleMap.setMaxZoom(16);

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();
root.setWidth(“900px”);
root.setHeight(“400px”);
setContent(root);

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

root.addComponent(googleMap);

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

6

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, "");
			    googleMap.setSizeFull();
				googleMap.setMinZoom(4);
				googleMap.setMaxZoom(16);
				//v1.add(googleMap); //NOT WORKING ...no idea how to add this dumb map
7

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.

8

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

9

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

Please help me on it as soon as possible.
Scenario

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.Html

<vaadin-upload
(upload-request) = “upload($event)”
no-auto
accept=“.xlsx”

upload.ts

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

10

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…

https://github.com/vaadin/vaadin-upload-flow/tree/master/vaadin-upload-flow/src

@Route(value = "upload")
@SpringComponent
@UIScope
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;


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

             createSimpleUpload();

    }

    private void createSimpleUpload() {

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

        });
       upload.addFinishedListener(finishedEvent -> {

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

       });

       button.addClickListener(event -> { // 

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

       });

        add(upload,button);


    }



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


        try {

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

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

        } catch (IOException e1) {
            e1.printStackTrace();
        }

    }
	
	

	
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;

@Repository
public interface DBFileRepository extends JpaRepository<DBFile, String> {

}


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

    private String file_name;

        private String file_type;

    @Lob
    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;
        this.data = data;
    }
11

Olli Tietäväinen:
Here: https://github.com/vaadin/vaadin-upload-flow/blob/master/src/test/java/com/vaadin/flow/component/upload/demo/UploadView.java

-Olli

Broken link, 404.

12

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

https://github.com/vaadin/vaadin-upload-flow/blob/master/vaadin-upload-flow-demo/src/main/java/com/vaadin/flow/component/upload/demo/UploadView.java

13

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

14

Olli Tietäväinen:
Here: https://github.com/vaadin/vaadin-upload-flow/blob/master/vaadin-upload-flow-demo/src/main/java/com/vaadin/flow/component/upload/demo/UploadView.java

-Olli

New Link:
https://github.com/vaadin/vaadin-upload-flow/blob/master/vaadin-upload-flow-demo/src/main/java/com/vaadin/flow/component/upload/demo/UploadView.java

15

1: There’s a related ticket with some workarounds here: https://github.com/vaadin/vaadin-upload-flow/issues/63