mirror of
https://github.com/transloadit/uppy.git
synced 2026-07-17 16:50:22 +00:00
example: showcase migration out of Robodog (#4021)
* example: showcase migration out of Robodog Co-authored-by: Artur Paikin <artur@arturpaikin.com> * Fix server, apply what was done in #3946 * Do weird things with input[type=file] * fix last example * Improve completion logging * Fix lint Co-authored-by: Artur Paikin <artur@arturpaikin.com>
This commit is contained in:
Antoine du Hamel
GitHub
parent
ff2eed4eeb
commit
089aaed615
9 changed files with 331 additions and 98 deletions
|
|
@ -1,5 +1,16 @@
|
|||
const { inspect } = require('node:util')
|
||||
const robodog = require('@uppy/robodog')
|
||||
import Transloadit, { COMPANION_URL } from '@uppy/transloadit'
|
||||
import Uppy from '@uppy/core'
|
||||
import Form from '@uppy/form'
|
||||
import Dashboard from '@uppy/dashboard'
|
||||
import RemoteSources from '@uppy/remote-sources'
|
||||
import ImageEditor from '@uppy/image-editor'
|
||||
import Webcam from '@uppy/webcam'
|
||||
import ProgressBar from '@uppy/progress-bar'
|
||||
|
||||
import '@uppy/core/dist/style.css'
|
||||
import '@uppy/dashboard/dist/style.css'
|
||||
import '@uppy/image-editor/dist/style.css'
|
||||
import '@uppy/progress-bar/dist/style.css'
|
||||
|
||||
const TRANSLOADIT_KEY = '35c1aed03f5011e982b6afe82599b6a0'
|
||||
// A trivial template that resizes images, just for example purposes.
|
||||
|
|
@ -17,23 +28,43 @@ const TRANSLOADIT_KEY = '35c1aed03f5011e982b6afe82599b6a0'
|
|||
const TEMPLATE_ID = 'bbc273f69e0c4694a5a9d1b587abc1bc'
|
||||
|
||||
/**
|
||||
* robodog.form
|
||||
* Form
|
||||
*/
|
||||
|
||||
const formUppy = robodog.form('#test-form', {
|
||||
// Robodog supported automatically replacing <input type="file"> elements
|
||||
// Now we do it manually:
|
||||
const button = document.createElement('button')
|
||||
button.type = 'button'
|
||||
button.innerText = 'Select files'
|
||||
button.id = 'select-files'
|
||||
const fileInput = document.querySelector('#test-form input[type=file]')
|
||||
fileInput.replaceWith(button)
|
||||
|
||||
const formUppy = new Uppy({
|
||||
debug: true,
|
||||
fields: ['message'],
|
||||
autoProceed: true,
|
||||
restrictions: {
|
||||
allowedFileTypes: ['.png'],
|
||||
},
|
||||
waitForEncoding: true,
|
||||
params: {
|
||||
auth: { key: TRANSLOADIT_KEY },
|
||||
template_id: TEMPLATE_ID,
|
||||
},
|
||||
modal: true,
|
||||
progressBar: '#test-form .progress',
|
||||
})
|
||||
.use(Dashboard, {
|
||||
trigger: '#select-files',
|
||||
closeAfterFinish: true,
|
||||
note: 'Only PNG files please!',
|
||||
})
|
||||
.use(RemoteSources, { companionUrl: COMPANION_URL })
|
||||
.use(Form, {
|
||||
target: '#test-form',
|
||||
fields: ['message'],
|
||||
addResultToForm: true,
|
||||
})
|
||||
.use(Transloadit, {
|
||||
waitForEncoding: true,
|
||||
params: {
|
||||
auth: { key: TRANSLOADIT_KEY },
|
||||
template_id: TEMPLATE_ID,
|
||||
},
|
||||
})
|
||||
|
||||
formUppy.on('error', (err) => {
|
||||
document.querySelector('#test-form .error')
|
||||
|
|
@ -45,81 +76,153 @@ formUppy.on('upload-error', (file, err) => {
|
|||
.textContent = err.message
|
||||
})
|
||||
|
||||
formUppy.on('complete', ({ transloadit }) => {
|
||||
const btn = document.getElementById('select-files')
|
||||
const form = document.getElementById('test-form')
|
||||
btn.hidden = true
|
||||
const selectedFiles = document.createElement('uppy-form-selected-files')
|
||||
selectedFiles.textContent = `selected files: ${Object.keys(transloadit[0].results).length}`
|
||||
form.appendChild(selectedFiles)
|
||||
})
|
||||
|
||||
window.formUppy = formUppy
|
||||
|
||||
const formUppyWithDashboard = robodog.form('#dashboard-form', {
|
||||
/**
|
||||
* Form with Dashboard
|
||||
*/
|
||||
|
||||
const formUppyWithDashboard = new Uppy({
|
||||
debug: true,
|
||||
fields: ['message'],
|
||||
autoProceed: false,
|
||||
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'],
|
||||
},
|
||||
.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,
|
||||
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.formUppyWithDashboard = formUppyWithDashboard
|
||||
|
||||
/**
|
||||
* Dashboard
|
||||
*/
|
||||
|
||||
const dashboard = new Uppy({
|
||||
debug: true,
|
||||
autoProceed: false,
|
||||
restrictions: {
|
||||
allowedFileTypes: ['.png'],
|
||||
},
|
||||
})
|
||||
.use(Dashboard, {
|
||||
inline: true,
|
||||
target: '#dashboard',
|
||||
note: 'Only PNG files please!',
|
||||
})
|
||||
.use(RemoteSources, { companionUrl: COMPANION_URL })
|
||||
.use(Webcam, { target: Dashboard })
|
||||
.use(ImageEditor, { target: Dashboard })
|
||||
.use(Transloadit, {
|
||||
waitForEncoding: true,
|
||||
params: {
|
||||
auth: { key: TRANSLOADIT_KEY },
|
||||
template_id: TEMPLATE_ID,
|
||||
},
|
||||
})
|
||||
|
||||
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,
|
||||
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
|
||||
|
||||
/**
|
||||
* robodog.upload
|
||||
*/
|
||||
// /**
|
||||
// * uppy.upload (files come from input[type=file])
|
||||
// */
|
||||
|
||||
window.doUpload = (event) => {
|
||||
const resultEl = document.querySelector('#upload-result')
|
||||
const errorEl = document.querySelector('#upload-error')
|
||||
robodog.upload(event.target.files, {
|
||||
const uppyWithoutUI = new Uppy({
|
||||
debug: true,
|
||||
restrictions: {
|
||||
allowedFileTypes: ['.png'],
|
||||
},
|
||||
})
|
||||
.use(Transloadit, {
|
||||
waitForEncoding: true,
|
||||
params: {
|
||||
auth: { key: TRANSLOADIT_KEY },
|
||||
template_id: TEMPLATE_ID,
|
||||
},
|
||||
}).then((result) => {
|
||||
})
|
||||
.use(ProgressBar, { target: '#upload-result' })
|
||||
|
||||
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 }) => {
|
||||
const resizedUrl = transloadit[0].results['resize'][0]['ssl_url']
|
||||
const img = document.createElement('img')
|
||||
img.src = resizedUrl
|
||||
document.getElementById('upload-result').appendChild(img)
|
||||
|
||||
resultEl.classList.remove('hidden')
|
||||
errorEl.classList.add('hidden')
|
||||
resultEl.textContent = inspect(result.results)
|
||||
}, (err) => {
|
||||
resultEl.textContent = JSON.stringify(transloadit[0].results, null, 2)
|
||||
})
|
||||
|
||||
uppyWithoutUI.on('error', (err) => {
|
||||
resultEl.classList.add('hidden')
|
||||
errorEl.classList.remove('hidden')
|
||||
errorEl.textContent = err.message
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue