Permalink
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="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, 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)
})
{% endcodeblock %}