Transloadit

My first App

Transloadit is versatile and there are many ways to leverage our API. To pick one happy path for demo purposes, we’ll default to a web browser integration with Uppy’s Transloadit Plugin.

We will create a simple web page that uploads images and resizes them to 1500x500 pixels. This first Template has one processing Robot, so you can get a result before configuring storage or a larger workflow.

Our First Template

Please create a new Template in your workspace naming it my-first-template and and save the following Assembly Instructions inside of it:

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

Explaining the Assembly Instructions

Now, let's take a closer look at the JSON, which contains two Steps:

  1. :original invokes 🤖/upload/handle, which will receive any file Uppy throws at it, and then make it available for other Robots to consume. You could define a file size limit in this Robot among other things.
  2. crop_thumbed is happy to take those files via "use": ":original". It then invokes 🤖/image/resize with parameters such as resize_strategy. This is the only processing Robot in the Template.

In our Uppy integration replace YOUR_TEMPLATE_ID with the ID of your Template. Add the following to a test.html file and then open it in your 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>

You'll notice that along with YOUR_TEMPLATE_ID, we'll also need to replace YOUR_TRANSLOADIT_KEY, the value for which can be obtained by creating an Auth Key in your account.

And there you have it! ✨ If you were copy/pasting/replacing along, you now have a working prototype. The results are dumped in your browser's console log, but you can also see Assemblies added to your account in real time. If you didn't type along, you can still try it live in this image resize demo.

The temporary result URLs are referenced in the console log. To keep those files permanently and send the results to your back-end, continue to the Saving Result Files page.