Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
7 changed files
with
428 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
# Transloadit example | ||
|
||
This example shows how to make advantage of Uppy API to upload files to | ||
[Transloadit](https://transloadit.com/). | ||
|
||
## Run it | ||
|
||
To run this example, make sure you've correctly installed the **repository root**: | ||
|
||
```sh | ||
corepack yarn | ||
corepack yarn build | ||
``` | ||
|
||
That will also install the dependencies for this example. | ||
|
||
Then, again in the **repository root**, start this example by doing: | ||
|
||
```sh | ||
corepack yarn workflow @uppy-example/transloadit start | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,128 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<meta charset="utf-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1"> | ||
<title>Transloadit playground</title> | ||
</head> | ||
<body> | ||
<style> | ||
html { | ||
background: #f1f1f1; | ||
} | ||
main { | ||
padding: 20px; | ||
font: 12pt sans-serif; | ||
background: white; | ||
width: 800px; | ||
margin: auto; | ||
} | ||
hr { | ||
border: 0; | ||
background-color: #111e33; | ||
height: 1px; | ||
} | ||
.hidden { display: none; } | ||
.error { color: red; } | ||
#logo { height: 1em; vertical-align: middle; } | ||
</style> | ||
<main> | ||
<h1>Robodog <img src="https://transloadit.edgly.net/assets/images/logo-small.svg" alt="Transloadit" id="logo"> playground</h1> | ||
<p> | ||
This page contains small examples for every API offered by the Robodog library. Please see the <a href="https://github.com/transloadit/uppy/tree/main/examples/transloadit">Github repository</a> for the source code. | ||
|
||
<hr> | ||
<h2>robodog.form()</h2> | ||
|
||
<p> | ||
The form API allows you to easily send files through Transloadit's encoding backend. When the user submits the form, any files are uploaded to Transloadit. The form data is then sent to your own backend, with additional data about the Transloadit Assemblies that were started. | ||
|
||
<form id="test-form" method="post" action="http://localhost:9967/test"> | ||
<p><strong>leave a message</strong> | ||
<p> | ||
<label>name: | ||
<input type="text" name="name"> | ||
</label> | ||
<p> | ||
<label>message: <br> | ||
<textarea name="message"></textarea> | ||
</label> | ||
|
||
<p> | ||
<label> | ||
attachments: | ||
<input type="file" name="files" multiple> | ||
</label> | ||
<div class="progress"></div> | ||
|
||
<p> | ||
<button type="submit"> | ||
Upload | ||
</button> | ||
|
||
<span class="error"></span> | ||
</form> | ||
|
||
<hr> | ||
<h2>robodog.form() with dashboard</h2> | ||
|
||
<p> | ||
You can also use the Dashboard UI inside a plain old HTML form by specifying a <code>dashboard: '.target-css-selector'</code> option. | ||
|
||
<form id="dashboard-form" method="post" action="http://localhost:9967/test"> | ||
<p><strong>leave a message</strong> | ||
<p> | ||
<label>name: | ||
<input type="text" name="name"> | ||
</label> | ||
<p> | ||
<label>message: <br> | ||
<textarea name="message"></textarea> | ||
</label> | ||
|
||
<p> | ||
<label> | ||
attachments: | ||
<span class="dashboard"></span> | ||
</label> | ||
|
||
<p> | ||
<button type="submit"> | ||
Upload | ||
</button> | ||
|
||
<span class="error"></span> | ||
</form> | ||
|
||
<hr> | ||
<h2>robodog.dashboard()</h2> | ||
|
||
<p> | ||
The <code>robodog.dashboard</code> API allows you to embed a Dashboard at any location. Users can continuously upload files through this UI, so please make sure this fits your use case! | ||
|
||
<p id="dashboard"> | ||
|
||
<hr> | ||
<h2>robodog.pick()</h2> | ||
|
||
<p> | ||
This API is a one-shot upload UI using a modal overlay. Call the function and receive a Promise with upload results ✌️ | ||
|
||
<p> | ||
<button onclick="openModal()">Open</button> | ||
|
||
<hr> | ||
<h2>robodog.upload()</h2> | ||
<p> | ||
An <input type=file> backed by <code>robodog.upload</code>: | ||
|
||
<p> | ||
<input type="file" multiple onchange="doUpload(event)"> | ||
|
||
<p id="upload-result"> | ||
<p id="upload-error" class="error"> | ||
</main> | ||
|
||
<script src="./main.js" type="module"></script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,127 @@ | ||
import robodog from 'uppy' | ||
import 'uppy/dist/uppy.min.css' | ||
|
||
const TRANSLOADIT_KEY = '35c1aed03f5011e982b6afe82599b6a0' | ||
// A trivial template that resizes images, just for example purposes. | ||
// | ||
// "steps": { | ||
// ":original": { "robot": "/upload/handle" }, | ||
// "resize": { | ||
// "use": ":original", | ||
// "robot": "/image/resize", | ||
// "width": 100, | ||
// "height": 100, | ||
// "imagemagick_stack": "v1.0.0" | ||
// } | ||
// } | ||
const TEMPLATE_ID = 'bbc273f69e0c4694a5a9d1b587abc1bc' | ||
|
||
/** | ||
* robodog.form | ||
*/ | ||
|
||
const formUppy = robodog.form('#test-form', { | ||
debug: true, | ||
fields: ['message'], | ||
restrictions: { | ||
allowedFileTypes: ['.png'], | ||
}, | ||
waitForEncoding: true, | ||
params: { | ||
auth: { key: TRANSLOADIT_KEY }, | ||
template_id: TEMPLATE_ID, | ||
}, | ||
modal: true, | ||
progressBar: '#test-form .progress', | ||
}) | ||
|
||
formUppy.on('error', (err) => { | ||
document.querySelector('#test-form .error') | ||
.textContent = err.message | ||
}) | ||
|
||
formUppy.on('upload-error', (file, err) => { | ||
document.querySelector('#test-form .error') | ||
.textContent = err.message | ||
}) | ||
|
||
window.formUppy = formUppy | ||
|
||
const formUppyWithDashboard = robodog.form('#dashboard-form', { | ||
debug: true, | ||
fields: ['message'], | ||
restrictions: { | ||
allowedFileTypes: ['.png'], | ||
}, | ||
waitForEncoding: true, | ||
note: 'Only PNG files please!', | ||
params: { | ||
auth: { key: TRANSLOADIT_KEY }, | ||
template_id: TEMPLATE_ID, | ||
}, | ||
dashboard: '#dashboard-form .dashboard', | ||
}) | ||
|
||
window.formUppyWithDashboard = formUppyWithDashboard | ||
|
||
const dashboard = robodog.dashboard('#dashboard', { | ||
debug: true, | ||
waitForEncoding: true, | ||
note: 'Images will be resized with Transloadit', | ||
params: { | ||
auth: { key: TRANSLOADIT_KEY }, | ||
template_id: TEMPLATE_ID, | ||
}, | ||
}) | ||
|
||
window.dashboard = dashboard | ||
|
||
/** | ||
* robodog.modal | ||
*/ | ||
|
||
function openModal () { | ||
robodog.pick({ | ||
restrictions: { | ||
allowedFileTypes: ['.png'], | ||
}, | ||
waitForEncoding: true, | ||
params: { | ||
auth: { key: TRANSLOADIT_KEY }, | ||
template_id: TEMPLATE_ID, | ||
}, | ||
providers: [ | ||
'webcam', | ||
], | ||
// if providers need custom config | ||
// webcam: { | ||
// option: 'whatever' | ||
// } | ||
}).then(console.log, console.error) | ||
} | ||
|
||
window.openModal = openModal | ||
|
||
/** | ||
* robodog.upload | ||
*/ | ||
|
||
window.doUpload = (event) => { | ||
const resultEl = document.querySelector('#upload-result') | ||
const errorEl = document.querySelector('#upload-error') | ||
robodog.upload(event.target.files, { | ||
waitForEncoding: true, | ||
params: { | ||
auth: { key: TRANSLOADIT_KEY }, | ||
template_id: TEMPLATE_ID, | ||
}, | ||
}).then((result) => { | ||
resultEl.classList.remove('hidden') | ||
errorEl.classList.add('hidden') | ||
resultEl.textContent = JSON.stringify(result.results) | ||
}, (err) => { | ||
resultEl.classList.add('hidden') | ||
errorEl.classList.remove('hidden') | ||
errorEl.textContent = err.message | ||
}) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
{ | ||
"name": "@uppy-example/transloadit", | ||
"version": "0.0.0", | ||
"type": "module", | ||
"dependencies": { | ||
"budo": "^11.3.2", | ||
"he": "^1.2.0", | ||
"uppy": "workspace:*" | ||
}, | ||
"private": true, | ||
"scripts": { | ||
"start": "node server.cjs" | ||
} | ||
} |
Oops, something went wrong.