Smart Gwt File Upload Examples

Public class FormPanelExample implements EntryPoint { public void onModuleLoad() { // Create a FormPanel and point it at a service. Final FormPanel form = new FormPanel(); form.setAction('/myFormHandler'); // Because we're going to add a FileUpload widget, we'll need to set the // form to use the POST.

  1. File Upload Sites
GXT & GWT Examples showing how to drag and drop file and upload it. Using GWT JSNI or JsInterop2.
ElementalFileDndUploadExample.java
importcom.google.gwt.core.client.EntryPoint;
importcom.google.gwt.core.client.GWT;
importcom.google.gwt.user.client.ui.RootPanel;
importcom.sencha.gxt.core.client.dom.XElement;
importcom.sencha.gxt.widget.core.client.container.FlowLayoutContainer;
importelemental2.dom.DataTransfer;
importelemental2.dom.DomGlobal;
importelemental2.dom.DragEvent;
importelemental2.dom.Element;
importelemental2.dom.Event;
importelemental2.dom.EventListener;
importelemental2.dom.File;
importelemental2.dom.FileList;
importelemental2.dom.FormData;
importelemental2.dom.HTMLDocument;
importelemental2.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'/>
*/
publicclassElementalFileDndUploadExampleimplementsEntryPoint {
@Override
publicvoidonModuleLoad() {
HTMLDocument document =DomGlobal.document;
Element divElement = document.createElement('div');
divElement.setAttribute('style', 'border: 1px dashed red; width: 300px; height: 300px;');
divElement.addEventListener('dragover', newEventListener() {
@Override
publicvoidhandleEvent(Eventevt) {
GWT.log('dragOver');
evt.stopPropagation();
evt.preventDefault();
DragEvent dragEvent = (DragEvent) evt;
DataTransfer dataTransfer = dragEvent.dataTransfer;
dataTransfer.dropEffect ='copy';
}
});
divElement.addEventListener('drop', newEventListener() {
@Override
publicvoidhandleEvent(Eventevt) {
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', newEventListener() {
@Override
publicvoidhandleEvent(Eventevt) {
GWT.log('dragEnd');
}
});
FlowLayoutContainer flc =newFlowLayoutContainer();
XElement flcEl = flc.getElement();
flcEl.getStyle().setProperty('border', '1px solid purple');
appendTo(flcEl, divElement);
RootPanel.get().add(flc);
}
privatenativevoidappendTo(XElementtarget, Elementel) /*-{
target.appendChild(el);
}-*/;
protectedvoidupload(Filefile) {
FormData formData =newFormData();
formData.append('file', file);
XMLHttpRequest xmlHttpRequest =newXMLHttpRequest();
xmlHttpRequest.open('POST', '/');
xmlHttpRequest.send(formData);
}
}
JSNIFileDndUploadExample.java
importcom.google.gwt.core.client.EntryPoint;
importcom.google.gwt.user.client.ui.RootPanel;
importcom.sencha.gxt.core.client.dom.XElement;
importcom.sencha.gxt.widget.core.client.container.FlowLayoutContainer;
importelemental2.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'/>
*/
publicclassJSNIFileDndUploadExampleimplementsEntryPoint {
@Override
publicvoidonModuleLoad() {
FlowLayoutContainer flc =newFlowLayoutContainer();
flc.setPixelSize(300, 300);
flc.getElement().getStyle().setProperty('border', '1px solid purple');
createDropTarget(flc.getElement());
RootPanel.get().add(flc);
}
publicinterfaceFileUploadHandler {
voidupload(Filefile);
}
privatenativevoidcreateDropTarget(XElementdivElement) /*-{
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);
}-*/;
}

commented Nov 20, 2017

Smart Gwt File Upload ExamplesGoogle drive

Demo

Soundhound app for pc

File Upload Sites

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