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

Question

Following this guideline, 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 but it gives me an error when implementing the uploadFile function. But more importantly I am looking for something more straigthforward to implement.

Note 2 : the error mentioned above is

No overload matches this call.
  Overload 1 of 11, '(op1: UnaryFunction<Observable<number>, Observable<unknown>>, op2: UnaryFunction<Observable<unknown>, Observable<number>>): Observable<...>', gave the following error.
    Argument of type 'Observable<number>' is not assignable to parameter of type 'UnaryFunction<Observable<number>, Observable<unknown>>'.

Answer 1

This is what worked for me using my current library (please also note Jim Xu's answer for a solution with the latest library)

async uploadFileToAzure(file, filename, index){
    
        
    this.AStorage.getSAS(this.token, {"filename":filename}).subscribe(async sas=>{
      var self = this;
      this.sas = sas;
      var blobUri = 'https://xxxx.blob.core.windows.net/'; //actual blobUri goes here
      var blobService = AzureStorage.Blob.createBlobServiceWithSas(blobUri, this.sas["token"]);
      var customBlockSize = file.size > 1024 * 1024 * 32 ? 1024 * 1024 * 4 : 1024 * 512; 
      blobService.singleBlobPutThresholdInBytes = customBlockSize;
  
      var finishedOrError = false;
      var self = this;
      var speedSummary = blobService.createBlockBlobFromBrowserFile('input-data', filename, file, {blockSize : customBlockSize}, function(error, result, response) {
        finishedOrError = true;
        if (error) {
            // Upload blob failed
            self.show_toast('Problema: Volver a intentar o contactar al administrador');
        } else {
            // Upload successfully
            self.show_toast('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
        
      }

      var file_to_process = this.files_to_process[index]
      var displayProcess = function(process){
        console.log('file_to_process', file_to_process)
        var s = document.getElementById(file_to_process)
        s.innerHTML = process;
        //var s = document.getElementById(progress_bars[index])
      }  
    });    
  }