Comment envoyer un fichier à un serveur et suivre la progression de son téléchargement à l'aide de JavaScript ?

let photo = document.getElementById("image-file").files[0];
let formData = new FormData();

formData.append("photo", photo);
fetch('/upload/image', {method: "POST", body: formData});

async function SavePhoto(inp) {
  let user = { name: 'john', age: 34 };
  let formData = new FormData();
  let photo = inp.files[0];

  formData.append("photo", photo);
  formData.append("user", JSON.stringify(user));

  const ctrl = new AbortController(); // for timeout
  setTimeout(() => ctrl.abort(), 5000);

  try {
    let r = await fetch('/upload/image', {
      method: "POST",
      body: formData,
      signal: ctrl.signal,
    });
    console.log('HTTP response code:', r.status);
  } catch (e) {
    console.log('Huston we have problem...:', e);
  }
}</p>
<h3>Surveillance de la progression du téléchargement</h3>
<p>Malheureusement, des méthodes telles que request.onprogress ne sont pas prises en charge dans le téléchargement de fichiers HTML5 avec récupération, mais vous pouvez surveiller la progression globale du téléchargement en écoutant les événements réseau. :</p>
<pre class="brush:php;toolbar:false">let xhr = new XMLHttpRequest();

xhr.upload.addEventListener('progress', function(e) {
  if (e.lengthComputable) {
    let percentComplete = (e.loaded / e.total) * 100;
    console.log('Upload progress:', percentComplete + '%');
  }
});

xhr.open('POST', '/upload/image');
xhr.send(formData);