Envío de archivos en JavaScript

Supongamos que tiene un elemento HTML que representa un botón que permite a los usuarios seleccionar un archivo. Al hacer clic en el botón y elegir un archivo, su nombre se almacena en document.getElementById("image-file").value. Si el servidor admite solicitudes POST de varias partes en la URL "/upload/image", ¿cómo se envía el archivo a ese punto final? Además, ¿cómo monitoreas el progreso de la carga?

JavaScript puro con Fetch

Puedes usar la API de recuperación con manejo opcional de espera-intentar-catch:

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

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

Ejemplo con Async-Try-Catch

Este ejemplo también incluye datos de usuario enviados como JSON :

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);
  }
}

Supervisión del progreso de la carga

Desafortunadamente, métodos como request.onprogress no son compatibles con la carga de archivos HTML5 con recuperación, pero puedes monitorear el progreso general de la carga escuchando los eventos de la red:

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);