Comment télécharger un ou plusieurs fichiers en toute simplicité avec FormData

Dans cet article, nous découvrirons l'interface FormData disponible dans les navigateurs Web modernes dans le cadre de la spécification HTML5.

Nous verrons des exemples d'utilisation de FormData avec Ajax, Angular 7, Ionic et React.

Qu'est-ce que FormData

FormData est simplement une structure de données qui peut être utilisée pour stocker des paires clé-valeur. Tout comme son nom l'indique, il est conçu pour contenir des données de formulaires, c'est-à-dire que vous pouvez l'utiliser avec JavaScript pour créer un objet qui correspond à un formulaire HTML. C'est surtout utile lorsque vous devez envoyer des données de formulaire à des points de terminaison d'API RESTful, par exemple pour télécharger un ou plusieurs fichiers à l'aide de l' XMLHttpRequestinterface, de l' fetch()API ou d'Axios.

Vous pouvez créer un objet FormData en instanciant l'interface FormData à l'aide de l' newopérateur comme suit:

const formData = new FormData() 

La formDataréférence fait référence à une instance de FormData. Vous pouvez appeler de nombreuses méthodes sur l'objet pour ajouter et travailler avec des paires de données. Chaque paire a une clé et une valeur.

Voici les méthodes disponibles sur les objets FormData:

  • append(): utilisé pour ajouter une paire clé-valeur à l'objet. Si la clé existe déjà, la valeur est ajoutée à la valeur d'origine de cette clé,
  • delete(): utilisé pour supprimer une paire clé-valeur,
  • entries(): renvoie un objet Iterator que vous pouvez utiliser pour parcourir la liste des paires clé / valeur de l'objet,
  • get(): utilisé pour renvoyer la valeur d'une clé. Si plusieurs valeurs sont ajoutées, il renvoie la première valeur,
  • getAll(): utilisé pour renvoyer toutes les valeurs d'une clé spécifiée,
  • has(): utilisé pour vérifier s'il y a une clé,
  • keys(): renvoie un objet Iterator que vous pouvez utiliser pour lister les clés disponibles dans l'objet,
  • set(): utilisé pour ajouter une valeur à l'objet, avec la clé spécifiée. Cela va relacer la valeur si une clé existe déjà,
  • values(): renvoie un objet Iterator pour les valeurs de l'objet FormData.

Exemple de téléchargement de fichier avec JavaScript Vanilla

Voyons maintenant un exemple simple de téléchargement de fichiers à l'aide de JavaScript vanilla, XMLHttpRequestet FormData.

Accédez à votre dossier de travail et créez un index.htmlfichier avec le contenu suivant:

   Parcel Sandbox 

Nous créons simplement un document HTML avec un identifiant par l' appID. Ensuite, nous incluons le index.jsfichier à l'aide d'une balise.

Ensuite, créez le index.jsfichier et ajoutez le code suivant:

document.getElementById("app").innerHTML = ` 

File Upload & FormData Example

`; const fileInput = document.querySelector("#fileInput"); const uploadFile = file => { console.log("Uploading file..."); const API_ENDPOINT = "//file.io"; const request = new XMLHttpRequest(); const formData = new FormData(); request.open("POST", API_ENDPOINT, true); request.onreadystatechange = () => { if (request.readyState === 4 && request.status === 200) { console.log(request.responseText); } }; formData.append("file", file); request.send(formData); }; fileInput.addEventListener("change", event => { const files = event.target.files; uploadFile(files[0]); });

Nous insérons d'abord un élément dans notre page HTML. Cela sera utilisé pour sélectionner le fichier que nous allons télécharger.

Ensuite, nous recherchons l'élément d'entrée de fichier à l'aide de la querySelector()méthode.

Ensuite, nous définissons la uploadFile()méthode dans laquelle nous déclarons d'abord une   API_ENDPOINTvariable qui contient l'adresse de notre point de terminaison de téléchargement de fichiers. Ensuite, nous créons une XMLHttpRequestrequête et un FormDataobjet vide .

Nous utilisons la méthode append de FormData pour ajouter le fichier, passé en paramètre à la uploadFile()méthode, à la fileclé. Cela créera une paire clé-valeur avec filecomme clé et le contenu du fichier transmis comme valeur.

Ensuite, nous envoyons la requête en utilisant la send()méthode de XMLHttpRequestet nous passons l' FormDataobjet en argument.

Après avoir défini la uploadFile()méthode, nous écoutons l'événement de changement sur l' élément et nous appelons la   uploadFile()méthode avec le fichier sélectionné comme argument. Le fichier est accessible à partir du event.target.filestableau.

Vous pouvez expérimenter cet exemple à partir de ce bac à sable de code:

Téléchargement de plusieurs fichiers

Vous pouvez facilement modifier le code ci-dessus pour prendre en charge le téléchargement de plusieurs fichiers.

Tout d'abord, vous devez ajouter la multiplepropriété à l' élément:

Vous pourrez désormais sélectionner plusieurs fichiers à partir de votre lecteur.

Ensuite, changez la uploadFile()méthode pour accepter un tableau de fichiers comme argument et faites simplement une boucle dans le tableau et ajoutez les fichiers à l' FormDataobjet:

const uploadFile = (files) => { console.log("Uploading file..."); const API_ENDPOINT = "//file.io"; const request = new XMLHttpRequest(); const formData = new FormData(); request.open("POST", API_ENDPOINT, true); request.onreadystatechange = () => { if (request.readyState === 4 && request.status === 200) { console.log(request.responseText); } }; for (let i = 0; i < files.length; i++) { formData.append(files[i].name, files[i]) } request.send(formData); }; 

Enfin, appelez la méthode avec un tableau de fichiers comme argument:

fileInput.addEventListener("change", event => { const files = event.target.files; uploadFile(files); }); 

Ensuite, vous pouvez consulter ces didacticiels avancés pour savoir comment utiliser FormDataavec Angular, Ionic et React:

  • Comment publier des données de formulaire avec Angular 7
  • React & Axios FormData
  • Téléchargement de fichiers multiples avec Ionic 4 et FormData