Fetching & Displaying Data

How should file uploads be handled to provide the best user experience?
async function uploadFile(file) {
  const formData = new FormData();
  formData.append('file', file);
  
  const xhr = new XMLHttpRequest();
  xhr.upload.addEventListener('progress', (event) => {
    if (event.lengthComputable) {
      const progress = (event.loaded / event.total) * 100;
      updateProgressBar(progress);
    }
  });
  
  return new Promise((resolve, reject) => {
    xhr.onload = () => resolve(xhr.response);
    xhr.onerror = () => reject(new Error('Upload failed'));
    xhr.open('POST', '/api/upload');
    xhr.send(formData);
  });
Next Question (17/20)