File Upload using GWT with a Dialog box to browse to the File

Question

I am working on a GWT web application where users are pushing in updates(something like twitter). The update is text+attachment. I want user to type in a update, optionally Hit the upload button, which gives a pop up to browse to the file and then when they are done finally hit the "send update" button. The text+attachment will be stored in a row in mysql. The text as ususal varchar and the file as a blob. The file size will be small.

I am clueless on how to achieve this at the moment. Looking at the API and googling I found the "FileUpload" widget being used. Docs say It is used to be used with a FormPanel. I am not sure if I really get the whole thing and how do I apply it in my case.

How can I solve my problem?

Answer 1

Typical way for browsers to upload files is to use input type='file' form field. There is no way to upload file using AJAX without form. At least I could not find any. I think, it's a security measure.

Therefore, to have file upload available, you must provide a form with file input. The form will have to be submitted via regular request, not AJAX.

So you must define FormPanel and add FileUpload to it. Example:

final FormPanel form = new FormPanel();
form.setAction("my.action");
// 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 FileUpload widget.
fileUpload = new FileUpload();
fileUpload.setName("fileUpload");
form.add(fileUpload);
// Add other components to form

Other components would include user text entry. There are may be options for handling them differently, but I think the best is to handle them via the same form submission.

Now, you have to add something to trigger form submission.

submitButton = new Button("Upload", new ClickHandler() {
    public void onClick(ClickEvent event) {               
        form.submit();
    }
});
formPanel.add(submitButton);

Finally, you must handle upload. You can do it in multiple ways but it must be regular request handling, not via AJAX or GWT. I personally like using Spring MVC for that. But you can use you framework of your choice. I am not going to cover details here. You can write Perl script, if you wish.

There are alternatives to this approach. You can use Flash, you can use Adobe AIR and there are may be other approaches. There are widgets for those approaches in different libraries. Check this site: http://google.wikia.com/wiki/Google_Web_Toolkit .

Disclaimer: This is approach that I used. I may have missed something and there are may be other approaches that I would love to learn about.