GXT & GWT Examples showing how to drag and drop file and upload it. Using GWT JSNI or JsInterop2.

ElementalFileDndUploadExample.java

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.user.client.ui.RootPanel;
import com.sencha.gxt.core.client.dom.XElement;
import com.sencha.gxt.widget.core.client.container.FlowLayoutContainer;

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");
      }
    });
    
    FlowLayoutContainer flc = new FlowLayoutContainer();
    XElement flcEl = flc.getElement();
    flcEl.getStyle().setProperty("border", "1px solid purple");
    
    appendTo(flcEl, divElement);
    
    RootPanel.get().add(flc);
  }

  private native void appendTo(XElement target, Element el) /*-{
    target.appendChild(el);
  }-*/;

  protected void upload(File file) {
    FormData formData = new FormData();
    formData.append("file", file);
    
    XMLHttpRequest xmlHttpRequest = new XMLHttpRequest();
    xmlHttpRequest.open("POST", "/");
    xmlHttpRequest.send(formData);
  }

}

JSNIFileDndUploadExample.java

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.sencha.gxt.core.client.dom.XElement;
import com.sencha.gxt.widget.core.client.container.FlowLayoutContainer;

import elemental2.dom.File;

/**
 * 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 JSNIFileDndUploadExample implements EntryPoint {

  @Override
  public void onModuleLoad() {
    FlowLayoutContainer flc = new FlowLayoutContainer();
    flc.setPixelSize(300, 300);
    flc.getElement().getStyle().setProperty("border", "1px solid purple");
    createDropTarget(flc.getElement());

    RootPanel.get().add(flc);
  }
  
  public interface FileUploadHandler {
    void upload(File file);
  }

  private native void createDropTarget(XElement divElement) /*-{
    divElement.addEventListener("dragover", function(event) {
      console.log("dragover");
      event.preventDefault();
      event.dropEffect = "copy";
    }, false);
    
    divElement.addEventListener("drop", function(event) {
      console.log("drop");
      event.preventDefault();
               
      var files = event.dataTransfer.files;
      for (var i=0; i < files.length; i++) {
        var file = files.item(i);
        console.log("file: " + file.name);
       
        var formData = new FormData();
        formData.append("file", file);
    
        var xmlHttpRequest = new XMLHttpRequest();
        xmlHttpRequest.open("POST", "/");
        xmlHttpRequest.send(formData);
      }
    }, false);
  }-*/;

}

Demo