# Uppy-Datei-Uploader

[transloadit/uppy](https://github.com/transloadit/uppy)

[Uppy](https://uppy.io) ist ein Open-Source-Datei-Uploader von Transloadit für Webbrowser. Mit über 30.000 Stargazern auf GitHub ist er weltweit der #1-Datei-Uploader. 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 die erforderlichen Serverkomponenten (Companion und Tusd) sowie selbstverständlich unsere Encoding-API 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.

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.

## Vollständige Content-Pipeline

Ein typischer End-to-End-Ablauf sieht so aus:

* **Upload** mit Uppy (Dashboard, Webcam oder Remote-Anbieter über Companion).
* **Verarbeitung** mit Transloadit (z. B. `/image/resize`, `/video/encode`, `/document/ocr`).
* **Auslieferung** aus Ihrem eigenen Speicherort. Optional über Ihr eigenes CDN oder das TLCDN von Transloadit.

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.

### Beispiel

Zu Demonstrationszwecken zeigen wir nur einen erfolgreichen Ablauf mit der Gesichtserkennung von Transloadit in Kombination mit einer Dateiauswahl. Für einfaches Kopieren und Einfügen verwenden wir unser CDN-Bundle. Ersetzen Sie `YOUR_TRANSLOADIT_KEY` unbedingt durch Ihren Transloadit-API-Schlüssel.

![](/_next/static/media/copy.04p1cju9qekk_.svg?dpl=dpl_3z41v8VuCJJKgtsQfSKB6o2uiSXL)

```html
<!-- This pulls Uppy from our CDN -->
<!-- For smaller self-hosted bundles, install Uppy and plugins manually: -->
<!-- npm i @uppy/core @uppy/dashboard @uppy/remote-sources @uppy/transloadit ... -->
<link href="https://releases.transloadit.com/uppy/v4.3.1/uppy.min.css" rel="stylesheet" />
<button id="browse">Select Files</button>
<script type="module">
  import {
    Uppy,
    Dashboard,
    ImageEditor,
    RemoteSources,
    Transloadit,
  } from 'https://releases.transloadit.com/uppy/v4.3.1/uppy.min.mjs'
  const uppy = new Uppy()
    .use(Transloadit, {
      waitForEncoding: true,
      alwaysRunAssembly: true,
      assemblyOptions: {
        params: {
          // To avoid tampering, use Signature Authentication:
          // https://transloadit.com/docs/api/authentication/
          auth: {
            key: 'YOUR_TRANSLOADIT_KEY',
          },
          // It's often better store encoding instructions in your account
          // and use a template_id instead of adding these steps inline
          steps: {
            ':original': {
              robot: '/upload/handle',
            },
            faces_detected: {
              use: ':original',
              robot: '/image/facedetect',
              crop: true,
              faces: 'max-confidence',
              format: 'preserve',
              crop_padding: '10%',
            },
            exported: {
              use: ['faces_detected', ':original'],
              robot: '/s3/store',
              credentials: 'demo_s3_credentials',
              url_prefix: 'https://demos.transloadit.com/',
            },
          },
        },
      },
    })
    .use(Dashboard, { trigger: '#browse' })
    .use(ImageEditor, { target: Dashboard })
    .use(RemoteSources, {
      companionUrl: 'https://api2.transloadit.com/companion',
    })
    .on('complete', ({ transloadit }) => {
      // Due to waitForEncoding:true this is fired after encoding is done.
      // Alternatively, set waitForEncoding to false and provide a notify_url
      console.log(transloadit) // Array of Assembly Statuses
      transloadit.forEach((assembly) => {
        console.log(assembly.results) // Array of all encoding results
      })
    })
    .on('error', (error) => {
      console.error(error)
    })
</script>

```

Weitere Beispiele finden Sie unter[examples/](https://github.com/transloadit/uppy/tree/master/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/). Dies ist die empfohlene Lösung, um Transloadit und Uppy zu integrieren.