How to clear the file list on an Upload component

Flow
1

Is there a way to clear the File list on the Upload component from the Java code? I can’t see any method for it and when I Google it I can only find solutions related to clearing it in JS on the client side. Thanks in advance.

2

That property is read-only even on the client-side so you can’t alter it.

See https://www.w3schools.com/jsref/prop_fileupload_files.asp

3

According to https://github.com/vaadin/vaadin-upload/issues/128 you should do upload.files = []; which can be done from Java as

upload.getElement().setPropertyJson("files", Json.createArray());

There does not seem to be any Java API available for it. Maybe waiting for a propery JavaScript API (https://github.com/vaadin/vaadin-upload/issues/184)

4

Thanks a lot Artur, that’s working! I had found https://github.com/vaadin/vaadin-upload/issues/128 as well but had no idea how to do this from the Java API.

BTW, I had cloned your vaadin-example git repo to get going with the upload component… small world :wink:

5

You can easy execute javascript from your current page. It will be something like that.

upload.setId("exampleupload")
com.vaadin.ui.JavaScript.getCurrent()
                       .execute(document.getElementsByTagName(\"form\")[\"exampleupload\"]
" +
                        ".querySelector(\".gwt-FileUpload\").value=\"\""");
6

I know this thread is all about clearing, but just as a reference, here is an example to pre-populate the Upload component in Java:

	Upload upload = ...
    JsonArray jsonArray = Json.createArray();
    JsonObject jsonObject = Json.createObject();
    jsonObject.put("name", "filename.txt");
    jsonObject.put("progress", 100);
    jsonObject.put("complete", true);
    jsonArray.set(0, jsonObject);
    upload.getElement().setPropertyJson("files", jsonArray);

https://vaadin.com/components/vaadin-upload/html-examples/upload-advanced-demos

7

Flow-related ticket: https://github.com/vaadin/flow-components/issues/1572