How to get progress while uploading file to azure blob storage using Browser method

Question

When I am trying to upload files to my blob storage I am always getting progress percentage as 0 or 100. (There is no problem in uploading, Files are uploading accurately to my storage. The only problem is with progress percentage)

Here is my render code which calls uploadFiles Method

    render(){
        if(this.props.files.length > 0)
            this.uploadFiles(this.props.files);
        return (<div></div>);
    }

Here is the uploadFiles Method

uploadFiles = (files) => {
        var accountName = this.props.accountName;
        var SasToken = this.props.sasToken;
        var blobUri = 'https://' + accountName + '.blob.core.windows.net';
        var blobService = AzureStorage.Blob.createBlobServiceWithSas (blobUri, SasToken);
        var containerName = 'my-blob';
        Array.from(files).forEach(file => {
            var customBlockSize = file.size > 1024 * 1024 * 32 ? 1024 * 1024 * 4 : 1024 * 512;
            blobService.singleBlobPutThresholdInBytes = customBlockSize;
            var finishedOrError = false;
            var speedSummary = blobService.createBlockBlobFromBrowserFile(containerName, file.name, file, {blockSize : customBlockSize},(error, result, response) => {
                if(error){
                    console.log(error);
                } else {
                    console.log(result);
                    finishedOrError = true;
                    console.log(response);
                }            


            })  
    /*Here when I tried to console, I am always getting process variable value as zero which is declared in refreshProgress() method*/
            function refreshProgress() {
                setTimeout(function () {
                    if (!finishedOrError) {
                        var process = speedSummary.getCompletePercent();
                        console.log('entered',process);
                        refreshProgress();
                    }
                }, 300);
            }

          refreshProgress();

        });
    }

I referred this one https://dmrelease.blob.core.windows.net/azurestoragejssample/samples/sample-blob.html for uploading the file to azure. But the progress part is not clear to me.

Please help me to solve this issue. Thanks in advance

Gaurav Mantri Gaurav Mantri · Accepted Answer · 2020-04-07T07:53:40

If you look at the source code for speedSummary, you will notice that it extends EventEmitter and it emits progress event. All you need to do is subscribe to this event in your code and call the methods to get the progress.

For example, here's pseudo code (not tested):

speedSummary.on('progress', function() {
  var percentComplete = speedSummary.getCompletePercent(2);
  console.log('Upload Complete (%): ' + percentComplete);
});

How to get progress while uploading file to azure blob storage using Browser method

1 Answers