Techie-Gyan » fileupload

File upload using Ajax – Jquery Plugin

Aditya — Sat, 03 Oct 2009 19:28:28 +0000

I have already written about the Ajax file upload on this blog and found this another plug-in of Jquery for Ajax file upload. Looks like an evolved plug-in with nice demonstrations and documentation at their home page. This is called Uploadify, you can check this out at www.uploadify.com

Let me just try to describe this plug-in and see how easily can any one use it

This plug-in allows user to upload files using Ajax. Plug-in has many features which were generally asked by people for earlier Ajax upload plug-ins like

a. Integrated progress bar
b. passing extra/more parameters with Ajax file upload request
c. Multiple Ajax file uploads and queuing them.
d. Limiting upload size of file
e. Canceling Ajax upload in between.

Plug-in also allows you to customize the behavior by providing number of callback functions which can be used for adding custom functionality. See the complete documentation for more details.

Following are the pre-requisites of this plug-in

1. jQuery v1.2.x or greater
2. SWFObject v2.2 or greater
3. Flash Player v9.0.24 or greater

Now lets try to do some samples of it. You can also check out the demo page of the www.uploadify.com for samples.

Free FTP Clients — File Transfer

Aditya — Wed, 10 Jun 2009 18:09:22 +0000

FTP stands for File Transfer Protocol which become synonymous to the action of transferring your file using FTP. People generally refer like ‘FTP this tar file to xyz public server’. As internet grown so rapid in past few years, web pages become the most popular application for the users. This promoted use of HTTP for file transfer also, but still FTP is generally used when you want to transfer files reliably.

The best way to use FTP is using command line client which works really well on all platforms.For UI people, here I am listing some of the free FTP clients which can be used for getting files from FTP server or putting files to FTP Server, Most of them are similar in functionality but some have better features like using multiple connection in background or uploading multiple files together :

1. WinSCP http://winscp.net/eng/index.php
2. Fire FTP http://fireftp.mozdev.org/
3. File Zilla http://filezilla-project.org/
4. Smart FTP : http://www.smartftp.com/
5. Core FTP : http://www.coreftp.com/
6. Go FTP : http://www.goftp.com/

Most of the above are installations which will provide you another program to connect to FTP server and then do file transactions. Fire FTP is quite handy and it not a separate program but an addon to Mozilla Firefox. Most of them are open source also.

Jquery Ajax upload with Progress bar – Spring Framework

Aditya — Sat, 25 Apr 2009 09:25:36 +0000

I posted about how to limit the file size while uploading it recently. File upload can be a time taking process in following two cases:

a. You are uploading a large file
b. Your connection speed is slow

In both cases it is good to show progress of file upload to the user as it shows him exactly how much to wait before proceeding to next action. Using the same set of files at back-end (if your are using Spring framework) we can show the progress of file upload.

I did this using following things:

1. JQuery
2. ajaxfileupload plugin of JQuery
3. jQuery Progress bar plugin
4. Some changes/additions in the code which was posted in my previous post.

Step 1: Write a controller which will return the upload progress information to HTML page so that Page javascript can show progress bar accordingly. In the previous post i have given code for AjaxProgressListener which sets the file upload progress information in session object. This Controller will use the session object to get progress information and return it to page.

 
package com.controllers;
 
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
 
import net.sf.json.JSONObject;
 
import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import org.springframework.validation.BindException;
import org.springframework.web.servlet.ModelAndView;
import org.springframework.web.servlet.mvc.AbstractCommandController;
 
public class UploadInfoController extends AbstractCommandController {
	private final static Log logger = LogFactory.getLog(UploadInfoController.class);
    public UploadInfoController() {
        setCommandClass(Object.class);
    }
 
	@Override
	protected ModelAndView handle(HttpServletRequest request, HttpServletResponse response, Object command, BindException errors) throws Exception {
		JSONObject jsonResp = new JSONObject();
		try {
			HttpSession session = request.getSession();
			jsonResp.put("progressMap", session.getAttribute("progressMap"));
			jsonResp.put("result", session.getAttribute("progressStatus"));
		} catch (Exception e) {
			logger.error(e);
			jsonResp.put("result", "error");
		} finally {
			response.getWriter().print(jsonResp);
            response.flushBuffer();
		}
		return null;
	}
}

Needless to say that entry of this controller will be required in your-app.xml as bean and then as url mappings section so that HTML page can access this controller using the mapping path.

Step 2 : While uploading file using ajaxfile upload also use the jquery progress bar plugin. I used it in following way:

 
function showUploadProgress() {
	$("#upload_bar").show();
	$("#upload_bar").progressBar({barImage: '../images/progressbg_green.gif', boxImage: '../images/progressbar.gif', width:300, height:17});
	var uploadInfo = function getUploadInfo() {
		$.ajax({
			url: '../portal/uploadInfo',
			type: "POST",
			cache: false,
			dataType: "json",
			async: false,
			success: function(msg){
				if(msg.result == 'UPLOADING') {
					var progressMap = msg.progressMap;
					var progressVal = (progressMap.bytesRead/progressMap.contentLength) * 100;
					$("#upload_bar").progressBar(progressVal);
				} else if(msg.result == 'DONE') {
					$("#upload_bar").hide();
					clearInterval(uploadInfoHandle);
				} else if(msg.result == 'MAX_SIZE_EXCEEDS') {
					clearInterval(uploadInfoHandle);
					$("#upload_bar").hide();
					showErrorMsg(getI18N("importleads.upload_10mb"));
				} else {
					clearInterval(uploadInfoHandle);
					showErrorMsg(msg);
				}
			},
			error: function(msg){
				clearInterval(uploadInfoHandle);
				showErrorMsg(getI18N("importleads.unknown_error"));
			}
		});
	};
	var uploadInfoHandle = setInterval(uploadInfo, 2000);
}

Use the function above while uploading your file using ajaxfileupload plugin.

 
function ajaxFileUpload() {
	showUploadProgress();
	$.ajaxFileUpload({
		url:serverurl,
		secureuri:false,
		fileElementId:'file',
		dataType: 'json',
		success: function (data) {
			if (data.result == 'success') {
				//Show Success
			}
			if(data.result == 'error') {
				//Show error
			}
 
		},
		error: function (data) {
			//Show error
		}
	});
}

Limiting upload file size – Spring

Aditya — Mon, 20 Apr 2009 05:50:39 +0000

You might want to limit the size of file to be uploaded on your website as it eats up some of the bandwidth and this can cause problem to rest of the users of your site. Most of the time we do processing on files when they are uploaded on server and content validations has limitations on client side as you can not read files using javascript on client side (i.e. web browser).

Limit on upload size makes more sense for specific purposes on your website when you know about expected size of file beforehand like image upload websites etc.

If you are using Spring framework for your project/product you can do this using latest version of commons-fileupload which lets you write your own ProgressListener using which you can limit file upload size and monitor the upload process as well. We are using Ajax in our project and for file upload we are using ajaxfileupload (see more in detail)

Following things need to be done for achieving the goal:

1. Implement the ProgressListener for your application like below by implementing org.apache.commons.fileupload.progresslistener

 
package com.listener;
 
import javax.servlet.http.HttpSession;
import net.sf.json.JSONObject;
import org.apache.commons.fileupload.ProgressListener;
 
public class AjaxProgressListener implements ProgressListener {
 
    public static final String STATUS_UPLOADING = "UPLOADING";
    public static final String STATUS_FAILED = "FAILED";
    public static final String STATUS_DONE = "DONE";
    public static final String STATUS_MAX_SIZE_EXCEEDS = "MAX_SIZE_EXCEEDS";
 
    private HttpSession session;
 
    public void setSession(HttpSession session){
	this.session = session;
    }
 
    public void updateStatus(String status){
	session.setAttribute("progressStatus", status);
    }
 
    public void update(long bytesRead, long contentLength, int item) {
        JSONObject progressMap = new JSONObject();
	progressMap.set("bytesRead", bytesRead);
	progressMap.set("contentLength", contentLength);
	progressMap.set("item", item);
	session.setAttribute("progressMap", progressMap);
 
	if(bytesRead == contentLength) {
		session.setAttribute("progressStatus", STATUS_DONE);
	}
    }
}

Progress Listener will read the status of file upload using http request and will set a parameter map in session object so that it can be used for monitoring.

2. Extend the CommonsMultipartResolver provided by Spring framework and use the ProgressListener implemented to check the size of upload.

 
package com.resolver;
 
import javax.servlet.http.HttpServletRequest;
import org.apache.commons.fileupload.FileItemFactory;
import org.apache.commons.fileupload.FileUpload;
import org.springframework.web.multipart.MaxUploadSizeExceededException;
import org.springframework.web.multipart.MultipartException;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import org.springframework.web.multipart.commons.CommonsMultipartResolver;
 
import com.listener.AjaxProgressListener;
 
 
public class AjaxMultipartResolver extends CommonsMultipartResolver {
    private AjaxProgressListener progressListener;
    private HttpServletRequest httpServletRequest;
 
    public void setProgressListener(AjaxProgressListener progressListener) {
        this.progressListener = progressListener;
    }
 
    public AjaxProgressListener getProgressListener() {
        return progressListener;
    }
 
    public MultipartHttpServletRequest resolveMultipart(HttpServletRequest request) throws MultipartException {
        try {
            this.httpServletRequest = request;
 
            return super.resolveMultipart(request);
        } catch(MaxUploadSizeExceededException ex) {
        	 this.progressListener.updateStatus(AjaxProgressListener.STATUS_MAX_SIZE_EXCEEDS);
             throw new MultipartException(ex.getMessage());
        } catch (Exception ex) {
            //exception is typically thrown when user hits stop or cancel
            //button halfway through upload
            this.progressListener.updateStatus(AjaxProgressListener.STATUS_FAILED);
            throw new MultipartException(ex.getMessage());
        }
    }
}

3. Update your application-beans.xml for your custom MultipartResolver written in step 2 and re-start the server.

 
 id="multipartResolver" class="com.resolver.AjaxMultipartResolver">
         name="maxInMemorySize">
		
		>10240>
	>
	 name="maxUploadSize">
		
		>1024000000>
	>
	
	 name="progressListener">
		 bean="progressListener" />
	>
>
 
 id="progressListener" class="com.listener.AjaxProgressListener"/>

These values will be used for checking the file upload size and will automatically be set in AjaxMultipartResolver at the time of server start. Change these values according to your need.