Uploads und Frontend-Integration # React-Datei-Uploads mit Uppy: fortsetzbare Uploads, Vorschauen, Validierung und Verarbeitung React-Dateiuploader mit Uppy bauen: Vorschau, Validierung, barrierefreier Fortschritt, Abbruch, fortsetzbarer Upload und Übergabe zur Transloadit-Verarbeitung. Veröffentlicht am 24. August 2026 ## Wichtigste Erkenntnisse * Erstellen Sie pro eingebundenem Dateiuploader eine Uppy-Instanz und zerstören Sie sie, wenn die zugehörige Komponente unmountet wird. * Verwenden Sie den Zustand und die Events von Uppy als externen Zustand, statt Fortschritt, Dateien und Fehler in einen konkurrierenden React-Zustand zu kopieren. * Behandeln Sie clientseitige Einschränkungen als unmittelbares Feedback und setzen Sie dieselbe Richtlinie in einem vertrauenswürdigen Template oder Empfänger erneut durch. Ein React-Datei-Upload ist ein kleines zustandsbehaftetes System und nicht nur ein Eingabefeld mit einer POST-Anfrage. Der Dateiuploader muss erneutes Rendern überstehen, beim Unmounten Ressourcen freigeben, Einschränkungen vor dem Transfer erläutern, sich von üblichen Netzwerkfehlern erholen und zwischen hochgeladenen Bytes und abgeschlossener Medienverarbeitung unterscheiden. Uppy stellt diese Upload-Zustandsmaschine bereit, während React den aktuellen Zustand darstellt. ## In diesem Leitfaden 1. [Vor der Entwicklung der Komponente definieren, was „abgeschlossen“ bedeutet](#react-file-uploads-with-uppy-section-1) 2. [Pro eingebundenem Dateiuploader eine konfigurierte Uppy-Instanz erstellen](#react-file-uploads-with-uppy-section-2) 3. [Fortschritt, Abbruch und Assembly-Zustand aus Uppy darstellen](#react-file-uploads-with-uppy-section-3) 4. [Vorschauen und Beschränkungen als Oberflächenfunktionen statt als Vertrauensgrenzen verwenden](#react-file-uploads-with-uppy-section-4) 5. [Fortsetzbare Uploads auf die zu überstehende Unterbrechung ausrichten](#react-file-uploads-with-uppy-section-5) 6. [Übertragene Dateien an einen asynchronen Medienworkflow übergeben](#react-file-uploads-with-uppy-section-6) 7. [Lebenszyklus und Fehlerverhalten statt nur den Erfolgsfall testen](#react-file-uploads-with-uppy-section-7) ## Worauf es besonders ankommt * Rufen Sie kurzlebige signierte Assembly-Optionen von einem authentifizierten Serverendpunkt ab. Legen Sie niemals ein Auth Secret im React-Code offen. * Verwenden Sie begrenzte Wiederholungsversuche für vorübergehende Fehler, gestalten Sie den Abbruch explizit und ergänzen Sie eine dauerhaft gespeicherte Wiederherstellung nur, wenn die Wiederherstellung nach dem Neuladen tatsächlich erforderlich ist. * Speichern Sie die Assembly ID und gleichen Sie die Verarbeitung unabhängig ab, wenn die Upload-Komponente verschwinden kann, bevor der Workflow abgeschlossen ist. ## Vor der Entwicklung der Komponente definieren, was „abgeschlossen“ bedeutet Ein Browser kann die Übertragung der Bytes abschließen, während die resultierenden Medien noch geprüft, transformiert und exportiert werden. Legen Sie fest, welchen Zustand die Oberfläche als abgeschlossen bezeichnet: Dateiauswahl, Transfer, Erstellung der Assembly, Verarbeitung, dauerhafte Speicherung oder Veröffentlichung in der Anwendung. Die folgenden drei Ebenen fassen Dateiauswahl und Transfer unter Transfererfolg zusammen, die Erstellung und Verarbeitung der Assembly unter Verarbeitungserfolg sowie dauerhafte Speicherung und Veröffentlichung unter Anwendungserfolg. Eine React-Komponente kann mehrere dieser Zustände anzeigen, sollte sie aber nicht in einem einzigen Erfolgsindikator zusammenfassen. In einem Transloadit-Workflow verwaltet Uppy die browserseitige Warteschlange und den Transferzustand. Das Transloadit-Plugin erstellt eine Assembly und ordnet jede lokale Datei diesem Workflow zu. Ihre Anwendung sollte die Assembly ID speichern, sobald sie verfügbar ist. Wenn die Verarbeitung die Lebensdauer der Seite überschreiten kann, gleichen Sie das endgültige Ergebnis anschließend außerhalb der Komponente ab. Ein vollständig gefüllter Fortschrittsbalken ist kein dauerhaft gespeicherter Asset-Datensatz. ### Transfererfolg Der Empfänger hat die Bytes der Datei akzeptiert. Der Upload-Fortschritt bildet diesen Zustand ab, wenn das Plugin nicht auf das Encoding wartet. ### Verarbeitungserfolg Die Assembly hat einen endgültigen Erfolgszustand erreicht und die erwarteten Ergebnis-Steps erzeugt. ### Anwendungserfolg Die Anwendung hat die Identifikatoren der Assembly und des Assets gespeichert, die Eigentümerschaft bestätigt und das Ergebnis gemäß ihren Produktregeln verfügbar gemacht. ## Pro eingebundenem Dateiuploader eine konfigurierte Uppy-Instanz erstellen Installieren Sie Core, Dashboard, das React-Schnittstellenpaket, das gepflegte Transloadit-Plugin und den Zod-Schemavalidator für die Autorisierungsantwort. Importieren Sie jedes Uppy-Stylesheet einmal von einem stabilen Einstiegspunkt, damit die Ladereihenfolge vorhersehbar bleibt. Das folgende Komponentenbeispiel importiert die Paket-Styles direkt. Verschieben Sie diese Importe zum Einstiegspunkt der Anwendung, wenn Ihr Framework oder Bundler dort die globalen Styles verwaltet. Erstellen Sie Uppy einmal für die gesamte Lebensdauer des eingebundenen Formulars. Ein verzögert ausgeführter `useState`-Initialisierer im nächsten Abschnitt gibt jedem eingebundenen Dateiuploader eine eigene Instanz, ohne sie bei erneutem Rendering neu zu erstellen. Erstellen Sie keinen gemeinsam genutzten Singleton auf Modulebene, außer wenn jede Oberfläche ausdrücklich dieselbe Warteschlange verwenden soll. Andernfalls würden unabhängige Formulare die Dateien der jeweils anderen Formulare sehen und entfernen. Die asynchrone Funktion `assemblyOptions` fordert unmittelbar vor dem Upload bei einem vertrauenswürdigen Endpunkt eine Autorisierung an. Der Endpunkt muss den aktuellen Nutzer authentifizieren und autorisieren, Schutzmaßnahmen gegen Missbrauch anwenden, ein eingeschränktes Template auswählen und eine kurzlebige signierte Nutzlast zurückgeben. Der Browser validiert die Struktur der Antwort, erhält jedoch niemals das Auth Secret. React-Schnittstelle und Transloadit-Integration installieren ``` yarn add @uppy/core @uppy/dashboard @uppy/react @uppy/transloadit zod ``` Eine eingeschränkte Uppy-Instanz außerhalb des Rendering-Pfads erstellen ``` import Uppy from '@uppy/core' import Transloadit from '@uppy/transloadit' import { z } from 'zod' const assemblyOptionsSchema = z.object({ params: z.string().min(1), signature: z.string().regex(/^(sha1|sha256|sha384):[0-9a-f]+$/), }) async function fetchAssemblyOptions(): Promise> { const response = await fetch('/api/transloadit-params', { method: 'POST', headers: { Accept: 'application/json' }, }) if (!response.ok) { throw new Error('Could not authorize this upload') } const responseBody: unknown = await response.json().catch(() => null) const parsedOptions = assemblyOptionsSchema.safeParse(responseBody) if (!parsedOptions.success) { throw new Error('Could not authorize this upload') } return parsedOptions.data } export function createImageUploader(): Uppy { return new Uppy({ autoProceed: false, restrictions: { allowedFileTypes: ['image/jpeg', 'image/png', 'image/webp'], maxFileSize: 50 * 1024 * 1024, maxNumberOfFiles: 5, }, }).use(Transloadit, { assemblyOptions: fetchAssemblyOptions, retryDelays: [0, 1_000, 3_000, 5_000], waitForEncoding: false, }) } ``` ## Fortschritt, Abbruch und Assembly-Zustand aus Uppy darstellen Uppy ist ein externer Zustandsspeicher. `useUppyState` abonniert ausgewählte Werte für React, ohne eine zweite Warteschlange im Komponentenzustand zu verwalten. `useUppyEvent` stellt dagegen Ereignisse bereit, die keine dauerhaften Speicherfelder sind. Die Komponente liest die Dateianzahl, den Gesamtfortschritt, den aktiven Upload-Status, den unverarbeiteten Fehlerzustand und das Ereignis zur Erstellung der Assembly. Sie ordnet den Fehler einer stabilen nutzerfreundlichen Meldung zu, statt den unverarbeiteten Wert anzuzeigen, und spiegelt einzelne Dateien nicht in einem separaten `useState`-Wert. Dashboard bietet Dateiauswahl, Drag-and-drop, Vorschauen für unterstützte lokale Dateien, einen Status pro Datei und Upload-Steuerelemente. Die separate Live-Region stellt der umgebenden Anwendung eine knappe Statusmeldung bereit, während die native deaktivierte Schaltfläche erkennen lässt, ob ein Abbruch möglich ist. Lokalisieren Sie auch die Dashboard-eigenen Bezeichnungen, wenn das Produkt mehrere Sprachen unterstützt. Für die umgebende Überschrift, den Status und die Fehlermeldungen gilt dasselbe. Zerstören Sie die Uppy-Instanz, wenn die zugehörige Komponente ausgehängt wird. Dadurch werden laufende Vorgänge abgebrochen, installierte Plugins entfernt und Listener freigegeben. Ein Routenwechsel sollte daher nicht die einzige Stelle sein, an der wichtige Fortschrittsdaten vorliegen. Speichern Sie die Assembly ID und gegebenenfalls den Aufgaben-Datensatz der Anwendung, bevor Sie sich auf Vorgänge verlassen, die andernorts fortgesetzt werden können. Uppy-Zustand in React darstellen und die Instanz bereinigen ``` import type { ReactNode } from 'react' import Dashboard from '@uppy/react/dashboard' import { useUppyEvent, useUppyState } from '@uppy/react' import { useEffect, useState } from 'react' import { createImageUploader } from './createImageUploader.ts' import '@uppy/core/css/style.min.css' import '@uppy/dashboard/css/style.min.css' export function ReactFileUploader(): ReactNode { const [uppy] = useState(createImageUploader) const error = useUppyState(uppy, (state) => state.error) const fileCount = useUppyState(uppy, (state) => Object.keys(state.files).length) const isUploading = useUppyState( uppy, (state) => Object.keys(state.currentUploads).length > 0, ) const progress = useUppyState(uppy, (state) => state.totalProgress) const [assemblyCreatedArgs, clearAssemblyCreated] = useUppyEvent( uppy, 'transloadit:assembly-created', ) useUppyEvent(uppy, 'cancel-all', clearAssemblyCreated) const [assembly] = assemblyCreatedArgs const assemblyId = assembly?.assembly_id useEffect(() => { return () => uppy.destroy() }, [uppy]) let status = 'Choose up to five JPEG, PNG, or WebP images.' if (fileCount > 0) status = 'Ready to upload.' if (isUploading) status = `Upload ${progress}% complete.` if (!isUploading && progress === 100) status = 'Files transferred. Processing may continue.' if (error != null) status = 'Upload failed. Check the selected files and try again.' return (

Upload images

{status}

{assemblyId != null ? (

Processing reference: {assemblyId}

) : null}
) } ``` ## Vorschauen und Beschränkungen als Oberflächenfunktionen statt als Vertrauensgrenzen verwenden Eine lokale Vorschau hilft Nutzern, eine falsche Auswahl zu erkennen, bevor Kosten für den Upload anfallen. Sie ist nicht das verarbeitete Ergebnis und beweist weder, dass die Datei sicher und decodierbar ist, noch dass sie korrekt ausgerichtet oder wahrheitsgemäß gekennzeichnet wurde. Begrenzen Sie die Vorschauverarbeitung, da das Decodieren vieler großer Bilder Browserspeicher beansprucht. Zeigen Sie bei Formaten, für die der Browser keine Vorschau erstellen kann, den Dateinamen, den deklarierten Typ und die Größe an, ohne ein Thumbnail zu erfinden. Uppy-Beschränkungen weisen offensichtliche Fehler frühzeitig zurück: zulässige Typen, Größe einzelner Dateien, Gesamtgröße und Dateianzahl. Wenden Sie dieselben Grenzwerte auch bei einem vertrauenswürdigen Empfänger oder im gespeicherten Template an, da ein Aufrufer React umgehen und Dateimetadaten ändern kann. Verwenden Sie gegebenenfalls erkannte Inhalte und einen Verarbeitungsversuch und speichern Sie anschließend nur akzeptierte Ergebnisse. Lassen Sie `allow_steps_override` deaktiviert, wenn der Browser den genehmigten Workflow nicht ersetzen darf. Wenn eine Vorschau oder Beschränkung eine Auswahl zurückweist, zeigen Sie eine gleichbleibende, nutzerfreundliche Meldung an. Unverarbeitete Antworten des Anbieters, Stacktraces, Zugangsdaten und Speicherdiagnosen dürfen nicht auf der Seite erscheinen. ### Schnelles Feedback Erläutern Sie vor der Auswahl die zulässigen Formate sowie die erlaubte Anzahl und Größe. Lassen Sie Uppy anschließend bekannte Verstöße direkt neben dem Steuerelement ablehnen. ### Verbindliche Richtlinie Erzwingen Sie Autorisierung, Byte-Limits, Regeln für erkannte Inhalte, Verarbeitungsgrenzen und Exportziele, sobald dem Browsercode nicht mehr vertraut werden kann. ### Sichere Fehlerbehandlung Fangen Sie Autorisierungs- und Upload-Fehler an der vertrauenswürdigen Grenze ab, ordnen Sie ihnen eine einheitliche Meldung für den Nutzer zu und leiten Sie unverarbeitete Diagnosedaten ausschließlich an serverseitige Protokolle weiter. ## Fortsetzbare Uploads auf die zu überstehende Unterbrechung ausrichten Das Transloadit-Plugin lädt lokale Dateien über tus hoch. Solange die Upload-Ressource gültig bleibt, kann tus eine fehlgeschlagene Übertragung ab einem vom Server bestätigten Offset fortsetzen. `retryDelays` behandelt während der aktuellen Lebensdauer von Uppy eine begrenzte Anzahl vorübergehender Fehler. Ein Abbruch ist etwas anderes: `cancelAll()` bricht laufende Vorgänge ausdrücklich ab, entfernt die Dateien und setzt den Upload-Status zurück. Die Benutzeroberfläche sollte daher darauf hinweisen, dass die Auswahl entfernt wird. Beim Neuladen einer Seite gehen die im Arbeitsspeicher gehaltenen Zustände von React und Uppy verloren. Die Wiederherstellung nach dem Neuladen erfordert einen persistierten Client-Zustand und kompatible Upload-Ressourcen auf dem Server, etwa einen bewusst konfigurierten Workflow mit dem Golden-Retriever-Plugin. Testen Sie dieses Verhalten mit der tatsächlichen Transloadit-Integration, bevor Sie es zusichern. Persistierte lokale Metadaten können veraltet oder vertraulich werden oder nicht mehr mit einer abgelaufenen Autorisierung übereinstimmen. Legen Sie daher eine Aufbewahrungsdauer und eine Möglichkeit fest, nicht wiederherstellbare Einträge zu verwerfen. Fortsetzbare Uploads haben auch eine zeitliche Grenze im Betrieb. Eine Assembly kann nicht unbegrenzt für Uploads verfügbar bleiben, und kurzlebige signierte Parameter können ablaufen, bevor ein verzögerter erneuter Versuch beginnt. Unterscheiden Sie zwischen automatischen erneuten Versuchen, Pausieren und Fortsetzen, Wiederherstellung nach dem Neuladen und dem Starten einer neuen Assembly. Diese Verfahren beheben unterschiedliche Fehler und verwenden möglicherweise unterschiedliche Identifikatoren erneut. ## Übertragene Dateien an einen asynchronen Medienworkflow übergeben Ein gespeichertes Template sollte den zulässigen Verarbeitungsgraphen beschreiben: `/upload/handle` empfängt die Browserdateien, `/file/filter` kann nicht unterstützte erkannte Eingaben ablehnen, Transformations-Robots erzeugen begrenzte Derivate und Robots für die Speicherung exportieren freigegebene Ergebnisse, wenn dauerhafte Speicherung Teil des Workflows ist. Die signierte Anfrage wählt dieses Template aus. React erstellt weder beliebige Steps noch überträgt es dauerhafte Zugangsdaten für den Speicher. Wählen Sie `waitForEncoding` entsprechend dem Schnittstellenvertrag. Mit dem Wert false kann der Browser den Vorgang nach der Übertragung abschließen. Das eignet sich, wenn die Anwendung die Assembly ID speichert, einen separaten Verarbeitungsstatus anzeigt und das endgültige Ergebnis entweder über eine verifizierte Assembly Notification erfährt oder später den Assembly Status abruft. Das Warten auf das Encoding kann die Benutzeroberfläche bei kurzen Verarbeitungszeiten synchron halten, ersetzt jedoch keinen dauerhaften Abgleich, falls der Tab geschlossen wird. Speichern Sie Kontext auf Anwendungsebene zusammen mit der Assembly ID: den authentifizierten Nutzer oder Mandanten, den vorgesehenen Asset-Slot, die Template ID, den Erstellungszeitpunkt und den Anwendungsvorgang, der die Assembly ausgelöst hat. Wenn eine Notification eintrifft, prüfen Sie deren Signatur, behandeln Sie eine doppelte Zustellung idempotent, bestätigen Sie die Zugehörigkeit der Assembly zum erwarteten Datensatz und speichern Sie nur die Ergebnisfelder, die das Produkt benötigt. ## Lebenszyklus und Fehlerverhalten statt nur den Erfolgsfall testen Testen Sie die Komponente mit einer zulässigen kleinen Datei, einer zu großen Datei, einer irreführenden Dateiendung, einem nicht unterstützten Typ, mehreren Dateien an der Anzahlgrenze, einer Null-Byte-Eingabe, einer langsamen Verbindung, einer Offlinephase, einer Ablehnung durch den Server, abgelaufener Autorisierung, einem Abbruch durch den Nutzer, dem Unmounten der Komponente und dem Neuladen der Seite. Prüfen Sie, welcher Zustand erhalten bleibt, welche Vorgänge abgebrochen werden und welche Meldung Nutzer erhalten, die eine Tastatur oder einen Screenreader verwenden. Testen Sie neben dem isolierten React-Verhalten auch den tatsächlichen Pfad für Signatur und Verarbeitung. Ein Mock kann belegen, dass die Schaltfläche deaktiviert wird oder sich ein Status ändert. Nur integrierte Testdaten belegen jedoch, dass die signierten Parameter übereinstimmen, tus den Upload am erwarteten Offset fortsetzt, das Template ungültige Inhalte ablehnt, die Assembly ID gespeichert wird und der Abschluss einmal abgeglichen wird. Verwenden Sie kleine Testdateien und entfernen Sie temporäre Produktionsdaten nach dem Durchlauf. ### React-Lebenszyklus Rendern Sie erneut, ohne die Uppy-Instanz zu ersetzen. Unmounten Sie die Komponente anschließend und prüfen Sie, ob Plugins sowie aktive Vorgänge im Browser bereinigt werden. ### Barrierefreie Interaktion Wählen Sie Dateien ohne Drag-and-drop aus, bedienen Sie jedes Steuerelement per Tastatur und prüfen Sie, ob Ablehnung, Fortschritt, Abbruch und Abschluss als Text angekündigt werden. ### Abgleich der Verarbeitung Schließen Sie die Seite nach dem Erstellen der Assembly, übermitteln Sie erneut eine Abschlussbenachrichtigung und belegen Sie, dass genau ein Asset der Anwendung den richtigen Endzustand erreicht. ## Wissenswerte technische Details * Uppy ist ein zustandsbehafteter externer Speicher. Wird Uppy im Render-Funktionskörper erstellt, entsteht bei jedem Rendering eine neue, anschließend verworfene Instanz. Dadurch gehen Dateien in der Warteschlange und der Upload-Status verloren. Wird stattdessen eine einzelne Instanz beibehalten, ihre Einrichtung jedoch erneut ausgeführt, können Plugins und Listener doppelt registriert werden. * Der Hook `useUppyState` abonniert den Uppy-Store über den External-Store-Vertrag von React und wählt nur den Zustand aus, den eine Komponente benötigt. * Das React Dashboard installiert sein Oberflächen-Plugin beim Mounten und entfernt es beim Unmounten. Die Anwendung bleibt dafür verantwortlich, die von ihr erstellte Uppy-Instanz zu zerstören. * Uppy-Beschränkungen lehnen unzulässige Dateiauswahlen im Browser ab. Aufrufer können den Browser-Code jedoch umgehen, und deklarierte MIME-Typen können falsch sein. Daher bleibt eine vertrauenswürdige Validierung erforderlich. * Das Transloadit-Plugin erstellt eine Assembly und lädt lokale Dateien zu deren tus-Endpunkt hoch. Sein asynchroner Callback `assemblyOptions` kann unmittelbar vor Beginn eines Uploads signierte Parameter abrufen. * Die Option `retryDelays` wiederholt Uploads nach vorübergehenden tus-Fehlern, solange die Uppy-Instanz und der Upload-Zustand verfügbar bleiben. Sie stellt eine Übertragung nach dem Neuladen oder Schließen des Tabs nicht selbstständig wieder her. * Der Aufruf von `cancelAll()` löst ein Abbruchereignis aus, bricht aktive Vorgänge über die installierten Dateiuploader ab, entfernt die aktuellen Dateien und setzt den Upload-Zustand von Uppy zurück. * Wenn `waitForEncoding` auf false gesetzt ist, kann der Uppy-Upload nach der Dateiübertragung abgeschlossen sein, während die Assembly weiterverarbeitet wird. Speichern Sie die Assembly ID dauerhaft und nutzen Sie verifizierte Benachrichtigungen oder rufen Sie den Assembly Status ab, um den Abschluss zuverlässig festzustellen. ## Ein praxisnaher Ansatz 1. 1\ Definieren Sie die akzeptierten Dateien, das Byteziel, das Verarbeitungs-Template und den abschließenden Anwendungszustand, bevor Sie die Komponente entwickeln. 2. 2\ Erstellen Sie eine einzige konfigurierte Uppy-Instanz, rendern Sie Dashboard und barrierefreien Status aus ihrem Store und bereinigen Sie die Instanz beim Unmount. 3. 3\ Stellen Sie auf dem Server eingeschränkte, signierte Assembly-Optionen aus und wiederholen Sie im Template die Dateilimits und Prüfungen der ermittelten Inhalte. 4. 4\ Testen Sie Ablehnung, Unterbrechung, Abbruch, erneuten Versuch, Unmount, erneutes Laden, abgelaufene Autorisierung und asynchronen Abschluss. Ein vierstufiger Medienworkflow ## Wann Transloadit hilfreich ist Verwenden Sie das gepflegte React Dashboard und das Transloadit-Plugin von Uppy, wenn eine React-Anwendung eine ausgereifte Upload-Oberfläche, fortsetzbare tus-Transfers sowie verwaltete serverseitige Validierungs- und Transformations-Steps in einem gespeicherten Template benötigt. Rufen Sie kurzlebige signierte Assembly-Optionen von einem vertrauenswürdigen Server ab und bewahren Sie jede Assembly ID auf, wenn die Verarbeitung die Lebensdauer der Seite überschreiten kann. ## Architekturgrenze React verwaltet den Lebenszyklus der Komponente und stellt den Upload-Zustand dar. Uppy verwaltet die Dateiauswahl im Browser, Vorschauen, Einschränkungen, den Transferzustand sowie Steuerelemente für Wiederholungen oder Abbrüche. Transloadit autorisiert den gespeicherten Medienworkflow und führt ihn aus. Die Anwendung bleibt für Nutzerberechtigungen, dauerhaft gespeicherte Asset-Datensätze, Veröffentlichungsrichtlinien und den Abgleich nach dem Unmounten der Komponente zuständig. ## Häufig gestellte Fragen ### Sollte Uppy innerhalb einer React-Komponente erstellt werden? Ja, wenn diese Komponente für die Warteschlange zuständig ist. Erstellen Sie die Instanz jedoch mit einem verzögerten State-Initialisierer, damit bei erneutem Rendern dieselbe Instanz verwendet wird. Zerstören Sie die Instanz beim Unmounten. Verwenden Sie einen gemeinsamen Anbieter nur, wenn mehrere Komponenten ausdrücklich mit demselben Dateiuploader arbeiten sollen. ### Benötigt das Transloadit-Plugin ein separates Uppy-Tus-Plugin? Nein, nicht für lokale Dateien, die an Transloadit gesendet werden. Das Transloadit-Plugin konfiguriert tus-Uploads zum Assembly-Endpunkt. Verwenden Sie das eigenständige Tus-Plugin, wenn das Ziel ein separater tus-Server statt einer Transloadit Assembly ist. ### Sind die Dateieinschränkungen von Uppy sicher? Nein. Sie verbessern das Feedback im Browser, doch Anfragen können React umgehen und Dateimetadaten können falsch sein. Prüfen Sie Autorisierung, Byte-Limits, die Validierung des tatsächlich erkannten Inhalts, Workflow-Einschränkungen und Speicherrichtlinien an vertrauenswürdigen Grenzen erneut. ### Ändert eine Uppy-Bildvorschau die Größe der hochgeladenen Datei? Nein. Eine Vorschau ist ein Zustand der Browseroberfläche. Bewahren Sie die ausgewählte Quelldatei auf und erstellen Sie im Verarbeitungsworkflow reproduzierbare Derivate, sofern das Produkt nicht ausdrücklich einen separaten clientseitigen Vorverarbeitungsschritt implementiert. ### Setzt retryDelays einen Upload nach dem Neuladen einer Seite fort? Nein. Wiederholungsverzögerungen decken vorübergehende Fehler ab, solange der aktuelle Zustand des Dateiuploaders verfügbar bleibt. Für die Wiederherstellung nach einem Neuladen sind dauerhaft gespeicherte Client-Metadaten und eine gültige serverseitige Upload-Ressource erforderlich. Diese Funktion sollte separat getestet werden. ### Wann sollte waitForEncoding aktiviert werden? Aktivieren Sie die Option, wenn die eingebundene Oberfläche eine kurze Verarbeitung abwarten und deren Ergebnisse direkt anzeigen muss. Lassen Sie sie deaktiviert, wenn der Transfer zeitnah abgeschlossen werden soll. Bewahren Sie anschließend die Assembly ID auf und gleichen Sie die Verarbeitung über verifizierte Benachrichtigungen oder Statusabfragen ab. ## Erstellen Sie den Workflow Entwickeln Sie das Konzept mithilfe der Robot-Dokumentation und funktionsfähiger Demos zu einer getesteten Assembly weiter. * [Im Browser erstellte Assembly-Anfragen signieren](/de/docs/api/authentication.md) * [Fortsetzbare Uploads verstehen](/de/docs/api/resumable-uploads.md) * [Uppy-React-Dokumentation lesen⁠](https://uppy.io/docs/react/) * [Uppy-Transloadit-Plugin konfigurieren⁠](https://uppy.io/docs/transloadit/) * [Wiederherstellung nach dem Neuladen mit Golden Retriever evaluieren⁠](https://uppy.io/docs/golden-retriever/) * [Verarbeitung mit Assembly Notifications abgleichen](/de/docs/topics/webhooks.md) * [Assembly-Status-Antwort interpretieren](/de/docs/api/assembly-status-response.md) * [Lesen Sie die API-Dokumentation](/de/docs.md) * [Entdecken Sie funktionsfähige Demos EN (English)](/demos.md) * [Kostenlosen Workspace erstellen](/c/signup/) Uploads und Frontend-Integration ## Mit verwandten Leitfäden fortfahren * [Leitfaden zur File Upload API: Architektur, Sicherheit und Anbieterauswahl](/de/guides/file-upload-api-guide.md)\ Eine File Upload API anhand von Architektur, Wiederaufnahme, direkter Cloud-Übertragung, Sicherheit, Speichergrenzen und Anbietern auswählen und implementieren. * [Sichere Datei-Uploads in Next.js mit Uppy und signierten Transloadit Templates](/de/guides/secure-file-uploads-nextjs-uppy.md)\ Sicherer Next.js-App-Router-Upload mit Uppy, Serversignierung, gesperrtem Template, verbindlicher Prüfung, fortsetzbarem Transfer und asynchronem Abschluss. * [Große Uploads trotz Verbindungsabbruch zuverlässig annehmen](/de/guides/resumable-uploads-for-large-files.md)\ Nehmen Sie Multi-Gigabyte-Uploads über tus an, setzen Sie sie nach Verbindungsabbrüchen fort und halten Sie die Assembly bis zum Abschluss aktiv. * [Die besten JavaScript-Bibliotheken für Datei-Uploads: Uppy vs. FilePond vs. Dropzone](/de/guides/best-javascript-file-upload-libraries.md)\ Vergleichen Sie Uppy, FilePond und Dropzone nach Protokoll, Schnittstellenmodell, Wiederherstellung, Integration und langfristiger Verantwortung.