Transloadit

Meine erste App

Transloadit ist vielseitig und unsere API lässt sich auf viele Arten nutzen. Für einen einfachen Demo-Ablauf verwenden wir standardmäßig eine Webbrowser-Integration mit dem Transloadit-Plug-in von Uppy.

Wir erstellen eine einfache Webseite, die Bilder hochlädt und auf 1500x500 Pixel skaliert. Dieses erste Template enthält nur einen verarbeitenden Robot. So erhalten Sie ein Ergebnis, bevor Sie Speicher oder einen größeren Workflow konfigurieren.

Unser erstes Template

Bitte erstellen Sie ein neues Template in Ihrem Workspace, nennen Sie es my-first-template und speichern Sie darin die folgenden Assembly Instructions:

{
  ":original": {
    "robot": "/upload/handle"
  },
  "crop_thumbed": {
    "use": ":original",
    "robot": "/image/resize",
    "result": true,
    "width": 1500,
    "height": 500,
    "resize_strategy": "fillcrop"
  }
}

Erläuterung der Assembly Instructions

Sehen wir uns nun das JSON genauer an. Es enthält zwei Steps:

  1. :original ruft 🤖/upload/handle auf. Dieser Robot empfängt jede von Uppy übergebene Datei und stellt sie anschließend anderen Robots zur Verfügung. Unter anderem können Sie in diesem Robot eine Dateigrößenbeschränkung festlegen.
  2. crop_thumbed übernimmt diese Dateien über "use": ":original". Anschließend ruft der Step 🤖/image/resize mit Parametern wie resize_strategy auf. Dies ist der einzige verarbeitende Robot im Template.

Ersetzen Sie in unserer Uppy-Integration YOUR_TEMPLATE_ID durch die ID Ihres Templates. Fügen Sie Folgendes zu einer Datei namens test.html hinzu und öffnen Sie diese anschließend in Ihrem Browser:

<!-- 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: {
          template_id: 'YOUR_TEMPLATE_ID',
          // To avoid tampering, use Signature Authentication:
          // https://transloadit.com/docs/api/authentication/
          auth: {
            key: 'YOUR_TRANSLOADIT_KEY',
          },
        },
      },
    })
    .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>

Neben YOUR_TEMPLATE_ID müssen Sie auch YOUR_TRANSLOADIT_KEY ersetzen. Den entsprechenden Wert erhalten Sie, indem Sie in Ihrem Konto einen Auth Key erstellen.

Das war’s! ✨ Wenn Sie die Schritte durch Kopieren, Einfügen und Ersetzen nachvollzogen haben, verfügen Sie jetzt über einen funktionsfähigen Prototyp. Die Ergebnisse werden im Konsolenprotokoll Ihres Browsers ausgegeben. Sie können aber auch in Echtzeit sehen, wie Ihrem Konto Assemblies hinzugefügt werden. Falls Sie die Schritte nicht selbst nachvollzogen haben, können Sie die Funktion trotzdem direkt in dieser Demo zur Bildskalierung  (English) testen.

Die temporären Ergebnis-URLs werden im Konsolenprotokoll referenziert. Um diese Dateien dauerhaft zu speichern und die Ergebnisse an Ihr Backend zu senden, fahren Sie mit der Seite Ergebnisdateien speichern fort.