/
index.ejs
92 lines (77 loc) · 3.26 KB
/
index.ejs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
---
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>© 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>
Optionally, copy the secret key and paste it below. This will enable Signature Authentication. Make sure nobody's watching!
</li>
<li>
Happy encoding & 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>
<p>
<label for="transloadit-secret-key"
style="display: block; font-size: 13px; text-transform: uppercase; font-weight: bold;">
Transloadit secret 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-secret-key"
placeholder="Your Transloadit secret Key (optional)">
</p>
<link rel="stylesheet" href="app.css">
<% include app.html %>
<hr />
<p id="console-wrapper">Console output:
<br />
</p>
<script src="app.js"></script>
<script>
var apiKeyEl = document.getElementById('transloadit-api-key')
var secretKeyEl = document.getElementById('transloadit-secret-key')
var storedApiKey = localStorage.getItem('uppyTransloaditApiKey')
if (storedApiKey) {
apiKeyEl.value = storedApiKey
window.TRANSLOADIT_API_KEY = storedApiKey
initUppy({ secret: secretKeyEl.value })
}
function handleInputChange (ev) {
window.TRANSLOADIT_API_KEY = apiKeyEl.value
localStorage.setItem('uppyTransloaditApiKey', apiKeyEl.value)
initUppy({ secret: secretKeyEl.value })
}
apiKeyEl.addEventListener('input', handleInputChange)
secretKeyEl.addEventListener('input', handleInputChange)
</script>
<hr />
<p>On this page we're using the following JavaScript:</p>
{% include_code lang:js transloadit/app.es6 %}