Transloadit Example

Transloadit is the inventor of tus.io and Uppy. Besides a robust encoding platform, Transloadit offers hosted versions of tusd and Companion. This means you can enjoy video encoding, watermarking, face detection, resumable file uploads, fetching from Instagram, etc — all without running a single server yourself.

This example demonstrates how to unlock Transloadit’s features within Uppy.

In this particular example we take your images (from Instagram), resize them to 250px and add the copyright caption text: © 2018 Transloadit.com at the bottom right corner.

For this demo to work you'll need a (free) Transloadit account. To get one:

  1. Claim your account. It will activate instantly. You can also signup via GitHub to avoid password hassle.
  2. Copy the API Key that you can find on this page and paste it below.
  3. Happy encoding & fetching from Instagram :)

Results will appear here:


Console output (latest logs are at the top):


On this page we're using the following JavaScript:

const Uppy = require('@uppy/core')
const Dashboard = require('@uppy/transloadit')
const Webcam = require('@uppy/webcam')
const Transloadit = require('@uppy/transloadit')
const Instagram = require('@uppy/instagram')

const uppy = Uppy({
  debug: true,
  autoProceed: false,
  restrictions: {
    maxFileSize: 1024 * 1024 * 1024,
    maxNumberOfFiles: 2,
    minNumberOfFiles: 1,
    allowedFileTypes: ['image/*']
  }
})

uppy
  .use(Transloadit, {
    params: {
      auth: {
        key: YOUR_TRANSLOADIT_API_KEY
      },
      // It's more secure to use a template_id and enable
      // Signature Authentication
      steps: {
        resize: {
          robot: '/image/resize',
          width: 250,
          height: 250,
          resize_strategy: 'fit',
          text: [
            {
              text: '© 2018 Transloadit.com',
              size: 12,
              font: 'Ubuntu',
              color: '#eeeeee',
              valign: 'bottom',
              align: 'right',
              x_offset: 16,
              y_offset: -10
            }
          ]
        }
      }
    },
    waitForEncoding: true
  })
  .use(Instagram, { target: Dashboard, serverUrl: 'https://api2.transloadit.com/companion', serverPattern: /\.transloadit\.com$/ })
  .use(Dashboard, {
    inline: true,
    maxHeight: 400,
    target: '#uppy-dashboard-container',
    note: 'Images and video only, 1–2 files, up to 1 MB'
  })
  .use(Webcam, { target: Dashboard })
  .on('transloadit:result', (stepName, result) => {
    const file = uppy.getFile(result.localId)
    var resultContainer = document.createElement('div')
    resultContainer.innerHTML = `
      <div>
        <h3>Name: ${file.name}</h3>
        <img src="${result.ssl_url}" /> <br />
        <a href="${result.ssl_url}">View</a>
      </div>
    `
    document
      .getElementById('uppy-transloadit-result')
      .appendChild(resultContainer)
  })

Please see documentation for details.


Hey there stranger! Uppy is actively developed and the example section is our playground. Things might not work, but we're working hard to improve.

We're on a monthly release cycle and our latest version is v0.27.6-alpha.0, but the example pages reflect the latest work in our master branch. Here's what changed in master since v0.27.6-alpha.0 in terms of commits, while the CHANGELOG provides a higher level view of the things planned for our next release.

Files from the examples are uploaded to our test servers and deleted daily.