Azure storage javascript client: how to track upload progress using Ionic/Angular?

javier 936 Reputation points
2020-07-03T15:56:50.657+00:00

Following this guideline sample-blob.html I want to track upload progress by getting the progress value to the DOM. I also want to print, say, 'done' in the DOM when the upload is finished. Is there a way to "subscribe" to SpeedSummary so I can get its progress value? Any other more recommended approach?

My code:

var finishedOrError = false;  
        
      var speedSummary = blobService.createBlockBlobFromBrowserFile('input-data', filename, file, {blockSize : customBlockSize}, function(error, result, response) {  
        finishedOrError = true;  
        if (error) {  
            // Upload blob failed  
            alert('Problema: Volver a intentar o contactar al administrador');  
        } else {  
            // Upload successfully  
            alert('Subida Exitosa');  
            finish_upload();  
            return result;  
        }  
      });  
        
      speedSummary.on('progress', function () {  
        var process = speedSummary.getCompletePercent();  
        displayProcess(process);  
      })  
  
      var finish_upload = function(){  
        //TODO set upload finish process  
        //this.isUploading = false; DOESN'T WORK SINCE this is speedSummary in this context  
      }  
      var displayProcess = function(process){  
        //TODO set progress indicator  
      }  

Note: I am aware of this implementation upload-to-azure-blob-storage-with-angular-7977e979496a but it gives me an error when implementing the uploadFile function. But more importantly I am looking for something more straigthforward to implement.

Azure Blob Storage
Azure Blob Storage
An Azure service that stores unstructured data in the cloud as blobs.
2,918 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. Sumarigo-MSFT 47,021 Reputation points Microsoft Employee
    2020-07-09T04:33:02.243+00:00

    @javier-8889 Firstly, apologies for the delay in responding here and any inconvenience this issue may have caused.

    I see you have posted similar question in SO forum, please refer to the suggestion. If you still facing any issue. I would recommend to kindly just re-post the question in the Developer Community and GitHub repro to receive a focused and immediate assistance from the right set of experts.. These forum community members could provide their expert guidance on your scenario based on their experience. Thanks.

    Hope this helps!
    Kindly let us know if the above helps or you need further assistance on this issue.


    Please don’t forget to "Accept the answer” and “up-vote” wherever the information provided helps you, this can be beneficial to other community members.


Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.