How to retrieve file from GWT FileUpload component

问题:

I want to upload a file using GWT fileUploader component,

I tried like this,

FileUpload fileUpload = new FileUpload();
filepload.addChangeHandler(new new ChangeHandler() {
    @Override
    public void onChange(ChangeEvent event) {
         // here i submit the form, and a response is created to client side to display success message.
    } });

• OK, so far i can upload a file and, from servlet i can give a success message.
• I handled it with in onSubmitCompleate event of form panel,
• thanks allot.
• let me ask one more thing, is there anyway i can display the file uploaded, before saving it into the database?
• i.e., actually i need to provide a composite component for uploading a file and text area to tell details about the file.
• and when user choose file for uploading, i want give a display of file uploaded(so that he can ensure correct file is uploaded)
• and it will be saved to db when whole form is submitted.

回答1:

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

回答2:

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);
  }
});

回答3:

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