Vue-resource: Progress bar using xhr: onprogress

[santigraviano]

this.$http.post('/upload', formData, {
xhr: {
onprogress: (e) => {
this.progress = (e.position / e.totalSize)*100;
}
}
}).then...

The formData contains one image.

When I run the code, it always returns 100 at one time.

[santigraviano]

I figure out

this.$http.post('/upload', formData, {
upload: {
onprogress: (e) => {
if (e.lengthComputable) {
this.progress[this.count].loaded = e.loaded;
this.progress[this.count].total = e.total;
}
}
}
}).then...

[puppeteer701]

I tried this, but I am still not seeing the callback being called.

```
this.$http.post('/api/upload', formData, {
headers: {'Content-Type': 'multipart/form-data'},
upload: {
onprogress: (e) => {
console.log(e)
}
}
}

[gabrielrobert]

Even using throttling, I am not able to use onprogress properly. Any idea?

[abou7mied]

This worked for me

Vue.http.post('/api/upload', formData, {
  progress(e) {
    if (e.lengthComputable) {
      console.log("e.loaded: %o, e.total: %o, percent: %o", e.loaded, e.total, (e.loaded / e.total ) * 100);
    }
  }
})

[robaxelsen]

Thanks @abou7mied, worked great for me :tada:

Posting this amendment, for any future readers, in case anyone has issues with use of string substitution (%o) in console.log. This is currently only available in Firefox, so need to replace that with template literals or concatenation.

Example with template literals:

Vue.http.post('/api/upload', formData, {
  progress(e) {
    if (e.lengthComputable) {
      console.log(`e.loaded: ${e.loaded}, e.total: ${e.total}, percent: ${(e.loaded / e.total ) * 100}`);
    }
  }
})

Example with concatenation:

Vue.http.post('/api/upload', formData, {
  progress(e) {
    if (e.lengthComputable) {
      console.log('e.loaded:', e.loaded, 'e.total:', e.total, 'percent:', (e.loaded / e.total ) * 100);
    }
  }
})