Heim > Artikel > Backend-Entwicklung > Datei-Uploads mit HTMX und Golang

Datei-Uploads mit HTMX und Golang

WBOYOriginal: 2024-08-20 06:32:41619Durchsuche

Natürlich haben Sie bereits von der Großartigkeit von HTMX gehört (Sie haben es nicht? Gut, dass Sie hier sind?)

Heute kombinieren wir die Einfachheit von HTMX mit der Leistungsfähigkeit von Golang, um Dateien auf unseren Server hochzuladen. Ja, wir werden mit HTMX und Go ein weiteres spannendes Web-Feature erstellen.

Wenn Sie übrigens wirklich einen praktischen, projektbasierten Leitfaden zum Erstellen von Fullstack-Apps mit HTMX wünschen, schauen Sie sich meinen Kurs „HTMX + Go: Fullstack-Anwendungen mit Golang und HTMX erstellen“ an [Rabatt inbegriffen].

Also, fangen wir an.

Einrichten des Go-Projekts

Der erste Schritt besteht darin, ein einfaches Go-Projekt einzurichten. Wir können das tun, indem wir einen Ordner erstellen, hineingehen und ihn mit den folgenden Befehlen als Go-Projekt initialisieren:

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

Sobald wir das Projekt initialisiert haben, installieren wir nun einige Abhängigkeiten, die wir in unserem Projekt benötigen.

Dies wird ein einfacher Server sein, der eine einzelne Seite mit unserem Upload-Formular und auch einen Endpunkt enthält, der zum Hochladen der Datei verwendet wird.

Für das Routing verwenden wir die Routing-Bibliothek von Gorilla Mux, können aber auch jede andere Routing-Lösung Ihrer Wahl verwenden. Wir werden auch die UUID-Bibliothek von Google für Go verwenden, um beim Hochladen zufällige Namen für unsere Dateien zu generieren. Dies ist eine persönliche Präferenz, da Sie Dateinamen auf unterschiedliche Weise generieren können.

Installieren Sie diese beiden mit den folgenden Befehlen:

Gorilla Mux

go get -u github.com/gorilla/mux

Google UUID

go get github.com/google/uuid

Wenn diese beiden installiert sind, ist unser Projekt vollständig eingerichtet und wir können mit dem nächsten Schritt fortfahren.

Erstellen unserer Vorlagen

Wir werden zwei HTML-Vorlagen für dieses kleine Projekt erstellen.

Die erste Vorlage wird ein HTML-Fragment sein, das einfach einen Teil der Zeichenfolgennachrichten enthält, die wir vom Server an den Client senden können.

Dieses Fragment nimmt diesen Nachrichtenabschnitt und durchläuft ihn, um eine HTML-Liste zu erstellen, die an den Client zurückgegeben wird (erinnern Sie sich, wie HTMX mit Hypermedia-APIs funktioniert, ziemlich cool, oder?).

Also, lasst uns das zuerst erstellen.

Erstellen Sie zunächst im Stammverzeichnis des Go-Projekts einen Vorlagenordner, in dem wir alle unsere Vorlagen speichern.

Als nächstes erstellen Sie eine Datei „messages.html“ im Vorlagenordner und fügen Sie den folgenden Code hinzu:

{{define "messages"}}
<ul>
    {{range .}}
        <li>{{ . }}</li>
    {{end}}
</ul>
{{end}}

Dies definiert eine Nachrichtenvorlage und durchläuft den eingehenden Abschnitt von Zeichenfolgennachrichten, um eine HTML-Liste zu bilden.

Für unsere nächste Vorlage erstellen wir die Datei-Upload-Seite selbst.

Erstellen Sie im Vorlagenordner eine neue Datei upload.html und fügen Sie den folgenden Code ein:

{{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}}

Perfekt!

Lassen Sie uns nun den Code in dieser Datei durchgehen.

Zuerst haben wir die Vorlage mit dem Namen Upload definiert. Dies ist der Name, mit dem wir später in unseren Routenhandlern darauf verweisen.

Im Kopfbereich haben wir dann ein wenig Standard-HTML-Code, aber ich habe hier zwei wichtige Bibliotheken eingefügt (naja, nur eine ist wirklich wichtig, die andere ist nur für CSS-Vibes).

Die HTMX-Bibliothek wurde im