Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save niloc132/1d14297e83feca8dc7d22150960be040 to your computer and use it in GitHub Desktop.
Save niloc132/1d14297e83feca8dc7d22150960be040 to your computer and use it in GitHub Desktop.
Pure jsinterop example showing how to drag and drop file and upload it - see https://colinalworth.com/dnd-j2cl/ for running demo (minus actual upload)
import com.google.gwt.core.client.EntryPoint;
import elemental2.dom.DataTransfer;
import elemental2.dom.DragEvent;
import elemental2.dom.Element;
import elemental2.dom.File;
import elemental2.dom.FileList;
import elemental2.dom.FormData;
import elemental2.dom.HTMLDivElement;
import elemental2.dom.XMLHttpRequest;
import static elemental2.dom.DomGlobal.document;
import static elemental2.dom.DomGlobal.window;
/**
* 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 FlowChartEntryPoint implements EntryPoint {
@Override
public void onModuleLoad() {
Element divElement = document.createElement("div");
divElement.setAttribute("style", "border: 1px dashed red; width: 300px; height: 300px;");
divElement.addEventListener("dragover", evt -> {
window.console.log("dragOver");
evt.stopPropagation();
evt.preventDefault();
DragEvent dragEvent = (DragEvent) evt;
DataTransfer dataTransfer = dragEvent.dataTransfer;
dataTransfer.dropEffect = "copy";
});
divElement.addEventListener("drop", evt -> {
window.console.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);
window.console.log("file: " + file.name);
upload(file);
}
});
divElement.addEventListener("dragEnd", evt -> window.console.log("dragEnd"));
HTMLDivElement wrap = (HTMLDivElement) document.createElement("div");
wrap.style.setProperty("border", "1px solid purple");
wrap.appendChild(divElement);
document.body.appendChild(wrap);
}
protected void upload(File file) {
FormData formData = new FormData();
formData.append("file", file);
XMLHttpRequest xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.open("POST", "/");
xmlHttpRequest.send(formData);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment