In JavaScript le Fetch API ci consentono di effettuare anche l'upload di file.

Si tratta di utilizzare l'oggetto FormData inserendolo come contenuto della proprietà body di una richiesta POST:


'use strict';

const uploadFile = async ({ url, fileName, fileData }) => {
    const data = new FormData();
    data.append(fileName, fileData);

    try {
        const req = await fetch(url, { method: 'POST', body: data });
        return await req.json();
    } catch(err) {
        return null;
    }
};

La funzione uploadFile() accetta come parametro un oggetto con tre proprietà:

  1. url: l'endpoint dell'applicazione che gestirà l'upload del file;
  2. fileName: il nome del file così come appare come attributo name di un campo di input file;
  3. fileData: un riferimento all'oggetto file ottenuto accedendo all'array files del campo di input.

Per evitare le funzioni di callback create da then(), la funzione utilizza il modello async/await per gestire le Promise create dalla funzione fetch(). Restituisce un oggetto JSON in caso di avvenuto upload o null in caso di errore.

Possiamo usarla con un form di upload nel modo seguente:


const form = document.getElementById('upload');
const fileInput = form.querySelector('#file');

form.addEventListener('submit', evt => {
    evt.preventDefault();
    const params = {
        url: '/api/upload',
        fileName: 'file',
        fileData: fileInput.files[0]
    };
    uploadFile(params).then(results => {
        //...
    });
}, false);

Intercettiamo l'evento submit del form impedendo che quest'ultimo venga inviato in modalità sincrona. Quindi usiamo la nostra funzione specificando l'oggetto che contiene i parametri per effettuare l'upload.