Incorrect upload progress shown when uploading file to Amazon S3 using SDK and Uploadify

Question

My ASP.NET MVC (C#) application is using Uploadify to upload files to Amazon S3 using the SDK for .NET, but it shows incorrect upload progress.

When I upload a file directly to our server using Uploadify it works fine. However, when I upload a file using Amazon S3 TransferUtility.Upload method, the progress bar shows 100% completion quickly, but I need to wait for a long time to attain Uploadify's onComplete event. My code is shown below.

C# code:

using (transferUtility = new TransferUtility(AWSAccessKey, AWSSecretKey))
{
    try
    {
        TransferUtilityUploadRequest request = new TransferUtilityUploadRequest();

        request.WithBucketName(AWSBucket)
            .WithKey(folderKey)
            .WithTimeout(5 * 60 * 1000)
            .WithInputStream(uploadFileStream);

        request.WithCannedACL(S3CannedACL.PublicRead);

        transferUtility.Upload(request);
    }                
    catch (AmazonS3Exception amazonS3Exception)
    {
        throw amazonS3Exception;
    }
}

JavaScript code:

jQuery(document).ready(function () {
    var allowdfileext='*.doc;*.docx;*.pdf;'
    var extarray=allowdfileext.split(';');

    jQuery('#proposalUploadFile').uploadify({
        'uploader': '/Content/uploadify/uploadify.swf',
        'script': '/File/Upload',
        'folder': '/uploads',
        'buttonImg':'/Content/uploadify/upload-file.jpg',
        'cancelImg': '/Content/uploadify/cancel.png',
        'auto': true,            
        'height': '25',
        'width': '95', 
        'wmode':'transparent',
        'sizeLimit': '20971520',
        'onComplete': fileUploaded,
        'multi': false,
        'scriptData': {
            'saveToFolder': 'Temp',
            'fileextension':'*.doc;*.docx;*.pdf;',
            'subdomain':'qa','saveInLocal':'True'
        },
        'fileExt':'*.doc;*.docx;*.pdf;',
        'fileDesc':'Files (*.doc;*.docx;*.pdf;)',
        'onAllComplete': fileUploadCompleted,
        'onError' : function(event, ID, fileObj, errorObj) {
            var r = '<br />ERROR: ';

            switch(errorObj.info) {
                case 405:
                    r += 'Invalid file type.';
                    break;
                case 406:
                    r += 'Some other error.';
                    break;
                default:
                    r += 'Some other error.';
                    break;
            }       
        }
    });
});

Why isn't the progress bar updating like I'm expecting it to?

Answer 1

Essentially there are two uploads happening. Once from the web page to your server and once from your server to the cloud.

What you are seeing is the upload progress from the webpage to your upload handler. The browser only knows about the data being sent from the client to your server, not the data being sent from your server to S3.

Without doing some pretty complex server work, getting the accurate upload progress value is not possible. I would recommend either firing off a background thread to handle the upload to S3 or setting the progress to something less than 100% until the complete callback is fired.