How to display file upload progress in progressbar - Amazon S3 bucket

Question

I would like to display file upload progress in a progress bar on my web page while uploading a file to Amazon S3 …

On my web page I select a file from a file input which calls my controller with a Ajax POST request .

In the controller I extract the file from the posted request.

var hpf = Request.Files[1];

Then I call a method that uses the AmazonS3Client..

UploadVideoMultiPart(hpf.InputStream,fileName)

This above method completes the upload to S3 perfectly fine and during that process repeatedly sends the number bytes uploaded .

public static void UploadPartProgressEventCallback(object sender, StreamTransferProgressArgs e)
        {// Process event. 
            Var progress = (string.Format("{0}/{1}", e.TransferredBytes, totalContentLength));
        }

Example:

TransferredBytes TotalBytes

8778 152652556

2562 152652556

How can I send back the data from the UploadPartProgressEventCallback to the browser without stopping the upload thread.

If I could get this data I would be able to update my progress bar.

Answer 1

You Need something to communicate between your Server to Client

SignalR is your saviour here in this situation ,with the help of SignalR you gains the ability to push the Content from server side to Clientside.

entire Documentation is here SignalR@GitHub

you can follow these
web resources as well

(assuming you have gone through above link)

Now coming back to your need ,

you can even hook SignalR broadcast ie can call client method and manage groups outside the Hub class

an example beautifully explained here In this Example

Although it will be new api to learn if you are not familiar,but trust me it won't take much time to grasp it,

Answer 2

Have you considered uploading your file/s direct to S3 from your webpage instead of going back to your webserver? (This will enable you to have easier control of your progress bar)

Details can be found here:

• http://docs.aws.amazon.com/AmazonS3/latest/dev/UsingHTTPPOST.html
• http://docs.aws.amazon.com/AmazonS3/latest/dev/HTTPPOSTExamples.html (Examples)

The following SO article also talks about this in detail

• Amazon S3 direct file upload from client browser - private key disclosure