Téléchargements de fichiers pour le Web (1) : téléchargement de fichiers avec HTML

Aujourd’hui, nous lançons le premier article d’une série consacrée au téléchargement de fichiers sur le Web. Dans cet article, nous allons commencer par les bases de l’utilisation du HTML. La série complète ressemblera à ceci :

1. Télécharger des fichiers avec HTML
2. Télécharger des fichiers avec JavaScript
3. Réception de téléchargements de fichiers avec Node.js (Nuxt.js)
4. Optimiser les coûts de stockage avec Object Storage
5. Optimiser la livraison avec un CDN
6. Sécurisation des téléchargements de fichiers avec des analyses de logiciels malveillants

Accéder aux fichiers

La toute première étape consiste à accéder à un fichier à télécharger. Malheureusement, ou plutôt heureusement, les navigateurs ne peuvent pas accéder à nos systèmes de fichiers. S’ils le faisaient, ce serait un problème de sécurité majeur.

Des travaux sont en cours sur l’API d’accès au système de fichiers, mais il est expérimental et son accès sera limité, alors supposons qu’il n’existe pas.

L’accès à un fichier nécessite une interaction de l’utilisateur, ce qui signifie que nous avons besoin de quelque chose dans l’interface utilisateur avec lequel l’utilisateur peut interagir. Idéalement, il y a l’élément d’entrée avec un attribut de type de fichier.

En soi, une entrée de fichier n’est pas très utile. Il permet à un utilisateur de sélectionner un fichier à partir de son appareil, mais c’est à peu près tout.

Pour envoyer le fichier à un serveur, nous devons faire une requête HTTP, ce qui signifie que nous avons besoin d’un <form>. Nous mettrons l’entrée du fichier à l’intérieur, avec un <button> pour soumettre le formulaire. L’entrée aura également besoin d’un <label> pour le rendre accessible aux technologies d’assistance, un id attribut pour l’associer au libellé, et un name pour inclure ses données avec la requête HTTP :

<form>  <label for="file">File</label>  <input id="file" type="file" />  <button>Upload</button>
</form>

Bien que cela semble bon, cela ne fonctionne pas bien actuellement.

Inclure un corps de requête

Si nous regardons le « onglet réseau” lorsque nous soumettons le formulaire, nous pouvons voir qu’il génère un GET requête, et la charge utile est envoyée sous la forme d’une chaîne de requête qui ressemble à ceci : « ?name=filename.txt.” Il s’agit essentiellement d’une paire clé-valeur, la clé étant l’entrée name et la valeur étant le nom du fichier.

Ceci est envoyé sous forme de chaîne.

Ce n’est pas tout à fait ce que nous recherchons ici.

Nous ne pouvons pas réellement envoyer un fichier à l’aide d’un GET request car vous ne pouvez pas mettre un fichier dans les paramètres de la chaîne de requête. Nous devons mettre le fichier dans le corps de la requête. Pour ce faire, nous devons envoyer un POST demande, ce que nous pouvons faire en changeant le formulaire method attribuer à "post".

<form method="post">  <label for="file">File</label>  <input id="file" name="file" type="file" />  <button>Upload</button>
</form>

Maintenant, si nous explorons cette demande, nous pouvons voir que nous faisons un POST demande. Nous pouvons également voir que la requête a une charge utile contenant les données du formulaire. Malheureusement, les données ne sont toujours qu’une paire clé-valeur avec l’entrée name et le nom du fichier.

Définir le type de contenu

Nous n’envoyons toujours pas le fichier, et la raison est liée à la demande « Content-Type.”

Par défaut, lorsqu’un formulaire est soumis, la demande est envoyée avec un Content-Type de application/x-www-form-urlencoded. Et, malheureusement, nous ne pouvons pas envoyer les informations du fichier binaire sous forme de données encodées en URL.

Pour envoyer le contenu du fichier sous forme de données binaires, nous devons changer le Content-Type de la demande à multipart/form-data. Pour ce faire, nous pouvons définir le formulaire enctype attribut.

<form method="post" enctype="multipart/form-data">  <label for="file">File</label>  <input id="file" name="file" type="file" />  <button>Upload</button>
</form>

Maintenant, si nous soumettons le formulaire une fois de plus, nous pouvons voir que la demande utilise le POST méthode et a la Content-Type mis à multipart/form-data. Dans les navigateurs Chromium, vous ne verrez plus la charge utile de la requête, mais vous pouvez la voir dans les outils de développement de Firefox sous le « demander les paramètresonglet « .

Nous l’avons fait!

résumer

Avec tout cela en place, nous pouvons télécharger des fichiers en utilisant HTML. Pour réitérer, l’envoi de fichiers avec HTML nécessite trois choses :

1. Créez une entrée avec type de fichier pour accéder au système de fichiers.
2. Utiliser un formulaire avec method="post" pour inclure un corps dans la requête.
3. Définissez la demande Content-Type pour multipart/form-data en utilisant le enctype attribut.

J’espère que vous avez appris quelque chose de nouveau aujourd’hui et que vous reviendrez pour le reste de la série. Dans le reste de la série, nous couvrirons des éléments tels que le téléchargement de fichiers avec JavaScript, la réception de fichiers sur le backend, l’optimisation des ressources et des coûts avec le stockage d’objets, les problèmes de sécurité pour les téléchargements et les améliorations de la livraison.

Merci beaucoup d’avoir lu. Si vous avez aimé cet article, merci de le partager. C’est l’un des meilleurs moyens de me soutenir.