# Uppy-Dateiuploader [transloadit/uppy⁠](https://github.com/transloadit/uppy) [Uppy⁠](https://uppy.io) ist ein Open-Source-Dateiuploader von Transloadit für Webbrowser. Mit über 30.000 Stargazern auf GitHub ist er weltweit der #1-Dateiuploader. Dank integrierter [tus⁠](https://tus.io)-Unterstützung überstehen Uploads Netzwerkunterbrechungen, Browserabstürze und ein versehentliches Verlassen der Seite. Uppy ist die empfohlene Lösung, um Transloadit in Webbrowser zu integrieren. Das [Transloadit-Plug-in⁠](https://uppy.io/docs/transloadit/) für Uppy unterstützt Sie bei der Kommunikation mit der Transloadit API. Es lässt sich mit allen anderen Uppy-Plug-ins verwenden, beispielsweise mit der modalen Dateiauswahl, die Importe aus Drittanbieterdiensten wie Instagram unterstützt, mit HTML-Formularen und mehr. Transloadit hostet tusd für fortsetzbare Uploads und unsere Encoding-API. Wenn Sie Remote-Quellen hinzufügen, hosten wir auch Companion für Sie. ## Upload mit Uppy + Transloadit Betrachten Sie Uppy als Upload-Benutzeroberfläche im Browser und Transloadit als Verarbeitungspipeline: 1. **Uppy** erfasst Dateien (aus lokalen Quellen, von der Kamera oder aus Remote-Quellen) und lädt sie mit der Fortsetzungsfunktion von tus hoch. 2. **Transloadit** führt Ihre Assembly aus (codieren, optimieren, analysieren, speichern usw.). 3. **Die Auslieferung** erfolgt aus Ihrem Speicherort, optional über Ihr CDN oder das Transloadit CDN (TLCDN). Wenn Sie nur Uploads und Storage benötigen, können Sie Ihre Assembly minimal halten (nur `/upload/handle`und einen Export-Step). Wenn Sie Transformationen benötigen, fügen Sie die entsprechenden Robots hinzu und behalten dieselbe Upload-Benutzeroberfläche bei – Uppy bleibt unverändert. So können Sie eine einheitliche, konsistente Upload-Benutzeroberfläche anbieten und gleichzeitig die Verarbeitungs-Steps austauschen oder erweitern, während sich Ihr Produkt weiterentwickelt. ## Framework-Leitfäden Beginnen Sie mit dem [offiziellen Uppy-Leitfaden⁠](https://uppy.io/docs/guides/uppy-transloadit/)für die Template- und serverseitige Signaturkonfiguration. Wechseln Sie danach zum Client-Abschnitt für Ihr Framework: * [JavaScript⁠](https://uppy.io/docs/guides/uppy-transloadit/#javascript) * [React⁠](https://uppy.io/docs/guides/uppy-transloadit/#react) * [Next.js⁠](https://uppy.io/docs/guides/uppy-transloadit/#nextjs) * [Vue⁠](https://uppy.io/docs/guides/uppy-transloadit/#vue) * [Angular⁠](https://uppy.io/docs/guides/uppy-transloadit/#angular) Der Leitfaden belässt das Transloadit Auth Secret auf Ihrem Server, signiert kurzlebige Assembly-Optionen und gibt dem Browser nur die für `@uppy/transloadit` erforderlichen Werte. Ihr Server sollte das zulässige Template auswählen und den aktuellen Nutzer vor dem Signieren autorisieren. Er sollte keine beliebigen, vom Browser übermittelten Instructions signieren. ### Beispiel Zu Demonstrationszwecken zeigen wir einen erfolgreichen Ablauf mit der Gesichtserkennung von Transloadit, einer Dateiauswahl und unserem CDN-Bundle. Diese Demo platziert bewusst einen Auth Key und unsignierte Instructions im Browser. Verwenden Sie sie nur mit Testzugangsdaten. Nutzen Sie für die Produktion den serverseitig signierten Template-Ablauf aus dem obigen Framework-Leitfaden. ```html Select Files ``` Weitere Beispiele finden Sie unter[examples/⁠](https://github.com/transloadit/uppy/tree/main/examples). Alternativ können Sie sie[live testen⁠](https://uppy.io/examples/dashboard/). Uppy und Transloadit sind äußerst vielseitig. Falls Sie andere Anforderungen haben, unterstützen wir diese wahrscheinlich bereits. ### Dokumentation Lesen Sie [die vollständige Dokumentation zum Transloadit-Plug-in von Uppy⁠](https://uppy.io/docs/transloadit/). Dort finden Sie die vollständige Plug-in-API. Beginnen Sie mit dem[Framework-Leitfaden⁠](https://uppy.io/docs/guides/uppy-transloadit/) für eine vollständige Integration.