Flag of Ukraine   We stand with the brave people of Ukraine. Stop the war. Find out how you can help.

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: © 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. Optionally, copy the secret key and paste it below. This will enable Signature Authentication. Make sure nobody's watching!
  4. Happy encoding & fetching from Instagram :)

Results will appear here:

Console output:

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 = new Uppy({
  debug: true,
  autoProceed: false,
  restrictions: {
    maxFileSize: 1024 * 1024 * 1024,
    maxNumberOfFiles: 2,
    minNumberOfFiles: 1,
    allowedFileTypes: ['image/*']
  locale: {
    strings: {
      youCanOnlyUploadFileTypes: 'You can only upload images'

  .use(Transloadit, {
    params: {
      auth: {
      // 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: '© Transloadit.com',
              size: 12,
              font: 'Ubuntu',
              color: '#eeeeee',
              valign: 'bottom',
              align: 'right',
              x_offset: 16,
              y_offset: -10
    waitForEncoding: true
  .use(Instagram, { target: Dashboard, companionUrl: 'https://api2.transloadit.com/companion', companionAllowedHosts: /\.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 = `
        <h3>Name: ${file.name}</h3>
        <img src="${result.ssl_url}" /> <br />
        <a href="${result.ssl_url}">View</a>

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 v2.12.1, but the example pages reflect the latest work in our main branch. Here's what changed in main since v2.12.1 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 every 24-72 hours.