Skip to content

Instantly share code, notes, and snippets.

@branflake2267
Last active July 24, 2017 12:02
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save branflake2267/8f99301a21944f54ca76b556e4a32a9d to your computer and use it in GitHub Desktop.
Save branflake2267/8f99301a21944f54ca76b556e4a32a9d to your computer and use it in GitHub Desktop.
GWT 2.8.1 Elemental 2 file drop onto a browser div and then upload the file example. Example of DomGlobal, Element, DragEvent, File/Blob upload.
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);
}
}
@branflake2267
Copy link
Author

branflake2267 commented Jul 14, 2017

Drag a file into the div element.
screen shot 2017-07-14 at 4 57 49 pm

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment