4

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.
Dipak
  • 6,532
  • 8
  • 63
  • 87
  • 1
    what did you tried? please add some code. – bNd Dec 27 '12 at 12:27
  • You store the file, so you know the path of where you saved it. What do you need from the uploader? – Andrei Volgin Dec 27 '12 at 13:05
  • @AndreiVolgin Actually, i want to upload a file of any type, and then store it in db as a byte array. So i want the content of that file. For that i need absolute path of the file.. is there any way to get it? I want to do it using GWT component. – Dipak Dec 28 '12 at 05:36
  • I tried like this, FileUpload fileUpload = new FileUpload(); filepload.addChangeHandler(new new ChangeHandler() { @Override public void onChange(ChangeEvent event) { // here i want the uploaded file as byte array. } }); – Dipak Dec 28 '12 at 05:50
  • 2
    You can get absolute path at server side not client side. FileUpload allows user to upload files. you have to put this widget on inside (and submitted from) a form (FormPanel). On submit, you have to call servlet. there you have to write a file upload code. – bNd Dec 28 '12 at 06:37
  • Put the FileUpload in a FormPanel, and use form.submit(). On the server side create a servlet and read as file stream and output as byte stream then you can store in a db . – SwiftMango Dec 28 '12 at 07:06

3 Answers3

4

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 -

Community
  • 1
  • 1
appbootup
  • 9,537
  • 3
  • 33
  • 65
  • 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 ). In these usual steps what if i need to give a review for user about the uploaded file, that is in between SelectFile & Submit Form. I need a flow like this: Browser -> File Upload Dialog -> Select File -> display uplodedfile in browser -> Submit Form with File to server -> Process File on Server -> Send back processed file to Client as response ( string ). – Dipak Jan 07 '13 at 06:45
  • There is no such option within current javascript. If you intend not to use other legacy technology like flash/applet then HTML5 apis on FileReader can be explored - FileReader.readAsBinaryString(Blob|File) . However tradeoff is you need to check whether api is supported across browser. – appbootup Jan 07 '13 at 07:01
  • Updated details regarding HTML5 File reader api's and GWT wrapper for them. – appbootup Jan 07 '13 at 09:38
1

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);
  }
});
Saeed Zarinfam
  • 9,818
  • 7
  • 59
  • 72
  • 3
    file name dosen't return actual path to the file, it will return a fake path, for ensuring the security. – Dipak Dec 28 '12 at 05:38
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

Andrei Volgin
  • 40,755
  • 6
  • 49
  • 58