3 steps for uploading files in GWT

 Source: http://www.gwttutorial.com/gwt-development/gwt-upload-in-3-easy-steps

3 steps for uploading files in GWT

There are several very fancy and easy to use GWT Upload libraries that you can use in your applications but sometimes you just need a very simple interface to add an upload functionality to your application.  While the GWT client side of the upload process is the easiest part, many people miss the little tweak that you need to use.
If you want to use one of the fancier upload libraries for cool effects like upload status, I would recommend using GWT-Upload, GwtUpload, or Upload4Gwt.
In order to add this to your page, follow these three easy steps…

Step 1: Create a file upload servlet

There are tons of examples across the internet showing how to do this.  The easiest way is to use the Apache Commons FileUpload library.  An example of a fairly trivial use of this library looks like this:

// Example from Apache Commons FileUpload // Create a factory for disk-based file items FileItemFactory factory = new DiskFileItemFactory(); // Create a new file upload handler ServletFileUpload upload = new ServletFileUpload(factory); // Parse the request List /* FileItem */ items = upload.parseRequest(request

1 2 3 4 5 6 7 8 9

// Example from Apache Commons FileUpload // Create a factory for disk-based file items FileItemFactory factory = new DiskFileItemFactory(); // Create a new file upload handler ServletFileUpload upload = new ServletFileUpload(factory); // Parse the request List /* FileItem */ items = upload.parseRequest(request);

 Step 2: Modify web.xml

If you are writing a servlet, it goes without saying that you need to add an entry into the web.xml file.

<servlet> <servlet-name>FileUploaderServlet</servlet-name> <servlet-class>com.myapp.server.FileUploadServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>FileUploaderServlet</servlet-name> <url-pattern>/myapp/fileupload</url-pattern> </servlet-mapping>

1 2 3 4 5 6 7 8

<servlet>     <servlet-name>FileUploaderServlet</servlet-name>     <servlet-class>com.myapp.server.FileUploadServlet</servlet-class> </servlet> <servlet-mapping>   <servlet-name>FileUploaderServlet</servlet-name>   <url-pattern>/myapp/fileupload</url-pattern> </servlet-mapping>

The <servlet> tag tells the web server that you have a class and you want it known by this servlet name.  Then in the <servlet-mapping>, you tell it that the class known by this name, should be invoked when the given URL pattern is requested.
At this point the server is done and all you need is to make the client side of the task

Step 3: GWT Upload Form

Create a FormPanel and add it to your page. The most important part of this code is the FormPanel.ENCODING_MULTIPART and FormPanel.METHOD_POST.

// Used from FormPanel's Javadoc // Create a FormPanel and point it at a service. final FormPanel form = new FormPanel(); form.setAction("/myapp/fileupload"); // 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 upload = new FileUpload(); upload.setName("uploadFormElement"); panel.add(upload);

1 2 3 4 5 6 7 8 9 10 11 12 13 14

// Used from FormPanel's Javadoc // Create a FormPanel and point it at a service. final FormPanel form = new FormPanel(); form.setAction("/myapp/fileupload"); // 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 upload = new FileUpload(); upload.setName("uploadFormElement"); panel.add(upload);

 Conclusion

As you can see, it is simple to an upload functionality to your app.  Now if you do want to add more flash to your look and feel (and who doesn’t like flashy stuff), I would highly recommend using the libraries I suggested above, GWT-Upload, GwtUpload, or Upload4Gwt.  They do a fabulous job.  Here is an example of what Upload4Gwt looks like.