Portail / Les sites Web / Le langage embarqué des navigateurs : JavaScript(Sommaire)

Le téléversement de fichiers : l'envoie des fichiers.

Mise à jour du 20/11/2024.

Après avoir vu comment sélectionner des fichiers, interessons nous à leur envoie vers le serveur via le réseau.

L'interpréteur JavaScript est doté d'une nouvelle API nommée Fetch. Cette API dispose d'une fonction globale nommée fetch() pour pouvoir émettre tout type de requête du navigateur vers le serveur. Malheureusement, cette API ne permet pas de suivre pas à pas le téléversement. Malgré tout, elle a l'avantage de respecter le mécanisme CORS (Cross Origin Resource Sharing) qui est un mécanisme qui assure le respect du domaine cible des requêtes HTTP.

Nous allons ici utiliser à la place une vieille rustine moins sécuritaire mais qui autorise le suivi du téléversement : la classe XMLHttpRequest.

L'inspection de cette page ou l'affichage de son code source HTML permet d'appréhender la totalité du démonstrateur. Auparavant, nous devons faire plusieurs remarques :

• Le serveur distant est un serveur de test accessible via l'URL https://httpbin.org/post . Si cet article est trop ancien, il est possible que ce serveur ne soit plus joignable 
• Pour suivre la progression, nous utilisons un contrôle HTML <progress>. L'attribut style de ce contrôle ne permet pas de le personnaliser facilement. C'est pourquoi vous trouverez dans l'en-tête de la page une balise <style>chargé de cette tâche ;
• Nous n'avons conservé que la méthode de sélection manuelle des fichiers de façon à conserver un code HTML et JavScripot simple. Cela fonctionnerait tout aussi bien avec une sélection par glisser-déposer vu précédemment ;
• Nous avons placé ici le bouton d'exécution du téléversement dans un formulaire (<form>) car cela permet de transporter d'autres données éventuellement. Ce n'est pas une obligation car nous pouvons reconstituer un formulaire via JavaScript ;
• Le code JavaScript a été volontairement écrit de manière lisible sur la base de fonctions courtes et simples.

En gros, on sélectionne les fichiers un par un ou en groupe. La sélection peut se faire en plusieurs étapes. Cela permet par exemple de téléverser en une seule fois des fichiers situés sur des répertoires différents. Les fichiers sélectionnés sont stockés dans la variable globale files. Lorsque la sélection est achevée, on actionne le bouton d'envoi du formulaire ce qui déclenche la fonction handleSubmit(). Cette fonction met à jour l'interface graphique puis invoque à son tour la fonction uploadFiles() qui effectue le téléversement. Ce sont les gestionnaires associés par cette fonction à un objet de classe XMLHttpRequest qui permettent le suivi du téléversement.