title: How to display the progress of each file when uploading multiple files using axios in Vue.js
body: <p>I am implementing a multifile upload component that shows the upload progress percentage of each file using axios in Vue.js.</p>
  <p>But the &quot;onUploadProgress&quot; in axios seems to return the overall progress, not the progress of each file. So the progress of the first file is not displayed.</p>
  <p>The total value of the ProgressEvent object matches the sum of the sizes of the two files in the image below.</p>
  <p><a href="https://i.stack.imgur.com/pCZ5E.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pCZ5E.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/uvvIk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uvvIk.png" alt="enter image description here" /></a></p>
  <p>[Code]</p>
  <pre><code>let formData = new FormData();
  payload.data.files.forEach((data) =&gt; {
      formData.append('files[]', data);
  });
  
  ...
  
  let response = await axios.post(url, formData, {
              headers: {
                  'Content-Type': 'multipart/form-data'
              },  
              onUploadProgress: (progressEvent) =&gt; {
                  let percentage = parseInt(Math.round((progressEvent.loaded / progressEvent.total) * 100));
                  let files = store.state.uploadFiles.map((value, index, row) =&gt; {
                      if(index === row.length - 1) {
                          value.uploadPercentage = percentage;
                      }   
                      return value;
                  }); 
                  store.commit(Constant.UPLOAD_FILES, { files: files }); 
              }   
          }); 
          if (response.data.success) {
              let files = store.state.uploadFiles.map((value, index, row) =&gt; {
                  if(index === row.length - 1) {
                      value.uploadPercentage = 100;
                  }   
                  return value;
              }); 
              store.commit(Constant.UPLOAD_FILES, { files: files });
          }
  </code></pre>
  <p>Looping through a single file upload request is the solution I've been looking into.
  I wonder if there is any other way at all.</p>
  <p>Please Help. Any ideas would be greatly appreciated.</p>