title: XHR progress bar for file upload for request AND response
body: <p>I want to show the upload progress of a file through to the <strong>time the request completes from the server</strong>.</p>
  
  <p>Every single example out there just shows how to do a progress bar for sending the file from browser to server and not from browser to server back to browser.</p>
  
  <p>The code I have below only shows the progress of the client uploading the file to the server and not the response. Basically as soon as the request is hit on the server the progress event on the client completes which isn't what I want.</p>
  
  <p>How do I do this?</p>
  
  <p>xhr:</p>
  
  <pre><code>export default (url, opts = {}, uploadEvents) =&gt;
    new Promise((res, rej) =&gt; {
      const xhr = new XMLHttpRequest();
  
      xhr.open(opts.method || 'get', url, true);
  
      Object.keys(opts.headers || {}).forEach((key) =&gt; {
        xhr.setRequestHeader(key, opts.headers[key]);
      });
  
      xhr.onload = e =&gt; res(e.target.responseText);
      xhr.onerror = rej;
  
      if (xhr.upload) {
        Object.keys(uploadEvents).forEach((key) =&gt; {
          xhr.upload.addEventListener(key, uploadEvents[key]);
        });
      }
  
      xhr.send(opts.body);
    });
  </code></pre>
  
  <p>Request:</p>
  
  <pre><code>fetchProgress('/upload/upload', {
    method: 'post',
    body: formData,
  }, {
    progress: (e) =&gt; {
      if (e.lengthComputable) {
        const progressPercent = parseInt((e.loaded / e.total) * 100, 10);
  
        progressPercents[i] = {
          value: progressPercent,
          id,
        };
  
        dispatch({
          type: 'ADD_UPLOAD_PROGRESS',
          progressPercents,
        });
      }
    },
  });
  </code></pre>
  
  <p>Server code:</p>
  
  <pre><code>[HttpPost]
  public async Task&lt;IActionResult&gt; Upload(IFormFile file)
  {
      var processAudio = await _fileStorage.TempStoreMp3Data(file);
      var audioBlob = _cloudStorage.GetBlob(CloudStorageType.Audio, processAudio.AudioName);
  
      await audioBlob.UploadFromPathAsync(processAudio.AudioPath, ProcessAudio.AudioContentType);
  
      return Ok();
  }
  </code></pre>