Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
151 lines (134 sloc) 4.52 KB
title: Transloadit
layout: example
type: examples
order: 5
{% blockquote %}
Transloadit is the inventor of <a href="" rel="noreferrer noopener" target="_blank"></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 %}
In this particular example we take your images (from Instagram), resize them to 250px and add the copyright caption text: <code>© 2018</code> at the bottom right corner.
For this demo to work you'll need a (free) Transloadit account. To get one:
<a href="" rel="noreferrer noopener" target="_blank">Claim your account</a>. It will activate instantly. You can also signup via GitHub to avoid password hassle.
Copy the API Key that you can find on
<a href="" rel="noreferrer noopener" target="_blank">this page</a> and paste it below.
Happy encoding &amp; fetching from Instagram :)
<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;"
placeholder="Your Transloadit API Key">
<link rel="stylesheet" href="app.css">
<% include app.html %>
<hr />
<p id="console-wrapper">Console output (latest logs are at the top):
<br />
<script src="app.js"></script>
var apiKeyEl = document.getElementById('transloadit-api-key')
var storedApiKey = localStorage.getItem('uppyTransloaditApiKey')
if (storedApiKey) {
apiKeyEl.value = storedApiKey
window.TRANSLOADIT_API_KEY = storedApiKey
function handleInputChange (ev) {
var enteredApiKey =
window.TRANSLOADIT_API_KEY = enteredApiKey
localStorage.setItem('uppyTransloaditApiKey', enteredApiKey)
apiKeyEl.addEventListener('change', handleInputChange)
apiKeyEl.addEventListener('keyup', handleInputChange)
apiKeyEl.addEventListener('paste', handleInputChange)
<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/*']
.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: '© 2018',
size: 12,
font: 'Ubuntu',
color: '#eeeeee',
valign: 'bottom',
align: 'right',
x_offset: 16,
y_offset: -10
waitForEncoding: true
.use(Instagram, { target: Dashboard, serverUrl: '', 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 = `
<h3>Name: ${}</h3>
<img src="${result.ssl_url}" /> <br />
<a href="${result.ssl_url}">View</a>
{% endcodeblock %}