Forked from branflake2267/ElementalFileDndUploadExample.java
Last active
November 20, 2017 18:15
-
-
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)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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