I want to add dropzone.js version 5 to my Vaadin Flow 12.0.7 & Spring Boot 2.1.3.RELEASE project but without any success.
I’ve tried both methods adding dropzone on the page: default one, described here: https://www.dropzonejs.com/#usage And programmatically described here: https://www.dropzonejs.com/#create-dropzones-programmatically
I’ve added dropzone.js to static resources in my project:
\src\main\resources\static\frontend\js
and imported it by
@JavaScript("/frontend/js/dropzone.js")
Then I’ve added a new form and div on my view:
@Route
@JavaScript("/frontend/js/dropzone.js")
public class MainView extends VerticalLayout {
private final Div dropZoneDiv;
private boolean dropZoneAttached = false;
private MainView() {
add(new H1("Vaadin Spring Dropzone"));
add(new H2("Default adding method"));
Element form = new Element("form");
form.setAttribute("action", "file/post");
form.setAttribute("class", "dropzone");
form.setAttribute("id", "my-awesome-dropzone");
getElement().appendChild(form);
add(new H2("Create dropzone programmatically"));
dropZoneDiv = new Div();
dropZoneDiv.setId("dzDiv");
add(dropZoneDiv);
}
@Override
protected void onAttach(AttachEvent attachEvent) {
super.onAttach(attachEvent);
if (dropZoneDiv!=null && !dropZoneAttached) {
UI.getCurrent().getPage().executeJavaScript(
"var myDropzone = new Dropzone(\"div#dzDiv\", { url: \"/file/post\"});\n" //+
);
dropZoneAttached = true;
}
}
}
I expected to see at least one dropzone on the page, but actually the div and form I’m attaching dropzone to are empty in Chrome or Firefox.