From c55093ede168cf5f37a16e08e641b0ceb0cd1089 Mon Sep 17 00:00:00 2001 From: Antoine du Hamel Date: Mon, 22 Aug 2022 16:52:31 +0200 Subject: [PATCH 1/2] example: remove Robodog example Co-authored-by: Artur Paikin --- examples/transloadit/README.md | 9 ++-- examples/transloadit/index.html | 78 ++++++++++++++++--------------- examples/transloadit/main.js | 38 ++++++--------- examples/transloadit/package.json | 17 +++---- examples/transloadit/server.cjs | 28 ++++++----- yarn.lock | 7 +-- 6 files changed, 81 insertions(+), 96 deletions(-) mode change 100644 => 100755 examples/transloadit/server.cjs diff --git a/examples/transloadit/README.md b/examples/transloadit/README.md index 28a149cd10..8fb41a3480 100644 --- a/examples/transloadit/README.md +++ b/examples/transloadit/README.md @@ -1,10 +1,7 @@ -# Robodog +# Transloadit example -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. +This example shows how to make advantage of Uppy API to upload files to +[Transloadit](https://transloadit.com/). ## Run it diff --git a/examples/transloadit/index.html b/examples/transloadit/index.html index 6626d53000..53c152b831 100644 --- a/examples/transloadit/index.html +++ b/examples/transloadit/index.html @@ -3,7 +3,7 @@ - Robodog playground + Transloadit Example
-

Robodog playground

+

Uppy Transloadit playground

- This page contains small examples for every API offered by the Robodog library. Please see the Github repository for the source code. - + This page contains small examples for different ways you can use Uppy with Transloadit. Please see the Github repository for the source code. +

-

robodog.form()

+

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. - + 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. +

-

leave a message +

leave a message

+

- +

- +

- +

-

robodog.form() with dashboard

+

Form with inline Dashboard

- You can also use the Dashboard UI inside a plain old HTML form by specifying a dashboard: '.target-css-selector' option. - + You can also use the Dashboard UI inside a plain old HTML form. +

-

leave a message +

leave a message

+

- +

- +

- +

-

robodog.dashboard()

- +

Inline Dashboard

The robodog.dashboard API allows you to embed a Dashboard at any location. Users can continuously upload files through this UI, so please make sure this fits your use case! - -

+

+

-

robodog.pick()

- -

- This API is a one-shot upload UI using a modal overlay. Call the function and receive a Promise with upload results ✌️ +

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 ✌️ +

+ -
-

robodog.upload()

+

uppy.upload()

- An <input type=file> backed by robodog.upload: - + An <input type=file> backed by uppy.upload(): +

- -

-

+

+
+
+ + 

+        

+      
     

 
-    
-    
+    
   
 
diff --git a/examples/transloadit/main.js b/examples/transloadit/main.js
index d88b3155cf..23c3ae2506 100644
--- a/examples/transloadit/main.js
+++ b/examples/transloadit/main.js
@@ -31,15 +31,6 @@ const TEMPLATE_ID = 'bbc273f69e0c4694a5a9d1b587abc1bc'
  * Form
  */
 
-// Robodog supported automatically replacing  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,
   autoProceed: true,
@@ -48,7 +39,7 @@ const formUppy = new Uppy({
   },
 })
   .use(Dashboard, {
-    trigger: '#select-files',
+    trigger: '#uppy-select-files',
     closeAfterFinish: true,
     note: 'Only PNG files please!',
   })
@@ -56,6 +47,7 @@ const formUppy = new Uppy({
   .use(Form, {
     target: '#test-form',
     fields: ['message'],
+    // submitOnSuccess: true,
     addResultToForm: true,
   })
   .use(Transloadit, {
@@ -77,12 +69,10 @@ formUppy.on('upload-error', (file, err) => {
 })
 
 formUppy.on('complete', ({ transloadit }) => {
-  const btn = document.getElementById('select-files')
-  const form = document.getElementById('test-form')
+  const btn = document.getElementById('uppy-select-files')
   btn.hidden = true
-  const selectedFiles = document.createElement('uppy-form-selected-files')
+  const selectedFiles = document.getElementById('uppy-form-selected-files')
   selectedFiles.textContent = `selected files: ${Object.keys(transloadit[0].results).length}`
-  form.appendChild(selectedFiles)
 })
 
 window.formUppy = formUppy
@@ -172,11 +162,9 @@ const dashboardModal = new Uppy({
   })
 
 dashboardModal.on('complete', ({ transloadit, successful, failed }) => {
-  if (failed?.length !== 0) {
-    console.error('it failed', failed)
-  } else {
-    console.log('success', { transloadit, successful })
-  }
+  console.log(transloadit)
+  console.log(successful)
+  console.error(failed)
 })
 
 function openModal () {
@@ -202,7 +190,7 @@ const uppyWithoutUI = new Uppy({
       template_id: TEMPLATE_ID,
     },
   })
-  .use(ProgressBar, { target: '#upload-result' })
+  .use(ProgressBar, { target: '#upload-progress' })
 
 window.doUpload = (event) => {
   const resultEl = document.querySelector('#upload-result')
@@ -212,14 +200,14 @@ window.doUpload = (event) => {
   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 = 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) => {
diff --git a/examples/transloadit/package.json b/examples/transloadit/package.json
index c331cd0a12..c9dd4221fa 100644
--- a/examples/transloadit/package.json
+++ b/examples/transloadit/package.json
@@ -1,6 +1,11 @@
 {
   "name": "@uppy-example/transloadit",
   "version": "0.0.0",
+  "type": "module",
+  "devDependencies": {
+    "npm-run-all": "^4.1.5",
+    "vite": "^3.0.0"
+  },
   "dependencies": {
     "@uppy/core": "workspace:*",
     "@uppy/dashboard": "workspace:*",
@@ -14,20 +19,10 @@
     "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": {
-    "serve": "sirv .",
     "start:server": "node server.cjs",
-    "start:client": "rollup -c -w",
+    "start:client": "vite",
     "start": "npm-run-all --parallel start:server start:client"
   }
 }
diff --git a/examples/transloadit/server.cjs b/examples/transloadit/server.cjs
old mode 100644
new mode 100755
index d69e6e88a6..748a03856b
--- a/examples/transloadit/server.cjs
+++ b/examples/transloadit/server.cjs
@@ -1,7 +1,11 @@
+#!/usr/bin/env node
+
 /* eslint-disable compat/compat */
-const http = require('node:http')
-const qs = require('node:querystring')
-const e = require('he').encode
+import http from 'node:http'
+import qs from 'node:querystring'
+import he from 'he'
+
+const e = he.encode
 
 /**
  * A very haxxor server that outputs some of the data it receives in a POST form parameter.
@@ -17,12 +21,6 @@ function onrequest (req, res) {
     return
   }
 
-  let body = ''
-  req.on('data', (chunk) => { body += chunk })
-  req.on('end', () => {
-    onbody(body)
-  })
-
   function onbody (body) {
     const fields = qs.parse(body)
     const result = JSON.parse(fields.uppyResult)
@@ -36,6 +34,14 @@ function onrequest (req, res) {
     })
     res.end(Footer())
   }
+
+  {
+    let body = ''
+    req.on('data', (chunk) => { body += chunk })
+    req.on('end', () => {
+      onbody(body)
+    })
+  }
 }
 
 function Header () {
@@ -82,8 +88,8 @@ function FormFields (fields) {
       try {
         value = JSON.stringify(
           JSON.parse(value),
-          null,
-          2,
+          null, 
+          2
         )
         isValueJSON = true
       } catch {
diff --git a/yarn.lock b/yarn.lock
index 3ff6d28ad0..f854269b9f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8285,8 +8285,6 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@uppy-example/transloadit@workspace:examples/transloadit"
   dependencies:
-    "@rollup/plugin-commonjs": ^22.0.0
-    "@rollup/plugin-node-resolve": ^13.0.0
     "@uppy/core": "workspace:*"
     "@uppy/dashboard": "workspace:*"
     "@uppy/drop-target": "workspace:*"
@@ -8299,10 +8297,7 @@ __metadata:
     express: ^4.16.4
     he: ^1.2.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
+    vite: ^3.0.0
   languageName: unknown
   linkType: soft
 

From 6af423a79fcee4edbf65a0ff386258599869c340 Mon Sep 17 00:00:00 2001
From: Artur Paikin 
Date: Mon, 22 Aug 2022 16:02:15 +0100
Subject: [PATCH 2/2] Update examples/transloadit/index.html

Co-authored-by: Antoine du Hamel 
---
 examples/transloadit/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/transloadit/index.html b/examples/transloadit/index.html
index 53c152b831..22c8045904 100644
--- a/examples/transloadit/index.html
+++ b/examples/transloadit/index.html
@@ -103,7 +103,7 @@ 
Inline Dashboard

       

         The robodog.dashboard API allows you to embed a Dashboard at any location. Users can continuously upload files through this UI, so please make sure this fits your use case!
       

-      

+      

 
       

       
Dashboard Modal