Téléchargements de fichiers avec HTMX et Golang

Bien sûr, vous avez déjà entendu parler de la génialité du HTMX (vous ne l'avez pas fait ? eh bien, c'est une bonne chose que vous soyez là ?)

Aujourd'hui, nous combinerons la simplicité de HTMX avec la puissance de Golang pour télécharger des fichiers sur notre serveur. Oui, nous allons créer une autre fonctionnalité Web intéressante avec HTMX et Go.

À propos, si vous voulez vraiment un guide pratique basé sur un projet sur la création d'applications fullstack avec HTMX, consultez mon cours HTMX + Go : Créer des applications Fullstack avec Golang et HTMX [Remise incluse].

Alors, commençons.

Configuration du projet Go

La première étape consiste à configurer un simple projet Go. Nous pouvons le faire en créant un dossier, en y entrant et en l'initialisant en tant que projet Go à l'aide des commandes ci-dessous :

mkdir go-htmx-file-uploads cd go-htmx-file-uploads go mod init go-htmx-file-uploads

Une fois le projet initialisé, installons maintenant quelques dépendances dont nous aurons besoin dans notre projet.

Ce sera un simple serveur qui contiendra une seule page avec notre formulaire de téléchargement ainsi qu'un point de terminaison qui sera utilisé pour télécharger le fichier.

Pour le routage, nous utiliserons la bibliothèque de routage Gorilla Mux, mais n'hésitez pas à utiliser n'importe quelle solution de routage de votre choix. Nous utiliserons également la bibliothèque UUID de Google pour Go afin de générer des noms aléatoires pour nos fichiers lorsque nous les téléchargerons. Il s'agit d'une préférence personnelle car vous pouvez générer des noms de fichiers de différentes manières.

Installez ces deux-là avec les commandes ci-dessous :

Gorille Mux

go get -u github.com/gorilla/mux

Google UUID

go get github.com/google/uuid

Une fois ces deux éléments installés, notre projet est entièrement mis en place et nous pouvons passer à l'étape suivante.

Création de nos modèles

Nous allons créer deux modèles HTML pour ce petit projet.

Le premier modèle sera un fragment HTML qui prend simplement une tranche de messages sous forme de chaîne que nous pouvons envoyer du serveur au client.

Ce fragment prendra cette tranche de messages et la parcourra pour créer une liste HTML à renvoyer au client (rappelez-vous comment HTMX fonctionne avec les API Hypermedia, plutôt cool hein ?).

Alors, créons cela d’abord.

À la racine du projet Go, créez d'abord un dossier de modèles dans lequel nous stockerons tous nos modèles.

Ensuite, créez un fichier messages.html dans le dossier des modèles et ajoutez-y le code suivant :

{{define "messages"}} 
 {{range .}} 
{{ . }}
 {{end}} 
 {{end}}

Cela définit un modèle de messages et parcourt la tranche entrante de messages de chaîne pour former une liste HTML.

Pour notre prochain modèle, nous créerons la page de téléchargement de fichiers elle-même.

Dans le dossier des modèles, créez un nouveau fichier upload.html et collez le code ci-dessous :

{{define "upload"}}         
  
 
 
Upload File
 
 
 
 Select Image  
 Upload 
 
 
   {{end}}

Parfait !

Passons maintenant en revue le code de ce fichier.

Tout d'abord, nous avons défini le modèle avec le nom upload, c'est le nom que nous utiliserons pour le référencer plus tard dans nos gestionnaires de routes.

Nous avons ensuite du code HTML passe-partout dans la section head, mais j'ai inclus ici deux bibliothèques importantes (enfin, une seule est vraiment importante, l'autre est juste pour les vibrations CSS).

La bibliothèque HTMX a été incluse avec le