javajavascriptgwtrpcgwt-rpc

Uploading Files through GWT-RPC?


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


Solution

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