File Upload Progress bar using JSP's and Session Beans

 ColdFusion 8 supports CFFILE large file uploads, due to a change in the default behavior of the GetHttpRequestData()  function.  Unfortunately, CF8 still doesn't provide any solution for a progress bar.  One solution I've found is to use a combination of JSP's and session beans and jQuery to provide not only large file uploads which works on CF 8 as well as CF 7, but also a progress. bar.  JavaZoom's uploadBean has a nice API and the download package includes some examples.  Now a couple of assumptions.  Since the downloads include fairly straightforward examples, I'm not going to go to deep into the code and will assume that if you are going to go down this path, that you will know something of JSP's, and for customization, a little bean knowledge along with basic jQuery.

The javazoom downloads have everything you need including the necessary jar files and examples.  put the jar files in  the cfusion web-inf/lib directory.  The easiest way to get up and running is to modify the LargeUpload.jsp that is included in the example to match your look and feel.    Just place the jsp in your application web folder.  The Progress Status addon provides the current status of the upload via a simple pop up that uses a meta-refresh which uses a session bean to generates the output for the current upload and total values.    The status session bean is added as a listener to the uploadBean on the upload form.  .

The examples don't include any authentication, so I would suggest creating an authentication bean based on your requirements.  In my case, I chose IIS authentication, along with a database ACL, where a folder id was used and checked against the ACL and the currently logged on user.

Now the jQuery bit, which provides the progress bar instead of a popup window.  For this, you'll need the progress bar plugin from digitalbush.

First, create an ajaxStatus.jsp that will use the progress session bean and generate the data used by jQuery.
-------------------------------------------------------------------------------------------------------------------------
ajaxStatus.jsp
<%@ page language="java"  %>
<%@ page errorPage="ExceptionHandler.jsp" %>
<jsp:useBean id="upListener" scope="session" class="sample.Progress"/>
<%= upListener.getUploadedRatio() %>|<%= upListener.getUploadedKBLength() %>|<%= upListener.getTotalLength() %>
------------------------------------------------------------------------------------------------------------------------

Then add the necessary html scripts, css and includes for jQuery and the jquery.Progressbar files  to the modified LargeUpload.jsp
------------------------------------------------------------------------------------------------------------------------

<script>

function formatFileSize(num){
    
        //return num;
        
        var fNum = 0;
        var type = "b"
        if ((num > 1024) && (num < 1048576)) {
            fNum =  num / 1024;
            type = "Kb"
        } else if (num > 1048576) {
            fNum = num/1048576;
            type = "Mb"
        } else {
            fNum = num;
        }
        
        var nf = new NumberFormat(fNum);
        nf.setPlaces(3);
        nf.setSeparators(true);
        var num = nf.toFormatted();
        
        return num + " " + type;
        
    }


function showStatus(data){
    var progress = data.split("|");

    if(progress[0] != "null" && parseInt(progress[0]) != -1){
        $("#progressbar").reportprogress(parseInt(progress[0]));
        var bUp = formatFileSize((parseInt(progress[1]) * 1000));
        var bTotal = formatFileSize(parseInt(progress[2]));
        $("#progressInfo").html(bUp + " / " + bTotal);
        // Not going to worry about clearing the interval since the
        // page is going to refresh when the upload is done.
    }
}
    

function update(){
    $.get("ajaxStatus.jsp",showStatus);
}
    

function submitValidation(){
    // other validation routines

     handle=setInterval("update()",100);

    document.yourForm.submit();
}

$(document).ready(function() {
    

    $("#YourSubmitButton").click(submitValidation);

}
</script>

<!--- HTML section that will display the progressbar and info --->
 <div id="progressbar"></div>
 <div id="progressInfo">KB</div>