Ajax File Upload with Progress Bar using jQuery in Java web application

In my previous article we learnt on how to implement AJAX Style file upload in a java web application. In this post we shall learn on how to create AJAX file uploading system with progress bar which shows upload progress in percentage (%) using jQuery in java web application. I have used jQuery Form plugin for this purpose. This plugin is easy to use and supports iframe file transportation.
 

 

Libraries required for the setup

• jQuery.form.js
• jquery
• Apache Commons FileUpload
• commons-io.jar

Folder structure

Now Create a dynamic web project in Eclipse with following folder structure
 

 

Set up from browser perspective: jQuery

 
Jsp form which handles file uploads
 

Ajax File Upload with Progress Bar
 

 
The JQuery code written on the head section of the jsp page is responsible for the AJAX call made to the servlet, which in turn uploads file into server.
 

Js file

 
Shown below is the jQuery code for upload file and progress bar
 

$(document).ready(function() {
var options = {
	beforeSend : function() {
		$("#progressbox").show();
		// clear everything
		$("#progressbar").width('0%');
		$("#message").empty();
		$("#percent").html("0%");
	},
	uploadProgress : function(event, position, total, percentComplete) {
		$("#progressbar").width(percentComplete + '%');
		$("#percent").html(percentComplete + '%');

		// change message text to red after 50%
		if (percentComplete > 50) {
		$("#message").html("File Upload is in progress");
		}
	},
	success : function() {
		$("#progressbar").width('100%');
		$("#percent").html('100%');
	},
	complete : function(response) {
	$("#message").html("Your file has been uploaded!");
	},
	error : function() {
	$("#message").html(" ERROR: unable to upload files");
	}
};
$("#UploadForm").ajaxForm(options);
});

 
beforeSend : this function called before form submission
uploadProgress : this function called when the upload is in progress
success : this function is called when the form upload is successful.
complete: this function is called when the form upload is completed.
 
Another must read:
jQuery form validation using jQuery Validation plugin

jQuery Tutorial for Beginners
 

Setup from the server’s perspective: Servlet

package com.fileupload;

import java.io.File;
import java.io.IOException;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileItemFactory;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

public class UploadFile extends HttpServlet {
	private static final long serialVersionUID = 1L;
	private final String UPLOAD_DIRECTORY = "C:/Files/";

	protected void doPost(HttpServletRequest request,
		HttpServletResponse response) throws ServletException, IOException {
	boolean isMultipart = ServletFileUpload.isMultipartContent(request);

	// process only if its multipart content
	if (isMultipart) {
		// Create a factory for disk-based file items
		FileItemFactory factory = new DiskFileItemFactory();

		// Create a new file upload handler
		ServletFileUpload upload = new ServletFileUpload(factory);
		try {
			// Parse the request
			List multiparts = upload.parseRequest(request);

			for (FileItem item : multiparts) {
	    		  if (!item.isFormField()) {
        		     String name = new File(item.getName()).getName();
			     item.write(new File(UPLOAD_DIRECTORY + File.separator + name));
			  }
			}
		}
		catch (Exception e)
		{
		  System.out.println("File upload failed");
		}
	}
}
}

Demo