attempting to get Firebase upload progress -- uploadTask.on not a function

Question

I'm trying to get the progress of a Firebase upload but the function I'm trying to watch the state with is apparently being called on the wrong object type:

Uncaught TypeError: uploadTask.on is not a function
    at VueComponent.submitUpload (eval at 100 (:8080/1.346d5d05d7c5f84c45e7.hot-update.js:7), <anonymous>:231:15)
    at boundFn (eval at <anonymous> (app.js:808), <anonymous>:125:14)
    at VueComponent.invoker (eval at <anonymous> (app.js:808), <anonymous>:1659:18)
    at VueComponent.Vue.$emit (eval at <anonymous> (app.js:808), <anonymous>:1930:16)
    at VueComponent.handleClick (eval at <anonymous> (app.js:1765), <anonymous>:6448:13)
    at boundFn (eval at <anonymous> (app.js:808), <anonymous>:125:14)
    at HTMLButtonElement.invoker (eval at <anonymous> (app.js:808), <anonymous>:1659:18)

Here's how I'm uploading the file:

 submitUpload: function(){
     var files = this.$refs.upload.uploadFiles;
     var storageRef = storage.ref();
     var pdfsRef = storageRef.child('files');
     var file = files[0]['raw'];
     var name = files[0]['name'];
     var fileref = storageRef.child(name);
     var self = this;
     var uploadTask = fileref.put(file).then(function(snapshot){
     console.log(name + ' is the filename');
     console.log('uploaded');
     var url = snapshot.downloadURL;
     self.gettext(url, name);
     });
     uploadTask.on('state_changed', function(snapshot){
     // Observe state change events such as progress, pause, and resume
     // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
     var progress =  (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
     console.log('upload progress is: ' + progress);
     switch (snapshot.state) {
         case firebase.storage.TaskState.PAUSED: // or 'paused'
         console.log('Upload is paused');
         break;
         case firebase.storage.TaskState.RUNNING: // or 'running'
         console.log('Upload is running');
         break;
     }
     }, function(error) {
     // Handle unsuccessful uploads
     }, function() {
     // Handle successful uploads on complete
     // For instance, get the download URL: https://firebasestorage.googleapis.com/...
         var downloadURL = uploadTask.snapshot.downloadURL;
     });
 },

Can anyone tell me why the uploadTask variable doesn't have this function available, and how I can correct this? I suspect it's a problem with asynchronicity but I'm not sure how to wait until uploadTask is the right object type to watch its state.

Answer 1

The statement:

var uploadTask = fileref.put(file).then(...);

assigns to uploadTask the Promise returned by then(), instead of the UploadTask you want.

Change the statement to:

var uploadTask = fileref.put(file);
uploadTask.then(...);

Answer 2

Some updates since 2017. The put method yields a snapshot property of task which allows you to observe the state changes on.

let uploadTask = fileRef.put(_imageBlobInfo.imgBlob);

uploadTask.task.on('state_changed', function(snapshot: any){
  // Observe state change events such as progress, pause, and resume
  // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
  var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
  console.log('Upload is ' + progress + '% done');
   switch (snapshot.state) {
     case this.afStorage.storage.TaskState.PAUSED: // or 'paused'
     console.log('Upload is paused');
     break;
     case this.afStorage.storage.TaskState.RUNNING: // or 'running'
     console.log('Upload is running');
     break;
   }
}, function(error) {
  reject(error);
}, function() {
  resolve(uploadTask.task.snapshot);
});