mirror of
https://github.com/transloadit/uppy.git
synced 2026-07-17 16:50:22 +00:00
update transloadit example
This commit is contained in:
Prakash
parent
e99a17f1fe
commit
354434e840
3 changed files with 19 additions and 313 deletions
|
|
@ -34,97 +34,6 @@
|
|||
}
|
||||
</style>
|
||||
<main>
|
||||
<h1>
|
||||
Uppy Transloadit
|
||||
<img
|
||||
src="https://my-app.tlcdn.com/resize-img/canoe.jpg?w=300&h=300"
|
||||
alt="Transloadit"
|
||||
id="logo"
|
||||
/>
|
||||
playground
|
||||
</h1>
|
||||
<p>
|
||||
This page contains small examples for different ways you can use Uppy
|
||||
with Transloadit. Please see the
|
||||
<a
|
||||
href="https://github.com/transloadit/uppy/tree/main/examples/transloadit"
|
||||
>Github repository</a
|
||||
>
|
||||
for the source code.
|
||||
</p>
|
||||
<hr />
|
||||
<h2>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.
|
||||
</p>
|
||||
<form id="test-form" method="post" action="http://localhost:9967/test">
|
||||
<p><strong>leave a message</strong></p>
|
||||
<p>
|
||||
<label
|
||||
>name:
|
||||
<input type="text" name="name" />
|
||||
</label>
|
||||
</p>
|
||||
<p>
|
||||
<label
|
||||
>message: <br />
|
||||
<textarea name="message"></textarea>
|
||||
</label>
|
||||
</p>
|
||||
<p>
|
||||
<label>
|
||||
attachments:
|
||||
<!-- <input type="file" name="files" multiple> -->
|
||||
<strong id="uppy-form-selected-files"></strong>
|
||||
<button type="button" id="uppy-select-files">Select Files</button>
|
||||
</label>
|
||||
<span class="progress"></span>
|
||||
</p>
|
||||
<p>
|
||||
<button type="submit">Upload</button>
|
||||
</p>
|
||||
<span class="error"></span>
|
||||
</form>
|
||||
|
||||
<hr />
|
||||
<h2>Form with inline Dashboard</h2>
|
||||
|
||||
<p>You can also use the Dashboard UI inside a plain old HTML form.</p>
|
||||
<form
|
||||
id="dashboard-form"
|
||||
method="post"
|
||||
action="http://localhost:9967/test"
|
||||
>
|
||||
<p><strong>leave a message</strong></p>
|
||||
<p>
|
||||
<label
|
||||
>name:
|
||||
<input type="text" name="name" />
|
||||
</label>
|
||||
</p>
|
||||
<p>
|
||||
<label
|
||||
>message: <br />
|
||||
<textarea name="message"></textarea>
|
||||
</label>
|
||||
</p>
|
||||
<p>
|
||||
<label>
|
||||
attachments:
|
||||
<span class="dashboard"></span>
|
||||
</label>
|
||||
</p>
|
||||
<p>
|
||||
<button type="submit">Upload</button>
|
||||
</p>
|
||||
<span class="error"></span>
|
||||
</form>
|
||||
|
||||
<hr />
|
||||
<h2>Inline Dashboard</h2>
|
||||
<p>
|
||||
The <code>robodog.dashboard</code> API allows you to embed a Dashboard
|
||||
|
|
@ -133,35 +42,7 @@
|
|||
</p>
|
||||
<div id="dashboard"></div>
|
||||
|
||||
<hr />
|
||||
<h2>Dashboard Modal</h2>
|
||||
|
||||
<p>
|
||||
This API is a one-shot upload UI using a modal overlay. Call the
|
||||
function and receive a listen to an event with upload results ✌️
|
||||
</p>
|
||||
<button onclick="openModal()">Open</button>
|
||||
|
||||
<h2>uppy.upload()</h2>
|
||||
<p>An <input type=file> backed by <code>uppy.upload()</code>:</p>
|
||||
<p>
|
||||
<input type="file" multiple onchange="doUpload(event)" />
|
||||
</p>
|
||||
<div id="upload-progress"></div>
|
||||
<div id="upload-result-image"></div>
|
||||
<code>
|
||||
<pre
|
||||
id="upload-result"
|
||||
style="
|
||||
font-size: 12px;
|
||||
max-width: 100%;
|
||||
max-height: 300px;
|
||||
white-space: pre-wrap;
|
||||
overflow: auto;
|
||||
"
|
||||
></pre>
|
||||
<pre id="upload-error" class="error"></pre>
|
||||
</code>
|
||||
</main>
|
||||
|
||||
<script src="./main.js" type="module"></script>
|
||||
|
|
|
|||
|
|
@ -1,117 +1,23 @@
|
|||
import Uppy from '@uppy/core'
|
||||
import Dashboard from '@uppy/dashboard'
|
||||
import Form from '@uppy/form'
|
||||
import ImageEditor from '@uppy/image-editor'
|
||||
import RemoteSources from '@uppy/remote-sources'
|
||||
import Transloadit, { COMPANION_URL } from '@uppy/transloadit'
|
||||
import Webcam from '@uppy/webcam'
|
||||
import Uppy from "@uppy/core";
|
||||
import Dashboard from "@uppy/dashboard";
|
||||
import Form from "@uppy/form";
|
||||
import ImageEditor from "@uppy/image-editor";
|
||||
import RemoteSources from "@uppy/remote-sources";
|
||||
import Transloadit, { COMPANION_URL } from "@uppy/transloadit";
|
||||
import Webcam from "@uppy/webcam";
|
||||
import GoldenRetriever from "@uppy/golden-retriever";
|
||||
import "@uppy/core/css/style.css";
|
||||
import "@uppy/dashboard/css/style.css";
|
||||
import "@uppy/image-editor/css/style.css";
|
||||
|
||||
import '@uppy/core/css/style.css'
|
||||
import '@uppy/dashboard/css/style.css'
|
||||
import '@uppy/image-editor/css/style.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'
|
||||
const TRANSLOADIT_KEY = "RsiWVN5IVqWNbSjPnk79p40TEHnyigoi";
|
||||
// Trivial image-resize template (matches the prior projection-test fixture).
|
||||
const TEMPLATE_ID = "e88b6f4e4b434832a6f8b747fc60725d";
|
||||
|
||||
/**
|
||||
* Form
|
||||
*/
|
||||
|
||||
const formUppy = new Uppy({
|
||||
debug: true,
|
||||
autoProceed: true,
|
||||
restrictions: {
|
||||
allowedFileTypes: ['.png'],
|
||||
},
|
||||
})
|
||||
.use(Dashboard, {
|
||||
trigger: '#uppy-select-files',
|
||||
closeAfterFinish: true,
|
||||
note: 'Only PNG files please!',
|
||||
})
|
||||
.use(RemoteSources, { companionUrl: COMPANION_URL })
|
||||
.use(Form, {
|
||||
target: '#test-form',
|
||||
fields: ['message'],
|
||||
// submitOnSuccess: true,
|
||||
addResultToForm: true,
|
||||
})
|
||||
.use(Transloadit, {
|
||||
waitForEncoding: true,
|
||||
assemblyOptions: {
|
||||
params: {
|
||||
auth: { key: TRANSLOADIT_KEY },
|
||||
template_id: TEMPLATE_ID,
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
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
|
||||
})
|
||||
|
||||
formUppy.on('complete', ({ transloadit }) => {
|
||||
const btn = document.getElementById('uppy-select-files')
|
||||
btn.hidden = true
|
||||
const selectedFiles = document.getElementById('uppy-form-selected-files')
|
||||
selectedFiles.textContent = `selected files: ${Object.keys(transloadit[0].results).length}`
|
||||
})
|
||||
|
||||
window.formUppy = formUppy
|
||||
|
||||
/**
|
||||
* Form with Dashboard
|
||||
*/
|
||||
|
||||
const formUppyWithDashboard = new Uppy({
|
||||
debug: true,
|
||||
autoProceed: false,
|
||||
restrictions: {
|
||||
allowedFileTypes: ['.png'],
|
||||
},
|
||||
})
|
||||
.use(Dashboard, {
|
||||
inline: true,
|
||||
target: '#dashboard-form .dashboard',
|
||||
note: 'Only PNG files please!',
|
||||
hideUploadButton: true,
|
||||
})
|
||||
.use(RemoteSources, { companionUrl: COMPANION_URL })
|
||||
.use(Form, {
|
||||
target: '#dashboard-form',
|
||||
fields: ['message'],
|
||||
triggerUploadOnSubmit: true,
|
||||
submitOnSuccess: true,
|
||||
addResultToForm: true,
|
||||
})
|
||||
.use(Transloadit, {
|
||||
waitForEncoding: true,
|
||||
assemblyOptions: {
|
||||
params: {
|
||||
auth: { key: TRANSLOADIT_KEY },
|
||||
template_id: TEMPLATE_ID,
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
window.formUppyWithDashboard = formUppyWithDashboard
|
||||
|
||||
/**
|
||||
* Dashboard
|
||||
*/
|
||||
|
|
@ -119,14 +25,11 @@ window.formUppyWithDashboard = formUppyWithDashboard
|
|||
const dashboard = new Uppy({
|
||||
debug: true,
|
||||
autoProceed: false,
|
||||
restrictions: {
|
||||
allowedFileTypes: ['.png'],
|
||||
},
|
||||
})
|
||||
.use(Dashboard, {
|
||||
inline: true,
|
||||
target: '#dashboard',
|
||||
note: 'Only PNG files please!',
|
||||
target: "#dashboard",
|
||||
note: "Only PNG files please!",
|
||||
})
|
||||
.use(RemoteSources, { companionUrl: COMPANION_URL })
|
||||
.use(Webcam, { target: Dashboard })
|
||||
|
|
@ -140,85 +43,6 @@ const dashboard = new Uppy({
|
|||
},
|
||||
},
|
||||
})
|
||||
.use(GoldenRetriever);
|
||||
|
||||
window.dashboard = dashboard
|
||||
|
||||
// /**
|
||||
// * Dashboard Modal
|
||||
// */
|
||||
|
||||
const dashboardModal = new Uppy({
|
||||
debug: true,
|
||||
autoProceed: false,
|
||||
})
|
||||
.use(Dashboard, { closeAfterFinish: true })
|
||||
.use(RemoteSources, { companionUrl: COMPANION_URL })
|
||||
.use(Webcam, { target: Dashboard })
|
||||
.use(ImageEditor, { target: Dashboard })
|
||||
.use(Transloadit, {
|
||||
waitForEncoding: true,
|
||||
assemblyOptions: {
|
||||
params: {
|
||||
auth: { key: TRANSLOADIT_KEY },
|
||||
template_id: TEMPLATE_ID,
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
dashboardModal.on('complete', ({ transloadit, successful, failed }) => {
|
||||
if (failed?.length !== 0) {
|
||||
console.error('it failed', failed)
|
||||
} else {
|
||||
console.log('success', { transloadit, successful })
|
||||
}
|
||||
})
|
||||
|
||||
function openModal() {
|
||||
dashboardModal.getPlugin('Dashboard').openModal()
|
||||
}
|
||||
|
||||
window.openModal = openModal
|
||||
|
||||
// /**
|
||||
// * uppy.upload (files come from input[type=file])
|
||||
// */
|
||||
|
||||
const uppyWithoutUI = new Uppy({
|
||||
debug: true,
|
||||
restrictions: {
|
||||
allowedFileTypes: ['.png'],
|
||||
},
|
||||
}).use(Transloadit, {
|
||||
waitForEncoding: true,
|
||||
assemblyOptions: {
|
||||
params: {
|
||||
auth: { key: TRANSLOADIT_KEY },
|
||||
template_id: TEMPLATE_ID,
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
window.doUpload = (event) => {
|
||||
const resultEl = document.querySelector('#upload-result')
|
||||
const errorEl = document.querySelector('#upload-error')
|
||||
|
||||
uppyWithoutUI.addFiles(event.target.files)
|
||||
uppyWithoutUI.upload()
|
||||
|
||||
uppyWithoutUI.on('complete', ({ transloadit }) => {
|
||||
resultEl.classList.remove('hidden')
|
||||
errorEl.classList.add('hidden')
|
||||
resultEl.textContent = JSON.stringify(transloadit[0].results, null, 2)
|
||||
|
||||
const resizedUrl = transloadit[0].results.resize[0].ssl_url
|
||||
const img = document.createElement('img')
|
||||
img.src = resizedUrl
|
||||
document.getElementById('upload-result-image').appendChild(img)
|
||||
})
|
||||
|
||||
uppyWithoutUI.on('error', (err) => {
|
||||
resultEl.classList.add('hidden')
|
||||
errorEl.classList.remove('hidden')
|
||||
errorEl.textContent = err.message
|
||||
})
|
||||
}
|
||||
window.dashboard = dashboard;
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
"@uppy/remote-sources": "workspace:*",
|
||||
"@uppy/transloadit": "workspace:*",
|
||||
"@uppy/webcam": "workspace:*",
|
||||
"@uppy/golden-retriever": "workspace:*",
|
||||
"express": "^4.22.0",
|
||||
"he": "^1.2.0"
|
||||
},
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue