Uploading Files through GWT-RPC?

Question

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

Answer 1

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) /*-{
    var files = inputFile.files
    if ($wnd.console) $wnd.console.log ('readFile; input: ', inputFile, files)
    if (!files || !files.length) return
    var reader = new FileReader()
    reader.onload = function (progressEvent) {
      //$wnd.console.log ('read event: ', progressEvent, 'read: ', reader.result)
      andThen.@client.Closure.V1::call(Ljava/lang/Object;)(reader.result)
    }
    reader.readAsDataURL (files[0])
  }-*/;
}

// 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());