[英]Adding dropzone.js on Vaadin Flow + Spring Boot project
我想将dropzone.js版本5添加到我的Vaadin Flow 12.0.7和Spring Boot 2.1.3.RELEASE项目中但没有任何成功。
我已尝试在页面上添加dropzone的两种方法:默认一种,在此处描述: https ://www.dropzonejs.com/#usage并按此处编程描述: https : //www.dropzonejs.com/#create-dropzones-编程
我已将dropzone.js添加到项目中的静态资源中:
\src\main\resources\static\frontend\js
并通过它导入
@JavaScript("/frontend/js/dropzone.js")
然后我在我的视图中添加了一个新表单和div:
@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;
}
}
}
我希望在页面上看到至少一个dropzone,但实际上我在Chrome或Firefox中附加dropzone的div和form是空的。
我得到了答案,谢谢我的朋友和同事。
这是工作解决方案:
@Route
@JavaScript("/frontend/js/dropzone.js")
@StyleSheet("/frontend/js/dropzone.css")
public class MainView extends VerticalLayout {
private MainView() {
add(new H1("Vaadin Spring Dropzone"));
add(new H2("Default adding method"));
Element form = new Element("form");
form.setAttribute("action", "uploadwsdl");
form.setAttribute("class", "dropzone dz-clickable");
form.setAttribute("id", "wsdlUpload");
getElement().appendChild(form);
}
@Override
protected void onAttach(AttachEvent attachEvent) {
super.onAttach(attachEvent);
UI.getCurrent().getPage().executeJavaScript("Dropzone._autoDiscoverFunction()");
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.