How to retrieve file from GWT FileUpload component?

Question

I want to upload a file using GWT fileUploader component,

I tried like this,

FileUpload fileUpload = new FileUpload();
filepload.addChangeHandler(ne         


        

Answer 1

1. You cannot get an absolute path of a file on a user's device from a GWT FileUpload widget.

2. You do not need an absolute path of a file to upload it, and store it as a byte array.

GWT documentation provides an example of how to use the Upload File widget:

http://google-web-toolkit.googlecode.com/svn/javadoc/latest/com/google/gwt/user/client/ui/FileUpload.html

Answer 2

I am guessing you want to allow user to upload file using GWT Fileupload widget and then do not wish to process it on server side. You want a byte array representation in client side.

Usual steps for File Processing Browser -> File Upload Dialog -> Select File -> Submit Form with File to server -> Process File on Server -> Send back processed file to Client as response ( string ).

If you want to avoid the above steps and process the file in browser there is no way to do it in current javascript. Parallel technologies like Flash, Applet, Silverlight or Activex might help. The correct approach to be pursued in future would be using HTML5 file apis.

If you do not wish to use legacy technology like flash/applet then HTML5 apis on FileReader can be explored. However tradeoff is you need to check whether api is supported across browser.

HTML5 FileReader

FileReader includes four options for reading a file, asynchronously:

FileReader.readAsBinaryString(Blob|File) - The result property will contain the file/blob's data as a binary string.
FileReader.readAsText(Blob|File, opt_encoding) - The result property will contain the file/blob's data as a text string. 
FileReader.readAsDataURL(Blob|File) - The result property will contain the file/blob's data encoded as a data URL.
FileReader.readAsArrayBuffer(Blob|File) - The result property will contain the file/blob's data as an ArrayBuffer object.

Example of GWT wrapper over these - https://github.com/bradrydzewski/gwt-filesystem

Reference -

• http://www.html5rocks.com/en/tutorials/file/dndfiles/
• HTML5 File API read as text and binary

Answer 3

You can get file name and its extension in client side (in your gwt codes) using flowing code:

FileUpload fileUpload = new FileUpload();

Button uploadButton = new Button("Click");
uploadButton.addClickHandler(new ClickHandler() {
  public void onClick(ClickEvent event) {
    String filename = fileUpload.getFilename();
      Window.alert(filename);
  }
});