import com.google.gwt.core.client.EntryPoint; import com.google.gwt.core.client.GWT; import elemental2.dom.DataTransfer; import elemental2.dom.DomGlobal; import elemental2.dom.DragEvent; import elemental2.dom.Element; import elemental2.dom.Event; import elemental2.dom.EventListener; import elemental2.dom.File; import elemental2.dom.FileList; import elemental2.dom.FormData; import elemental2.dom.HTMLDocument; import elemental2.dom.XMLHttpRequest; /** * https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop * * https://github.com/google/elemental2 * * <inherits name="elemental2.core.Core"/> * <inherits name="elemental2.dom.Dom"/> */ public class ElementalFileDndUploadExample implements EntryPoint { @Override public void onModuleLoad() { HTMLDocument document = DomGlobal.document; Element divElement = document.createElement("div"); divElement.setAttribute("style", "border: 1px dashed red; width: 300px; height: 300px;"); divElement.addEventListener("dragover", new EventListener() { @Override public void handleEvent(Event evt) { GWT.log("dragOver"); evt.stopPropagation(); evt.preventDefault(); DragEvent dragEvent = (DragEvent) evt; DataTransfer dataTransfer = dragEvent.dataTransfer; dataTransfer.dropEffect = "copy"; } }); divElement.addEventListener("drop", new EventListener() { @Override public void handleEvent(Event evt) { GWT.log("drop"); evt.stopPropagation(); evt.preventDefault(); DragEvent dragEvent = (DragEvent) evt; DataTransfer dataTransfer = dragEvent.dataTransfer; FileList files = dataTransfer.files; for (int i=0; i < files.length; i++) { File file = files.item(i); GWT.log("file: " + file.name); upload(file); } } }); divElement.addEventListener("dragEnd", new EventListener() { @Override public void handleEvent(Event evt) { GWT.log("dragEnd"); } }); document.body.appendChild(divElement); } protected void upload(File file) { FormData formData = new FormData(); formData.append("file", file); XMLHttpRequest xmlHttpRequest = new XMLHttpRequest(); xmlHttpRequest.open("POST", "/"); xmlHttpRequest.send(formData); } }