Téléchargements de fichiers avec HTMX et Golang-Golang-php.cn

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 allons combiner 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.

Au fait, 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

Copier après la connexion

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

Copier après la connexion

UUID Google

go get github.com/google/uuid

Copier après la connexion

Avec ces deux-là 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 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"}}
<ul>
    {{range .}}
        <li>{{ . }}</li>
    {{end}}
</ul>
{{end}}

Copier après la connexion

Ceci définit un modèle de message 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"}}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://unpkg.com/htmx.org@1.9.12"></script>
    <title>Upload File</title>
</head>
<body>

    <div class="row">
        <div class="col-md-6 p-5 mt-5">
            <h4>Upload File</h4>
            <form  class="form">
                <div id="messages"></div>
                <div class="mb-3">
                    <label for="avatarInput" class="form-label">Select Image</label>
                    <input type="file" class="form-control" id="avatarInput" name="avatar" required>
                </div>
                <button 
                    hx-post="/upload" 
                    hx-encoding="multipart/form-data" 
                    hx-target="#messages" 
                    type="submit" class="btn btn-primary">Upload</button>
            </form>
        </div>
    </div>



</body>
</html>
{{end}}

Copier après la connexion

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

Tutoriels populaires

Plus>

Tutoriels associés

Recommandations populaires

Derniers cours