title: Progress bar with Vue and Axios
body: <p>I'm making an image uploader, and I'd like to display a progress bar which starts incrementing once a file is selected. </p>
  
  <p>I'm using Axios to access the backend, and have it setup like this:</p>
  
  <pre><code>const BASE_URL = 'http://localhost:3000';
  
  function uploadImage(data, listingId) {
    const url = `${BASE_URL}/listings/${listingId}/images`;
    let config = {
      onUploadProgress(progressEvent) {
        var percentCompleted = Math.round((progressEvent.loaded * 100) /
          progressEvent.total);
        return percentCompleted;
      },
    };
    return axios.post(url, data, config).
        then(x =&gt; x.request.response).
        catch(error =&gt; error);
  }
  </code></pre>
  
  <p>How can I access the <code>percentCompleted</code> from the Vue side below?</p>
  
  <pre><code>inputDidChange(e) {
    let inputData = e.target.files[0];
    var formData = new FormData();
    formData.append('image', inputData);
    uploadImage(formData, this.listingId).
      then((x) =&gt; {
        var xParsed = JSON.parse(x);
        this.newFile = xParsed.image.image.url;
        this.files.push(this.newFile);
        console.log('success');
    });
  },
  </code></pre>