-
- Uppy Transloadit
-
-
- This page contains small examples for different ways you can use Uppy
- with Transloadit. Please see the
- Github repository
- for the source code.
-
- Form
-
-
- 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 with inline Dashboard
-
- You can also use the Dashboard UI inside a plain old HTML form.
-
-
- Inline Dashboard
The robodog.dashboard API allows you to embed a Dashboard
@@ -133,35 +42,7 @@
- Dashboard Modal
-
- 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 ✌️
-
- Open
-
- uppy.upload()
- An <input type=file> backed by uppy.upload():
-
-
-
-
-
-
diff --git a/examples/transloadit/main.js b/examples/transloadit/main.js
index 88720ac57..4290208e3 100644
--- a/examples/transloadit/main.js
+++ b/examples/transloadit/main.js
@@ -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;
diff --git a/examples/transloadit/package.json b/examples/transloadit/package.json
index 6072b43ab..74705e47f 100644
--- a/examples/transloadit/package.json
+++ b/examples/transloadit/package.json
@@ -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"
},
- playground
-