Multiple File Uploader (Html5 and Java Applet)

Objective:

The article is written to provide guidelines on how to implement multiple files uploading in java web projects.

File uploading in web project:

Before Html version 5, there was no support to upload multiple files through html components. Only one file can be uploaded, and if we want to upload multiple files there are some third party plugins like flash uploader, JS uploader or some Java Applets etc. This document will help you to implement multiple files uploader. I have done this using two different methods:

1) Html5

2) JUpload Applet

Both of these can be combined with JSP, Servlets, Struts etc.. and integrated with various web frameworks, I have tested this with ZKoss.

Prerequisite:

    1) Eclipse 3.6.

    2) Java 1.5 or above.

    3) Html5 Compatible web browser (eg. latest FF or chrome).

    4) JUpload Applet and helping jar files (common-fileupload and common-io).

    5) Knowledge of Core java, Basic HTML and JSP/Servlets.

1) HTML5 Uploader:

1) Create a new java web project

    2) In your index.html put this code

  1.     <h1>Html 5 Uploader</h1>
  2.     <form action=”fileuploader.jsp” method=”post” enctype=”multipart/form-data”>
  3.              <input type=”file” multiple=”multiple” name=”theFile[]” />
  4.              <input type=”submit” value=”Upload” />
  5. </form>

    Note: multiple=”multiple” means you are allowed to select more than one files in one go. multiple=”” also serves the same purpose. (http://www.w3schools.com/html5/att_input_multiple.asp)

    As you can see, the form will submit the request to fileuploader.jsp. You need to create that.

    3) Create fileuploader.jsp: In this JSP you will receive the request object containing data in files just uploaded in an input stream.

fileuploader.jsp will look something like this:

  1. <%@ page import=”java.util.List”%>
  2. <%@ page import=”java.util.Iterator”%>
  3. <%@ page import=”java.io.File”%>
  4. <%@ page
  5.    import=”org.apache.commons.fileupload.servlet.ServletFileUpload”%>
  6. <%@ page import=”org.apache.commons.fileupload.disk.DiskFileItemFactory”%>
  7. <%@ page import=”org.apache.commons.fileupload.*”%>
  8. <%@ page language=”java” contentType=”text/html; charset=ISO-8859-1″
  9.    pageEncoding=”ISO-8859-1″%>
  10. <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
  11. <html>
  12. <head>
  13. <meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″>
  14. <title></title>
  15. </head>
  16. <body>
  17. <%
  18.     String destPath = System.getProperty(“user.home”);
  19.     boolean isMultipart = ServletFileUpload.isMultipartContent(request);
  20.        if (isMultipart) {
  21.            FileItemFactory factory = new DiskFileItemFactory();
  22.            ServletFileUpload upload = new ServletFileUpload(factory);
  23.            List items = null;
  24.            try {
  25.                items = upload.parseRequest(request);
  26.            } catch (FileUploadException e) {
  27.             //Problem in reading stream
  28.                e.printStackTrace();
  29.            }
  30.            Iterator itr = items.iterator();
  31.            while (itr.hasNext()) {
  32.             //Iterate files
  33.                FileItem item = (FileItem) itr.next();
  34.                if (!item.isFormField()) {
  35.                    try {
  36.                        String itemName = item.getName();
  37.                        if (“”.equals(itemName)){
  38.                            continue;
  39.                        }
  40.                        File savedFile = new File(destPath + “/” +itemName);
  41.                        item.write(savedFile);
  42.                        //System.out.println(savedFile.getAbsoluteFile());
  43.                    out.println(“SUCCESS”); //Required for JUpload ACK
  44.                    } catch (Exception e) {
  45.                            e.printStackTrace();
  46.                        //Could not save file
  47.                    }
  48.                }
  49.            }
  50.            out.println(“<a href=’index.html’>Upload more file</a>”);
  51.        }else{
  52.         //Not a multipart upload
  53.        }
  54.    %>
  55. </body>
  56. </html>

4) Put required jars in lib folder under WEB-INF (Common-upload.jar and Common-io.jar).

5) You are good to go, deploy and test run the code.

2) JUploader:

Steps below will explain how to integrate JUpload applet in our web projects, to upload multiple file uploads, Jupload is a wonderful, well tested application, people have tested it with almost 5000 files upload in one go. It is equipped with progress bar and current speed monitors with are inbuild. This applet is very flexible in terms of upload protocol to choose, customizing it to upload a certain size/type of files etc…I needs a good amount of time to thoroughly study and use Jupload.

Here are the steps to implement multiple file uploading using JUpload:

1) Create a new web project

2) Put the code given below in index.html

  1. <applet
  2.                    CODE=”wjhk.jupload2.JUploadApplet”
  3.                    NAME=”JUpload”
  4.                    ARCHIVE=”jupload-5.0.7.jar”
  5.                    WIDTH=”640″
  6.                    HEIGHT=”300″
  7.                    MAYSCRIPT=”true”
  8.                    ALT=”The java plugin must be installed.”>
  9.            <param name=”postURL” value=”fileuploader.jsp” />
  10.            <param name=”showLogWindow” value=”true” />
  11.            <param name=”serverProtocol” value=”FTP”/>
  12.            <param name=”showLogWindow” value=”onError”/>
  13.            <param name=”debugLevel” value=”99″/>
  14.            <!– <param name=”maxFileSize” value=”2097152″/> –>
  15.            <!– <param name=”allowedFileExtensions” value=”jpg/gif/bmp/png”/> –>
  16.        </applet>

Note: There is a parameter “postURL”, this is the url applet hits, files are received on server in request object.

3 – 5) Steps exactly Same as in HTML5 upload example.

References and downloads:  

http://sourceforge.net/projects/jupload/?_test=b

http://jupload.sourceforge.net/dependencies.html

http://jupload.sourceforge.net/howto-customization.html

Libs:

http://commons.apache.org/io/download_io.cgi

http://commons.apache.org/fileupload/download_fileupload.cgi

Working example download: http://paxcel.net/blog/wp-content/uploads/2012/04/MultipleFilesUploader.rar

4 thoughts on “Multiple File Uploader (Html5 and Java Applet)

  1. Good article to read about. Can you please compare and contrast both approaches?. I mean when to use which approach.

    • Html5 is the simplest way to move forward. If you just need to upload and comeback to the page with the status of uploaded files. There are no progress meters in HTML5, you have to create your own progress/speed monitors in JS.

      Where as JUpload is already equipped with progress and current speed monitors.

      When to use what: Both are Ok to use in any web project. But if you don’t wanna play with applets in your application, simply go for HTML5. Another thing is if you can’t convince your clients to install jre, then don’t use JUpload. Both talk to same server side url, so form the backend implementation point of view these is no difference.

  2. How do I include Applet tags in JApplet ? Since am not using any separate .html file for specifying applet class file. Can anyone help me?

Leave a Reply to aashu.jaidka Cancel reply

Your email address will not be published. Required fields are marked *


8 + = seventeen

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>