New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
example: showcase migration out of Robodog #4021
Changes from 4 commits
7f040b0
a1b9641
cca4b21
09fe7a8
a07d2c5
9b4a80d
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,3 @@ | ||
uppy.min.css | ||
bundle.js | ||
bundle.js.map |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
# Robodog | ||
|
||
This example shows all the different Robodog APIs in action on a single page. | ||
Robodog has been deprecated, so this example shows how to replicate Robodog | ||
features without using it. If you are new with Uppy, this example is probably | ||
not for you, as it is specifically aimed for Robodog users looking to migrate | ||
out of it. | ||
|
||
## Run it | ||
|
||
To run this example, make sure you've correctly installed the **repository root**: | ||
|
||
```sh | ||
corepack yarn install | ||
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 workspace @uppy-example/transloadit start | ||
``` |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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, { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The next example is called "Form with Dashboard" so I would expect this is without Dashboard? Or delete this example altogether. |
||
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,151 @@ 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', | ||
}) | ||
.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, | ||
}, | ||
}) | ||
|
||
window.formUppyWithDashboard = formUppyWithDashboard | ||
|
||
const dashboard = robodog.dashboard('#dashboard', { | ||
/** | ||
* Dashboard | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. If every example shows Dashboard, then it feels a bit weird to now do that again? |
||
*/ | ||
|
||
const dashboard = new Uppy({ | ||
debug: true, | ||
waitForEncoding: true, | ||
note: 'Images will be resized with Transloadit', | ||
params: { | ||
auth: { key: TRANSLOADIT_KEY }, | ||
template_id: TEMPLATE_ID, | ||
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 | ||
|
||
/** | ||
* robodog.modal | ||
*/ | ||
// /** | ||
// * Dashboard Modal | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think Dashboard modal has been clear for some time now. I would just add a comment in the other example that removing |
||
// */ | ||
|
||
function openModal () { | ||
robodog.pick({ | ||
restrictions: { | ||
allowedFileTypes: ['.png'], | ||
}, | ||
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, | ||
}, | ||
providers: [ | ||
'webcam', | ||
], | ||
// if providers need custom config | ||
// webcam: { | ||
// option: 'whatever' | ||
// } | ||
}).then(console.log, console.error) | ||
}) | ||
|
||
dashboardModal.on('complete', ({ transloadit, successful, failed }) => { | ||
console.log(transloadit) | ||
console.log(successful) | ||
console.error(failed) | ||
aduh95 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
}) | ||
|
||
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) => { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Probably needs explanation that this requires HTML as well, particularly a |
||
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 | ||
|
This file was deleted.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This first sentence doesn't make sense here anymore
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I mean it still shows all the different Robodog APIs on a single page, I think we should keep it.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
But it doesn't show different Robodog APIs, it shows alternatives. I think we either include that word or remove the sentence :)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For folks following at home, this was discussed during the team meeting today, we agreed to keep this as a migration example, and therefor keep the Robodog references as it is aimed solely to Robodog users looking for a migration path out of Robodog now that we have deprecated it and plan on remove it on a followup PR.