uppy/website/src/examples/transloadit/index.ejs

---
title: Transloadit
layout: example
type: examples
order: 1
category: 'File Processing'
---

{% blockquote %}
Transloadit is the inventor of <a href="https://tus.io" rel="noreferrer noopener" target="_blank">tus.io</a> 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.
{% endblockquote %}

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

<p>
  For this demo to work you'll need a (free) Transloadit account. To get one:
</p>
<ol>
  <li>
    <a href="https://transloadit.com/signup/" rel="noreferrer noopener" target="_blank">Claim your account</a>. It will activate instantly. You can also signup via GitHub to avoid password hassle.
  </li>
  <li>
     Copy the API Key that you can find on
    <a href="https://transloadit.com/accounts/credentials" rel="noreferrer noopener" target="_blank">this page</a> and paste it below.
  </li>
  <li>
    Happy encoding &amp; fetching from Instagram :)
  </li>
</ol>

<p>
  <label for="transloadit-api-key"
         style="display: block; font-size: 13px; text-transform: uppercase; font-weight: bold;">
    Transloadit API Key:</label>
  <input type="text"
         style="font-size: 15px; width: 300px; max-width: 100%; border: 0; border-bottom: 1px solid black; padding: 6px 8px; margin-bottom: 20px;"
         id="transloadit-api-key"
         placeholder="Your Transloadit API Key">
</p>

<link rel="stylesheet" href="app.css">
<% include app.html %>

<hr />

<p id="console-wrapper">Console output (latest logs are at the top):
  <br />
</p>

<script src="app.js"></script>
<script>
  var apiKeyEl = document.getElementById('transloadit-api-key')
  var storedApiKey = localStorage.getItem('uppyTransloaditApiKey')

  if (storedApiKey) {
    apiKeyEl.value = storedApiKey
    window.TRANSLOADIT_API_KEY = storedApiKey
    initUppy()
  }

  function handleInputChange (ev) {
    var enteredApiKey = ev.target.value
    window.TRANSLOADIT_API_KEY = enteredApiKey
    localStorage.setItem('uppyTransloaditApiKey', enteredApiKey)
    initUppy()
  }

  apiKeyEl.addEventListener('change', handleInputChange)
  apiKeyEl.addEventListener('keyup',  handleInputChange)
  apiKeyEl.addEventListener('paste',  handleInputChange)
</script>

<hr />

<p>On this page we're using the following JavaScript:</p>
{% codeblock lang:js %}
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, 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 = `
      <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)
  })
{% endcodeblock %}