Transloadit

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 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 für die Template- und serverseitige Signaturkonfiguration. Wechseln Sie danach zum Client-Abschnitt für Ihr Framework:

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.

<!-- TEST/DEMO ONLY: uses test credentials and unsigned Instructions in the browser. -->
<!-- For production, use https://uppy.io/docs/guides/uppy-transloadit/ -->
<!-- This pulls Uppy from our CDN -->
<!-- For smaller self-hosted bundles, install Uppy and plugins manually: -->
<!-- npm i @uppy/core @uppy/dashboard @uppy/image-editor @uppy/remote-sources @uppy/transloadit -->
<link href="https://releases.transloadit.com/uppy/v5.2.4/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/v5.2.4/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 to 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 })
    // Optional: only needed for remote sources. Local-device uploads do not need Companion.
    .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) // Object of encoding results keyed by Step name
      })
    })
    .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. Dort finden Sie die vollständige Plug-in-API. Beginnen Sie mit dem Framework-Leitfaden für eine vollständige Integration.