Dfyjkt

Uploading files with GWT is usually done with a FileUpload inside a FormPanel like this:

// 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 method, and multipart MIME encoding.
 form.setEncoding(FormPanel.ENCODING_MULTIPART);
 form.setMethod(FormPanel.METHOD_POST);

 // Create a panel to hold all of the form widgets.
 VerticalPanel panel = new VerticalPanel();
 form.setWidget(panel);

 // Create a TextBox, giving it a name so that it will be submitted.
 final TextBox tb = new TextBox();
 tb.setName("textBoxFormElement");
 panel.add(tb);

 // Create a ListBox, giving it a name and some values to be associated with
 // its options.
 ListBox lb = new ListBox();
 lb.setName("listBoxFormElement");
 lb.addItem("foo", "fooValue");
 lb.addItem("bar", "barValue");
 lb.addItem("baz", "bazValue");
 panel.add(lb);

 // Create a FileUpload widget.
 FileUpload upload = new FileUpload();
 upload.setName("uploadFormElement");
 panel.add(upload);

 // Add a 'submit' button.
 panel.add(new Button("Submit", new ClickHandler() 
 public void onClick(ClickEvent event) 
 form.submit();
 
 ));

Are there any other ways to handle file upload with GWT? Is it possible to do in with GWT-RPC or REST?

Edit: Browser requirement is Only Webkit

With modern browsers you can get the raw bytes of the input type=file (in a base64 data url). Having the bytes you can send them whatever the way you like.

Here's some code, displaying a file input dialog and getting the raw bytes (dataURL):

class Util 
 static native void info (Object obj) /*-
 if ($wnd.console && $wnd.console.log) $wnd.console.log (obj)
 -*/;

 /** Fires a "click" event on an HTML element. */
 public static native void click (final JavaScriptObject element) /*-
 if (element.click) element.click();
 -*/;

 /** Read a file from the local filesystem. The file should have been choosen via an `input type=file`.
 * See also: http://www.html5rocks.com/ru/tutorials/file/dndfiles/; http://www.w3.org/TR/FileAPI/ */
 public static native void readFile (JavaScriptObject inputFile, V1<String> andThen) /*--*/;


// Remove old form.
final Element oldForm = Document.get().getElementById ("uploadForm");
if (oldForm != null) oldForm.getParentNode().removeChild (oldForm);

// A hidden form used to upload the files.
final FormPanel form = new FormPanel();
form.getElement().setId ("uploadForm");
final Style formStyle = form.getElement().getStyle();
formStyle.setDisplay (Display.INLINE_BLOCK); formStyle.setOverflow (Overflow.HIDDEN); formStyle.setWidth (0, Unit.PX); formStyle.setHeight (0, Unit.PX);
form.setAction ("http://.../");
form.setEncoding (FormPanel.ENCODING_MULTIPART); form.setMethod (FormPanel.METHOD_POST);
final FileUpload upload = new FileUpload(); upload.setName ("image");
form.add (upload);
RootPanel.get().add (form);

upload.addChangeHandler (new ChangeHandler() public void onChange (final ChangeEvent event) 
 Util.info ("Loading: " + upload.getFilename());
 Util.readFile (upload.getElement(), new V1<String>() public void call (final String dataURL) 
 Util.info ("Loaded: " + upload.getFilename() + " (url is " + dataURL.length() + " bytes)");
 );
);

// Trigger the upload dialogue. See also: http://aspalliance.com/articleViewer.aspx?aId=1441&pId=-1
Util.click (upload.getElement());