Hochladen von Dateien auf Back4app

Eine effektive Dateiverwaltung ist entscheidend für die Entwicklung von Webanwendungen, bei denen Benutzer Dateien hochladen.

Back4app bietet einen einfachen und effizienten Mechanismus für die Speicherung, Verwaltung und den Abruf von Dateien, der auf Parse basiert.

In diesem Leitfaden erfahren Sie, wie Sie Ihre Dateien mit Back4app speichern können, indem Sie die Dateispeicherfunktionen in eine React-App integrieren.

Wie die Dateispeicherung bei Back4app funktioniert

Back4app verwaltet das Hochladen und Speichern von Dateien mit der Klasse Parse.File.

Die Klasse Parse.File ermöglicht das Speichern von Dateien, die zu groß sind, um sie in Parse.Object zu speichern, wie z. B. Bilder, Videos, Dokumente und andere Binärdaten.

Um eine Datei in den Cloud-Speicher von Back4app hochzuladen, müssen Sie eine Instanz von Parse.File mit den Dateidaten erstellen und die Instanz speichern. Eine neue Instanz von Parse.File benötigt einen Dateinamen, die Datei und den Inhalt/Dateityp (optional).

Es ist wichtig sicherzustellen, dass der Dateiname eine Dateierweiterung enthält, damit Parse die Datei entsprechend verarbeiten kann.

Ihre Namen müssen jedoch nicht eindeutig sein, da jeder Upload eine eindeutige Kennung erhält. Wenn Sie also mehrere Dateien mit dem Namen example.jpeg hochladen, führt dies nicht zu Namenskollisionen.

Wenn Sie eine Datei hochladen, erkennt Parse.File den Dateityp automatisch anhand der Dateierweiterung im Dateinamen. Sie können die automatische Erkennung jedoch außer Kraft setzen, indem Sie den Parameter "Content-Type" angeben.

Um auf Ihre hochgeladenen Dateien bei Back4app zugreifen zu können, müssen Sie sie nach dem Hochladen mit einem Datenobjekt verknüpfen.

Anschließend können Sie das zugehörige Datenobjekt abfragen, um die Dateien abzurufen. Dateien, die hochgeladen, aber nicht mit einem Datenobjekt verknüpft sind, werden zu “verwaisten Dateien”, auf die Sie nicht zugreifen können.

Nachdem Sie nun verstanden haben, wie die Dateispeicherung bei Back4app funktioniert, werden Sie eine Galerie-Anwendung mit React erstellen, um zu demonstrieren, wie Sie Dateien bei Back4app speichern und abrufen können.

Erstellen einer React-Anwendung

Um die Dateispeicherfunktionen von Back4app mit React zu implementieren, müssen Sie zunächst eine React-Anwendung erstellen, die mit Back4app integriert wird. Dazu verwenden Sie Vite, ein Front-End-Tool für die schnelle Erstellung von Webanwendungen.

Sie können eine React-Anwendung mit Vite erstellen, indem Sie den folgenden Befehl in Ihrem Terminal ausführen:

npm init vite

Nach dem Ausführen des obigen Befehls werden Sie von Vite aufgefordert, einen Namen für das Projekt anzugeben, bevor eine Liste mit Optionen zur Auswahl des Frameworks angezeigt wird, das Sie für die Erstellung Ihrer Webanwendung verwenden möchten.

Wie in der Abbildung oben zu sehen ist, lautet der Name des Projekts gallery-app. Nachdem Sie die Option React ausgewählt haben, wählen Sie die Programmiersprache für die Entwicklung der React-Anwendung.

Wählen Sie für dieses Projekt die Option JavaScript. Jetzt ist Ihr Projekt fertig.

Als nächstes müssen Sie einige erforderliche Abhängigkeiten in Ihrem Projekt installieren. Um die Abhängigkeiten zu installieren, wechseln Sie in Ihr Projektverzeichnis und führen Sie den folgenden Befehl aus:

# Switch to the project directory
cd gallery-app

# Install dependencies
npm install

Mit diesem Befehl werden alle erforderlichen Abhängigkeiten in Ihrem Projekt installiert, und Sie können nun mit der Erstellung Ihrer Anwendung in Ihrer IDE beginnen.

Aufbau der React-Anwendung

Öffnen Sie Ihr React-Projekt mit Ihrer IDE und erstellen Sie einen Komponenten-Ordner im src-Verzeichnis. Fügen Sie innerhalb des Komponentenordners eine FileUpload-Komponente hinzu.

Fügen Sie in der Komponente FileUpload die folgenden Codezeilen hinzu:

//FileUpload.jsx
import React from "react";

function FileUpload({updateData}) {
  const [file, setFile] = React.useState("");

  const handleFIleUpload = (event) => {
    setFile(event.target.files[0]);
  };

  return (
    <form>
      <label htmlFor="file-upload" className="custom-file-upload">
        Choose File
      </label>
      <input
        id="file-upload"
        type="file"
        style={{ display: "none" }}
        onChange={handleFileUpload}
      />
    </form>
  );
}

export default FileUpload;

Der obige Codeblock stellt eine FileUpload-Komponente dar, mit der Sie eine lokale Datei auswählen können. Sie enthält einen Dateistatus. Er verwendet ein Eingabeelement des Dateityps, um auf eine lokale Datei auf Ihrem Gerät zuzugreifen und diese auszuwählen.

Der Codeblock enthält eine Funktion handleFileSelect. Diese Funktion verwendet die Methode setFile, um den Dateistatus mit der ersten vom Benutzer ausgewählten Datei zu aktualisieren.

Ändern Sie nun den Code in Ihrer Anwendungskomponente, indem Sie die Codezeilen im unten stehenden Codeblock hinzufügen:

//App.jsx
import FileUpload from "./components/FileUpload";

function App() {
  return (
    <main className="container">
      <h1 className="title">My Gallery</h1>
      <>
        <FileUpload />
      </>
    </main>
  );
}

export default App;

Der obige Codeblock importiert die FileUpload-Komponente und stellt sie in einem Hauptelement dar. Die Komponente enthält auch ein h1-Element, das den Text “Meine Galerie” wiedergibt.

Sie haben Ihre Komponenten fertig. Als nächstes müssen Sie die Anwendung gestalten. Ersetzen Sie dazu den Code in Ihrer index.css-Datei und fügen Sie stattdessen diesen Code ein:

/*index.css*/
@import url('<https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap>');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  background-color: #F2F2F2;
  color: #333333;
  font-family: "Montserrat", sans-serif;
}

.container{
  inline-size: 60%;
  margin: auto;
}

.title{
  text-align: center;
  margin-block-start: 1rem;
  margin-block-end: 6rem;
}

.custom-file-upload {
  display: inline-block;
  font-weight: 500;
  padding: 6px 12px;
  cursor: pointer;
  background: #FFFFFF;
  border: none;
  border-radius: 4px;
}

.custom-file-upload:hover {
  background-color: #333333;
  color: #FFFFFF;
}

Einrichten einer Back4app-Anwendung

Um eine Back4app-Anwendung einzurichten, müssen Sie in Ihrem Back4app-Konto eingeloggt sein. Wenn Sie noch kein Konto haben, können Sie es kostenlos erstellen.

Sobald Sie eingeloggt sind, verwenden Sie den Back4app AI-Agent, um eine neue Anwendung zu erstellen. Der KI-Agent ist ein Back4app-Service, der Ihnen die Interaktion und Verwaltung Ihrer Back4app-Anwendungen über Eingabeaufforderungen ermöglicht.

Sie können darauf zugreifen, indem Sie auf den Link KI-Agent in der Navigationsleiste Ihres Konto-Dashboards klicken, wie in der Abbildung unten dargestellt.

Um eine Back4app-Anwendung mit dem KI-Agenten zu erstellen, schreiben Sie eine Nachricht, in der Sie die KI auffordern, die Anwendung zu erstellen, ähnlich der unten stehenden Aufforderung:

Create a new Back4app application named gallery-app

Die obige Aufforderung veranlasst die KI, eine neue Back4app-Anwendung zu erstellen. Sobald die KI die Anwendung erstellt hat, sendet sie eine Antwort mit der Bestätigung der Erstellung und den Anmeldeinformationen der Anwendung.

Etwa so:

Jetzt ist Ihre Back4app-Anwendung fertig. Kopieren Sie die Anmeldedaten für die App-ID und den JavaScript-Schlüssel, da Sie diese später noch benötigen werden.

Um auf die Anwendung zuzugreifen, besuchen Sie Ihr Anwendungs-Dashboard, indem Sie in der Navigationsleiste auf den Link “Meine Apps” klicken.

Nachdem Sie nun erfolgreich ein Back4app-Backend mit dem KI-Agenten erstellt haben, müssen Sie als nächstes Ihre React-App mit Ihrem Backend verbinden.

Verbinden Sie Ihre React-App mit Back4app

Um Ihre React-App mit Back4app zu verbinden, müssen Sie das Parse SDK installieren, indem Sie den folgenden Befehl ausführen:

npm install parse

Als Nächstes importieren Sie eine verkleinerte Version von parse in Ihre Anwendungskomponente und initialisieren sie mit den Anmeldeinformationen, die Sie zuvor im Artikel gespeichert haben, indem Sie den folgenden Codeblock zu Ihrer Anwendungskomponente hinzufügen:

//App.jsx

import Parse from 'parse/dist/parse.min.js';

Parse.initialize('YOUR_APP_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = "<https://parseapi.back4app.com/>";

Ersetzen Sie "YOUR_APPLICATION_ID" und "YOUR_CLIENT_KEY" durch die Zugangsdaten, die Sie von Ihrer Back4App erhalten haben. Achten Sie darauf, dass Sie die Anmeldedaten sicher speichern, z. B. mit env-Variablen.

Hochladen von Dateien zu Back4app

Um eine Datei im Cloud-Speicher von Back4app zu speichern, müssen Sie zunächst eine Instanz von Parse.File erstellen. Als nächstes müssen Sie die Parse.File-Instanz speichern, indem Sie die save-Methode dafür aufrufen.

Anschließend müssen Sie die gespeicherte Datei mit einem Datenobjekt verknüpfen, damit Sie die Datei abrufen können.

Dazu erstellen Sie eine neue Unterklasse von Parse.Object, fügen die Datei zu einer Eigenschaft Ihrer neuen Unterklasse hinzu und speichern sie in Back4app.

Um die obige Logik zu implementieren, ändern Sie die handleFileUpload-Funktion in der FileUpload-Komponente so, dass sie dem unten stehenden Codeblock entspricht:

//FileUpload.jsx
const handleFileUpload = async (event) => {
    event.preventDefault();
    try {
      let name = "image.jpg";
      const File = new Parse.File(name, event.target.files[0]);
      const photo = await File.save();

      const Gallery = Parse.Object.extend("Gallery");
      const gallery = new Gallery();
      gallery.set("photo", photo);
      await gallery.save();

      console.log("File saved:", File);
      updateData();
    } catch (error) {
      console.error("Error saving file:", error);
    }
  };

Die Funktion handleFileUpload enthält die Logik, die für das Hochladen eines Fotos von Ihrem lokalen Gerät auf den Server verantwortlich ist. Sie erstellt eine neue Parse.File-Instanz.

Die Methode Parse.File nimmt zwei Argumente entgegen: die Variable name, die den Namen des Fotos darstellt, und die erste Datei, die der Benutzer auswählt.

Die Funktion speichert die Datei auf dem Server, indem sie die Speichermethode der File-Instanz aufruft. Anschließend erstellt sie ein neues Parse-Objekt für eine Gallery-Klasse.

Mit der Methode set wird die Fotodatei als Wert für die Eigenschaft photo des Galerieobjekts festgelegt. Schließlich speichert die Funktion das Galerieobjekt mit der Funktion gallery.save() auf dem Server.

Abrufen von Dateien aus Back4app

Um eine Datei aus dem Cloud-Speicher von Back4app abzurufen, müssen Sie das Parse-Objekt abrufen, das die Datei enthält. Dies können Sie tun, indem Sie eine neue Abfrage erstellen, die auf die Klasse mit dem Parse-Objekt abzielt.

Um die obige Logik zu implementieren, erstellen Sie eine Feed-Komponente und fügen Sie ihr den unten stehenden Codeblock hinzu:

//Feed.jsx
import React from "react";
import Parse from "parse/dist/parse.min.js";

function Feed({data}) {
  const [gallery, setGallery] = React.useState([]);

  React.useEffect(() => {
    const fetchFiles = async () => {
      let query = new Parse.Query("Gallery");
      const results = await query.find();
      setGallery(results);
    };
    fetchFiles();
  }, [data]);

  return (
    <div className="photos">
      {gallery.map((item) => (
        <img src={item.get("photo").url()} key={item.id} />
      ))}
    </div>
  );
}

export default Feed;

Der obige Codeblock erstellt einen Galeriestatus und weist ihm ein leeres Array zu. Er verwendet den useEffect-Hook, um die Funktion fetchFiles auszuführen.

Der useEffect-Hook führt die Funktion nach dem ersten Rendering der Komponente und immer dann aus, wenn sich die Datenstütze ändert.

Die Funktion fetchFiles erstellt eine neue Abfrage, die mit der Methode Parse.Query auf die Klasse “Gallery” abzielt.

Der Aufruf der Find-Methode für die Abfrage gibt ein Array mit den Ergebnissen der Abfrage zurück. Schließlich weist die Funktion "fetchFiles" das Array mit den Ergebnissen mithilfe der Funktion "setGallery" dem Galeriestatus zu.

Mit der map-Methode schließlich wird für jedes Element im Galerie-Array ein img-Element gerendert. Der Code setzt den Wert des src-Attributs des img-Elements auf die URL der Foto-Eigenschaft des jeweiligen Elements.

Gestalten Sie das div-Element mit der Klasse photos, indem Sie den unten stehenden Codeblock in Ihre index.css-Datei einfügen:

/*index.css*/
.photos{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 2rem;
  margin-block-start: 4rem;
}

Um die Feed-Komponente in Ihrer Anwendung anzuzeigen, stellen Sie sicher, dass Sie die Feed-Komponente in Ihrer App-Komponente importieren und aufrufen. Nachdem Sie alle Änderungen vorgenommen haben, sollte Ihre App-Komponente wie folgt aussehen:

//App.jsx
import React from "react";
import Parse from "parse/dist/parse.min.js";
import FileUpload from "./components/FileUpload";
import Feed from "./components/Feed";

Parse.initialize(PARSE_APP_ID, PARSE_JAVASCRIPT_KEY);
Parse.serverURL = "<https://parseapi.back4app.com/>";

function App() {
  const [data, setData] = React.useState(1);

  const updateData = (prevState) => {
    setData(() => prevState + 1);
  };

  return (
    <main className="container">
      <h1 className="title">My Gallery</h1>

      <>
        <FileUpload updateData={updateData} />
        <Feed data={data} />
      </>
    </main>
  );
}

export default App;

Testen Ihrer Anwendung

Starten Sie Ihre Anwendung, indem Sie den unten stehenden Codeblock im Verzeichnis Ihrer Anwendung ausführen:

npm run dev

Wenn Sie den obigen Befehl ausführen, wird Ihre Anwendung auf http://localhost:5173/ gestartet .

Navigieren Sie zu http://localhost:5173/, und Sie sollten eine Seite ähnlich der folgenden Abbildung sehen:

Klicken Sie auf die Schaltfläche “Datei auswählen” und wählen Sie ein Bild von Ihrem lokalen Gerät aus.

Sie können überprüfen, ob das Bild erfolgreich hochgeladen wurde, indem Sie das Dashboard Ihrer Back4app-Anwendung aufrufen.

Nach erfolgreichem Upload fügt Back4app der Klassentabelle "Gallery" eine Zeile hinzu, wie in der folgenden Abbildung gezeigt.

Alternativ dazu können Sie das Bild auch auf Ihrem Bildschirm sehen, wie in der folgenden Abbildung dargestellt.

Bereitstellen Ihrer Anwendung auf Back4app Containern

In diesem Abschnitt werden Sie Ihre Anwendung auf Back4app Containern bereitstellen. Dazu müssen Sie Ihre Anwendung zunächst dockern und in ein GitHub-Repository pushen.

Sie können den Bereitstellungsprozess manuell über die Back4app-Benutzeroberfläche oder automatisch über den Back4app AI-Agenten durchführen. In diesem Tutorial werden Sie den Bereitstellungsprozess mit dem KI-Agenten durchführen.

Erstellen einer Dockerdatei

Erstellen Sie eine Dockerdatei im Stammverzeichnis Ihrer Anwendung und fügen Sie den Codeblock hinzu:

FROM node:18
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 5173
CMD ["npm", "run", "dev"]

Als Nächstes erstellen Sie eine .dockerignore-Datei im Stammverzeichnis Ihrer Anwendung und fügen den folgenden Codeblock hinzu:

node_modules

Durch Hinzufügen der Node-Module zur Datei .dockerignore wird sichergestellt, dass Docker den Ordner node_modules beim Erstellen des Abbilds aus dem Kontext ausschließt.

Beachten Sie, dass Sie die React-Anwendung mit Vite erstellt haben, daher müssen Sie Vite für die Unterstützung von Docker konfigurieren. Um Vite zu konfigurieren, ersetzen Sie den Code in der Datei vite.config.js durch den unten stehenden Codeblock:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// <https://vitejs.dev/config/>
export default defineConfig({
  plugins: [react()],
  server: {
    host: true,
    strictPort: true,
    port: 5173,
   },
})

Dieser Codeblock stellt sicher, dass Vite den Server nur startet, wenn der angegebene Port verfügbar ist, und gibt die Portnummer an, die der Entwicklungsserver auf Port 5173 abhören soll.

Als Nächstes erstellen Sie das Docker-Image der Anwendung, um sicherzustellen, dass alles funktioniert, indem Sie den folgenden Befehl in Ihrem Terminal ausführen:

docker build -t gallery-app .

Hier haben Sie Ihre Anwendung erfolgreich gedockt, und als Nächstes werden Sie sie bereitstellen.

Bereitstellen Ihrer Anwendung

Bevor Sie Ihre Anwendung bereitstellen, integrieren Sie Ihr GitHub-Konto mit der Back4app-Github-App und gewähren Sie ihr Zugriff auf das Repository, das Sie bereitstellen möchten.

Navigieren Sie zum AI-Agenten und geben Sie die nachstehende Eingabeaufforderung ein, um Ihre Anwendung bereitzustellen:

Deploy my repository <<repository-url>> on Back4app containers

Ersetzen Sie die repository-url durch die URL des GitHub-Repositorys Ihrer Anwendung. Die obige Aufforderung leitet den Bereitstellungsprozess ein.

Wie in der Abbildung oben zu sehen ist, hat der KI-Agent den Bereitstellungsprozess gestartet. In der Zwischenzeit lautet der Bereitstellungsstatus “Bereitstellen”.

Nach ein paar Minuten können Sie den KI-Agenten nach dem Bereitstellungsstatus der Anwendung fragen. Wenn die Anwendung erfolgreich bereitgestellt wurde, ändert sich der Bereitstellungsstatus in “bereit”.

Etwa so:

In der obigen Abbildung sehen Sie, dass sich der Bereitstellungsstatus von “Bereitstellen” zu “Bereit” geändert hat , was bedeutet, dass die Anwendung erfolgreich bereitgestellt wurde und nun aktiv ist.

Sie können die Anwendung über Ihren Browser unter der angegebenen URL aufrufen.

Schlussfolgerung

In diesem Artikel haben Sie gelernt, wie Sie mit Back4app Dateien hochladen und abrufen können, indem Sie eine einfache Galerieanwendung mit React erstellen.

Außerdem haben Sie gelernt, wie man eine React-App auf Back4app mit Hilfe des Back4app AI-Agenten bereitstellt.

Mit Back4app können Sie Ihre Dateien effizient und sicher speichern und verwalten. Der in diesem Tutorial verwendete Code ist in diesem GitHub-Repository verfügbar.