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>

.eslintrc.js

@@ -199,6 +199,7 @@ module.exports = {
         'examples/node-xhr/*.js',
         'examples/php-xhr/*.js',
         'examples/python-xhr/*.js',
+        'examples/transloadit/*.js',
         'examples/transloadit-markdown-bin/*.js',
         'examples/xhr-bundle/*.js',
         'private/dev/*.js',

examples/transloadit/.gitignore

@@ -1 +1,3 @@
 uppy.min.css
+bundle.js
+bundle.js.map

examples/transloadit/README.md

@@ -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
+```

examples/transloadit/main.js

@@ -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',
 })
+  .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
+ */
+
+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
+//  */
 
-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 }) => {
+  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

examples/transloadit/package.json

@@ -2,16 +2,32 @@
   "name": "@uppy-example/transloadit",
   "version": "0.0.0",
   "dependencies": {
-    "@babel/core": "^7.4.4",
-    "@uppy/robodog": "workspace:*",
-    "babelify": "^10.0.0",
-    "budo": "^11.3.2",
+    "@uppy/core": "workspace:*",
+    "@uppy/dashboard": "workspace:*",
+    "@uppy/drop-target": "workspace:*",
+    "@uppy/form": "workspace:*",
+    "@uppy/image-editor": "workspace:*",
+    "@uppy/progress-bar": "workspace:*",
+    "@uppy/remote-sources": "workspace:*",
+    "@uppy/transloadit": "workspace:*",
+    "@uppy/webcam": "workspace:*",
     "express": "^4.16.4",
     "he": "^1.2.0"
   },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^22.0.0",
+    "@rollup/plugin-node-resolve": "^13.0.0",
+    "npm-run-all": "^4.1.5",
+    "rollup": "^2.60.2",
+    "rollup-plugin-css-only": "^3.0.0",
+    "rollup-plugin-livereload": "^2.0.0",
+    "rollup-plugin-terser": "^7.0.0"
+  },
   "private": true,
   "scripts": {
-    "css": "cp ../../packages/uppy/dist/uppy.min.css .",
-    "start": "yarn run css && (node server & budo main.js:bundle.js -- -t babelify & wait)"
+    "serve": "sirv .",
+    "start:server": "node server.cjs",
+    "start:client": "rollup -c -w",
+    "start": "npm-run-all --parallel start:server start:client"
   }
 }