Uppy-Dateiuploader

transloadit/uppy

Uppy 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-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 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:

Uppy erfasst Dateien (aus lokalen Quellen, von der Kamera oder aus Remote-Quellen) und lädt sie mit der Fortsetzungsfunktion von tus hoch.
Transloadit führt Ihre Assembly aus (codieren, optimieren, analysieren, speichern usw.).
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.

<!-- 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/. Alternativ können Sie sie live testen. 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. Dies ist die empfohlene Lösung, um Transloadit und Uppy zu integrieren.