Home Explore Help
Sign In
biheng
/
uppy
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

example: replace Robodog example with Transloadit + RemoteSources + Form (#4027)

* example: remove Robodog example

Co-authored-by: Artur Paikin <artur@arturpaikin.com>

* Update examples/transloadit/index.html

Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>

Co-authored-by: Artur Paikin <artur@arturpaikin.com>
Antoine du Hamel 2 years ago
parent
0da66ff9bd
commit
183187d7a1
6 changed files with 81 additions and 96 deletions
Unified View Show Diff Stats
  1. 3 6
      examples/transloadit/README.md
  2. 41 37
      examples/transloadit/index.html
  3. 13 25
      examples/transloadit/main.js
  4. 6 11
      examples/transloadit/package.json
  5. 17 11
      examples/transloadit/server.cjs
  6. 1 6
      yarn.lock

+ 3 - 6
examples/transloadit/README.md
View File 

@@ -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
 
 ## Run it

+ 41 - 37
examples/transloadit/index.html
View File 

@@ -3,7 +3,7 @@
 
   <head>
 
   <head>
 
     <meta charset="utf-8">
 
     <meta charset="utf-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
-    <title>Robodog playground</title>
 
+    <title>Transloadit Example</title>
 
   </head>
 
   </head>
 
   <body>
 
   <body>
 
     <style>
 
     <style>
 
@@ -27,103 +27,107 @@
 
       #logo { height: 1em; vertical-align: middle; }
 
       #logo { height: 1em; vertical-align: middle; }
 
     </style>
 
     </style>
 
     <main>
 
     <main>
 
-      <h1>Robodog <img src="https://transloadit.edgly.net/assets/images/logo-small.svg" alt="Transloadit" id="logo"> playground</h1>
 
+      <h1>Uppy Transloadit <img src="https://transloadit.edgly.net/assets/images/logo-small.svg" alt="Transloadit" id="logo"> playground</h1>
 
       <p>
 
       <p>
 
-        This page contains small examples for every API offered by the Robodog library. Please see the <a href="https://github.com/transloadit/uppy/tree/main/examples/transloadit">Github repository</a> for the source code.
 
-
 
+        This page contains small examples for different ways you can use Uppy with Transloadit. Please see the <a href="https://github.com/transloadit/uppy/tree/main/examples/transloadit">Github repository</a> for the source code.
 
+      </p>
 
       <hr>
 
       <hr>
 
-      <h2>robodog.form()</h2>
 
+      <h2>Form</h2>
 
 
 
       <p>
 
       <p>
 
-        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.
 
+      </p>
 
       <form id="test-form" method="post" action="http://localhost:9967/test">
 
       <form id="test-form" method="post" action="http://localhost:9967/test">
 
-        <p><strong>leave a message</strong>
 
+        <p><strong>leave a message</strong></p>
 
         <p>
 
         <p>
 
           <label>name:
 
           <label>name:
 
             <input type="text" name="name">
 
             <input type="text" name="name">
 
           </label>
 
           </label>
 
+        </p>
 
         <p>
 
         <p>
 
           <label>message: <br>
 
           <label>message: <br>
 
             <textarea name="message"></textarea>
 
             <textarea name="message"></textarea>
 
           </label>
 
           </label>
 
-
 
+        </p>
 
         <p>
 
         <p>
 
           <label>
 
           <label>
 
             attachments:
 
             attachments:
 
-            <input type="file" name="files" multiple>
 
+            <!-- <input type="file" name="files" multiple> -->
 
+            <strong id="uppy-form-selected-files"></strong>
 
+            <button type="button" id="uppy-select-files">Select Files</button>
 
           </label>
 
           </label>
 
           <div class="progress"></div>
 
           <div class="progress"></div>
 
-
 
+        </p>
 
         <p>
 
         <p>
 
           <button type="submit">
 
           <button type="submit">
 
             Upload
 
             Upload
 
           </button>
 
           </button>
 
-
 
+        </p>
 
           <span class="error"></span>
 
           <span class="error"></span>
 
       </form>
 
       </form>
 
 
 
       <hr>
 
       <hr>
 
-      <h2>robodog.form() with dashboard</h2>
 
+      <h2>Form with inline Dashboard</h2>
 
 
 
       <p>
 
       <p>
 
-        You can also use the Dashboard UI inside a plain old HTML form by specifying a <code>dashboard: '.target-css-selector'</code> option.
 
-
 
+        You can also use the Dashboard UI inside a plain old HTML form.
 
+      </p>
 
       <form id="dashboard-form" method="post" action="http://localhost:9967/test">
 
       <form id="dashboard-form" method="post" action="http://localhost:9967/test">
 
-        <p><strong>leave a message</strong>
 
+        <p><strong>leave a message</strong></p>
 
         <p>
 
         <p>
 
           <label>name:
 
           <label>name:
 
             <input type="text" name="name">
 
             <input type="text" name="name">
 
           </label>
 
           </label>
 
+        </p>
 
         <p>
 
         <p>
 
           <label>message: <br>
 
           <label>message: <br>
 
             <textarea name="message"></textarea>
 
             <textarea name="message"></textarea>
 
           </label>
 
           </label>
 
-
 
+        </p>
 
         <p>
 
         <p>
 
           <label>
 
           <label>
 
             attachments:
 
             attachments:
 
             <span class="dashboard"></span>
 
             <span class="dashboard"></span>
 
           </label>
 
           </label>
 
-
 
+        </p>
 
         <p>
 
         <p>
 
           <button type="submit">
 
           <button type="submit">
 
             Upload
 
             Upload
 
           </button>
 
           </button>
 
-
 
+        </p>
 
           <span class="error"></span>
 
           <span class="error"></span>
 
       </form>
 
       </form>
 
 
 
       <hr>
 
       <hr>
 
-      <h2>robodog.dashboard()</h2>
 
-
 
+      <h2>Inline Dashboard</h2>
 
       <p>
 
       <p>
 
         The <code>robodog.dashboard</code> 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!
 
         The <code>robodog.dashboard</code> 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!
 
-
 
-      <p id="dashboard">
 
+      </p>
 
+      <div id="dashboard"></div>
 
 
 
       <hr>
 
       <hr>
 
-      <h2>robodog.pick()</h2>
 
-
 
-      <p>
 
-        This API is a one-shot upload UI using a modal overlay. Call the function and receive a Promise with upload results ✌️
 
+      <h2>Dashboard Modal</h2>
 
 
 
       <p>
 
       <p>
 
-        <button onclick="openModal()">Open</button>
 
+        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 ✌️
 
+      </p>
 
+      <button onclick="openModal()">Open</button>
 
 
 
-      <hr>
 
-      <h2>robodog.upload()</h2>
 
+      <h2>uppy.upload()</h2>
 
       <p>
 
       <p>
 
-        An &lt;input type=file&gt; backed by <code>robodog.upload</code>:
 
-
 
+        An &lt;input type=file&gt; backed by <code>uppy.upload()</code>:
 
+      </p>
 
       <p>
 
       <p>
 
         <input type="file" multiple onchange="doUpload(event)">
 
         <input type="file" multiple onchange="doUpload(event)">
 
-
 
-      <p id="upload-result">
 
-      <p id="upload-error" class="error">
 
+      </p>
 
+      <div id="upload-progress"></div>
 
+      <div id="upload-result-image"></div>
 
+      <code>
 
+        <pre id="upload-result" style="font-size: 12px; max-width: 100%; max-height: 300px; white-space: pre-wrap; overflow: auto;"></pre>
 
+        <pre id="upload-error" class="error"></pre>
 
+      </code>
 
     </main>
 
     </main>
 
 
 
-    <link href="uppy.min.css" rel="stylesheet">
 
-    <script src="bundle.js"></script>
 
+    <script src="./main.js" type="module"></script>
 
   </body>
 
   </body>
 
 </html>
 
 </html>

+ 13 - 25
examples/transloadit/main.js
View File 

@@ -31,15 +31,6 @@ const TEMPLATE_ID = 'bbc273f69e0c4694a5a9d1b587abc1bc'
 
  * Form
 
  * 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({
 
 const formUppy = new Uppy({
 
   debug: true,
 
   debug: true,
 
   autoProceed: true,
 
   autoProceed: true,
 
@@ -48,7 +39,7 @@ const formUppy = new Uppy({
 
   },
 
   },
 
 })
 
 })
 
   .use(Dashboard, {
 
   .use(Dashboard, {
 
-    trigger: '#select-files',
 
+    trigger: '#uppy-select-files',
 
     closeAfterFinish: true,
 
     closeAfterFinish: true,
 
     note: 'Only PNG files please!',
 
     note: 'Only PNG files please!',
 
   })
 
   })
 
@@ -56,6 +47,7 @@ const formUppy = new Uppy({
 
   .use(Form, {
 
   .use(Form, {
 
     target: '#test-form',
 
     target: '#test-form',
 
     fields: ['message'],
 
     fields: ['message'],
 
+    // submitOnSuccess: true,
 
     addResultToForm: true,
 
     addResultToForm: true,
 
   })
 
   })
 
   .use(Transloadit, {
 
   .use(Transloadit, {
 
@@ -77,12 +69,10 @@ formUppy.on('upload-error', (file, err) => {
 
 })
 
 })
 
 
 
 formUppy.on('complete', ({ transloadit }) => {
 
 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
 
   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}`
 
   selectedFiles.textContent = `selected files: ${Object.keys(transloadit[0].results).length}`
 
-  form.appendChild(selectedFiles)
 
 })
 
 })
 
 
 
 window.formUppy = formUppy
 
 window.formUppy = formUppy
 
@@ -172,11 +162,9 @@ const dashboardModal = new Uppy({
 
   })
 
   })
 
 
 
 dashboardModal.on('complete', ({ transloadit, successful, failed }) => {
 
 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 () {
 
 function openModal () {
 
@@ -202,7 +190,7 @@ const uppyWithoutUI = new Uppy({
 
       template_id: TEMPLATE_ID,
 
       template_id: TEMPLATE_ID,
 
     },
 
     },
 
   })
 
   })
 
-  .use(ProgressBar, { target: '#upload-result' })
 
+  .use(ProgressBar, { target: '#upload-progress' })
 
 
 
 window.doUpload = (event) => {
 
 window.doUpload = (event) => {
 
   const resultEl = document.querySelector('#upload-result')
 
   const resultEl = document.querySelector('#upload-result')
 
@@ -212,14 +200,14 @@ window.doUpload = (event) => {
 
   uppyWithoutUI.upload()
 
   uppyWithoutUI.upload()
 
 
 
   uppyWithoutUI.on('complete', ({ transloadit }) => {
 
   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')
 
     resultEl.classList.remove('hidden')
 
     errorEl.classList.add('hidden')
 
     errorEl.classList.add('hidden')
 
     resultEl.textContent = JSON.stringify(transloadit[0].results, null, 2)
 
     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) => {
 
   uppyWithoutUI.on('error', (err) => {

+ 6 - 11
examples/transloadit/package.json
View File 

@@ -1,6 +1,11 @@
 
 {
 
 {
 
   "name": "@uppy-example/transloadit",
 
   "name": "@uppy-example/transloadit",
 
   "version": "0.0.0",
 
   "version": "0.0.0",
 
+  "type": "module",
 
+  "devDependencies": {
 
+    "npm-run-all": "^4.1.5",
 
+    "vite": "^3.0.0"
 
+  },
 
   "dependencies": {
 
   "dependencies": {
 
     "@uppy/core": "workspace:*",
 
     "@uppy/core": "workspace:*",
 
     "@uppy/dashboard": "workspace:*",
 
     "@uppy/dashboard": "workspace:*",
 
@@ -14,20 +19,10 @@
 
     "express": "^4.16.4",
 
     "express": "^4.16.4",
 
     "he": "^1.2.0"
 
     "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,
 
   "private": true,
 
   "scripts": {
 
   "scripts": {
 
-    "serve": "sirv .",
 
     "start:server": "node server.cjs",
 
     "start:server": "node server.cjs",
 
-    "start:client": "rollup -c -w",
 
+    "start:client": "vite",
 
     "start": "npm-run-all --parallel start:server start:client"
 
     "start": "npm-run-all --parallel start:server start:client"
 
   }
 
   }
 
 }
 
 }

+ 17 - 11
examples/transloadit/server.cjs
View File 

@@ -1,7 +1,11 @@
 
+#!/usr/bin/env node
 
+
 
 /* eslint-disable compat/compat */
 
 /* 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.
 
  * 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
 
     return
 
   }
 
   }
 
 
 
-  let body = ''
 
-  req.on('data', (chunk) => { body += chunk })
 
-  req.on('end', () => {
 
-    onbody(body)
 
-  })
 
-
 
   function onbody (body) {
 
   function onbody (body) {
 
     const fields = qs.parse(body)
 
     const fields = qs.parse(body)
 
     const result = JSON.parse(fields.uppyResult)
 
     const result = JSON.parse(fields.uppyResult)
 
@@ -36,6 +34,14 @@ function onrequest (req, res) {
 
     })
 
     })
 
     res.end(Footer())
 
     res.end(Footer())
 
   }
 
   }
 
+
 
+  {
 
+    let body = ''
 
+    req.on('data', (chunk) => { body += chunk })
 
+    req.on('end', () => {
 
+      onbody(body)
 
+    })
 
+  }
 
 }
 
 }
 
 
 
 function Header () {
 
 function Header () {
 
@@ -82,8 +88,8 @@ function FormFields (fields) {
 
       try {
 
       try {
 
         value = JSON.stringify(
 
         value = JSON.stringify(
 
           JSON.parse(value),
 
           JSON.parse(value),
 
-          null,
 
-          2,
 
+          null, 
+          2
 
         )
 
         )
 
         isValueJSON = true
 
         isValueJSON = true
 
       } catch {
 
       } catch {

+ 1 - 6
yarn.lock
View File 

@@ -8285,8 +8285,6 @@ __metadata:
 
   version: 0.0.0-use.local
 
   version: 0.0.0-use.local
 
   resolution: "@uppy-example/transloadit@workspace:examples/transloadit"
 
   resolution: "@uppy-example/transloadit@workspace:examples/transloadit"
 
   dependencies:
 
   dependencies:
 
-    "@rollup/plugin-commonjs": ^22.0.0
 
-    "@rollup/plugin-node-resolve": ^13.0.0
 
     "@uppy/core": "workspace:*"
 
     "@uppy/core": "workspace:*"
 
     "@uppy/dashboard": "workspace:*"
 
     "@uppy/dashboard": "workspace:*"
 
     "@uppy/drop-target": "workspace:*"
 
     "@uppy/drop-target": "workspace:*"
 
@@ -8299,10 +8297,7 @@ __metadata:
 
     express: ^4.16.4
 
     express: ^4.16.4
 
     he: ^1.2.0
 
     he: ^1.2.0
 
     npm-run-all: ^4.1.5
 
     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
 
   languageName: unknown
 
   linkType: soft
 
   linkType: soft