FormData

Ce chapitre concerne l’envoi de formulaires HTML: avec ou sans fichiers, avec des champs supplémentaires, etc…

Les objets FormData peuvent nous aider pour cela. Comme vous l’avez peut-être deviné, c’est l’objet pour représenter les données du formulaire HTML.

Le constructeur est :

let formData = new FormData([form]);

Si un élément HTML form est fourni, il capture automatiquement ses champs.

La particularité de FormData est que les méthodes réseau, telles que fetch, peuvent accepter un objet FormData en tant que corps. Il est encodé et envoyé avec Content-Type: multipart/form-data.

Du point de vue du serveur, cela ressemble à une soumission de formulaire habituelle.

Envoi d’un formulaire simple

Envoyons d’abord un formulaire simple.

Comme vous pouvez le voir, c’est presque une ligne :

<form id="formElem">
  <input type="text" name="name" value="John">
  <input type="text" name="surname" value="Smith">
  <input type="submit">
</form>

<script>
  formElem.onsubmit = async (e) => {
    e.preventDefault();

    let response = await fetch('/article/formdata/post/user', {
      method: 'POST',
      body: new FormData(formElem)
    });

    let result = await response.json();

    alert(result.message);
  };
</script>

Dans cet exemple, le code du serveur n’est pas présenté, car il dépasse notre portée. Le serveur accepte la requête POST et répond “User saved”.

Méthodes FormData

Nous pouvons modifier les champs dans FormData avec des méthodes :

• formData.append(name, value) – ajoute un champ de formulaire avec le name et value donnés,
• formData.append(name, blob, fileName) – ajoute un champ comme s’il était <input type="file">, le troisième argument fileName définit le nom du fichier (pas le nom du champ de formulaire), comme s’il s’agissait d’un nom du fichier dans le système de fichiers de l’utilisateur,
• formData.delete(name) – supprimer le champ avec le name donné,