Customizing swfupload

After playing around with swfupload, there were a few customizations I needed to make.

1) I wanted to add the files to the user's session.
2) After uploading has completed, by default, swfupload will remove all the items. I wanted to keep the listed items so that the user can review which files were uploaded if they needed to.

Adding to the user session

Since swfupload uses Flash as the underlying mechanism for uploads, the behaviour for executing flash is different for each browser. It turns out Firefox opens a new process and a new cookie for performing the upload as noted in this article:

http://www.thanksmister.com/index.php/archive/firefox-flex-urlrequest-and-sessions-issue/ 

So to work around the issue, the jsessionid was explicity passed into the URL of the upload. With the jsessionid in the URL, Tomcat was able to attach the session to the request.

Here's another article the describes the problem in more detail:
http://blogs.bigfish.tv/adam/2008/04/01/cakephp-12-sessions-and-swfupload/

Below is the code for adding the jsessionid:

function createSwfUpload(fieldName, sessionId,swfUploadUrl, swfButtonUrl, swfButtonPlaceHolderId, swfFlashUrl, progressTarget, buttonCancelId) {
    
    var uploadUrlSession = swfUploadUrl+";jsessionid="+sessionId;
    
    var swfUpload = new SWFUpload({
        
        // The name of the field name that the files are attached to
        file_post_name : fieldName,
        
        // Backend Settings
        upload_url: uploadUrlSession,
        post_params: {"JSESSIONID" : sessionId},

        // File Upload Settings
        file_size_limit : "102400",    // 100MB
        file_types : "*.*",
        file_types_description : "All Files",
        file_upload_limit : "100",
        file_queue_limit : "0",

        // Event Handler Settings (all my handlers are in the Handler.js file)
        file_dialog_start_handler : fileDialogStart,
        file_queued_handler : fileQueued,
        file_queue_error_handler : fileQueueError,
        file_dialog_complete_handler : fileDialogComplete,
        upload_start_handler : uploadStart,
        upload_progress_handler : uploadProgress,
        upload_error_handler : uploadError,
        upload_success_handler : uploadSuccess,
        upload_complete_handler : uploadComplete,

        // Button Settings
        button_image_url : swfButtonUrl,
        button_placeholder_id : swfButtonPlaceHolderId,
        button_width: 61,
        button_height: 22,
        
        // Flash Settings
        flash_url : swfFlashUrl,
        

        custom_settings : {
            progressTarget : progressTarget,
            cancelButtonId : buttonCancelId
        },
        
        // Debug Settings
        debug: false
    });    
    
    return swfUpload;
    
}

Keep list of Uploaded Items

After the upload completes, swfupload automatically hides the progress results. I wanted our users to review which files got uploaded if they needed to. Surprisingly, there was no easy way to configure this. This is what I meant in my other post that swfupload was a bit clunky, but at least it works compared to the "uploadify" alternative. To make the change I commented out some of the code in the fileprogress.js file:

FileProgress.prototype.setError = function () {
    this.fileProgressElement.className = "progressContainer red";
    this.fileProgressElement.childNodes[3].className = "progressBarError";
    this.fileProgressElement.childNodes[3].style.width = "";

    // COMMENT OUT TO STOP REMOVING UPLOAD RESULT
    //var oSelf = this;
    //this.setTimer(setTimeout(function () {
    //    oSelf.disappear();
    //}, 5000));};

Reference: http://www.swfupload.org/forum/generaldiscussion/2123