Using the GWT Elemental FileReader to read files on the client side. (GXT 4.x, 4.0.2, GWT 2.8.0-SNAPSHOT >=RC3)

FileReaderExample.java

package com.sencha.gxt.test.client.html5_filereader;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ChangeEvent;
import com.google.gwt.event.dom.client.ChangeHandler;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.RootPanel;
import com.sencha.gxt.core.client.dom.XElement;
import com.sencha.gxt.widget.core.client.form.FileUploadField;

import elemental.client.Browser;
import elemental.events.Event;
import elemental.events.EventListener;
import elemental.events.ProgressEvent;
import elemental.html.File;
import elemental.html.FileReader;
import elemental.js.html.JsFileList;
import elemental.js.html.JsInputElement;

/**
 * Required: <inherits name="elemental.Elemental"/>
 * 
 * http://docs.sencha.com/gxt/4.x/javadoc/gwt-2.7.0/gwt-elemental-2.7.0/index.html?elemental/html/FileReader.html
 * 
 * GWT 2.8.0-SNAPSHOT (>= RC3)
 */
public class FileReaderExample implements EntryPoint {

  // override to get the input element
  public class FileUploadFieldExt extends FileUploadField {
    public native XElement getFile() /*-{
      return this.@com.sencha.gxt.widget.core.client.form.FileUploadField::file;
    }-*/;
  }

  private FileUploadFieldExt fileUploadField;

  @Override
  public void onModuleLoad() {
    fileUploadField = new FileUploadFieldExt();
    fileUploadField.addChangeHandler(new ChangeHandler() {
      @Override
      public void onChange(ChangeEvent event) {
        readFiles();
      }
    });

    RootPanel.get().add(fileUploadField);
  }

  protected void readFiles() {
    JsInputElement jsInputElement = fileUploadField.getFile().cast();
    JsFileList fileList = jsInputElement.getFiles();
    if (fileList == null || fileList.getLength() == 0) {
      GWT.log("file was not selected");
      return;
    }

    for (int i = 0; i < fileList.getLength(); i++) {
      readFile(fileList.item(i));
    }
  }

  private void readFile(File file) {
    GWT.log("file.name=" + file.getName());

    FileReader fileReader = Browser.getWindow().newFileReader();
    fileReader.setOnload(new EventListener() {
      @Override
      public void handleEvent(Event evt) {
        onFileLoad(evt);

        GWT.log("kind of evt=" + evt);
      }
    });
    fileReader.readAsDataURL(file);
  }

  private void onFileLoad(Event evt) {
    ProgressEvent progressEvent = (ProgressEvent) evt;
    FileReader fileReader = (FileReader) evt.getTarget();

    // base64
    String result = (String) fileReader.getResult();

    // GWT.log("result=" + result);
    // GWT.debugger();

    Image image = new Image(result);
    RootPanel.get().add(image);
  }

}

project.gwt.xml

<!-- Add this to the GWT Module Descriptor -->
<!-- Add the depdendency jar to project too -->
<inherits name="elemental.Elemental"/>