Meine erste App

Wir erstellen eine einfache Webseite, auf der Sie hochgeladene Dateien auf 1500x500 Pixel skalieren und in Ihrem S3-Bucket speichern.

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"
  },
  "exported": {
    "use": [
      "crop_thumbed",
      ":original"
    ],
    "robot": "/s3/store",
    "credentials": "demo_s3_credentials",
    "url_prefix": "https://demos.transloadit.com/"
  }
}

Erläuterung der Assembly Instructions

Sehen wir uns nun das JSON genauer an. Es enthält drei 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.
3. exported speichert mithilfe von 🤖/s3/store sowohl die ursprünglich hochgeladenen Dateien als auch die skalierten Varianten in Ihrem S3-Bucket. Die Zugangsdaten für S3 werden aus Sicherheitsgründen separat in Ihrem Konto erstellt und gespeichert. Sie verweisen über ihren Namen darauf und ersetzen dazu demo_s3_credentials. Mehr erfahren

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 EN (English) testen.

Ganz fertig sind wir jedoch noch nicht. Die Ergebnisse befinden sich in Ihrem S3-Bucket und werden im Konsolenprotokoll referenziert. Doch wie gelangen diese Ergebnisse zu Ihrem Backend, damit auch andere sie nutzen können? Das erfahren Sie auf der Seite Ergebnisdateien speichern.