example: replace transloadit-textarea with `transloadit-markdown-bi…

…n` (#4013) Co-authored-by: Artur Paikin <artur@arturpaikin.com> Co-authored-by: Artur Paikin <artur@arturpaikin.com>
transloadit · Aug 18, 2022 · 1ce6256 · 1ce6256
1 parent dac4051
commit 1ce6256
Show file tree

Hide file tree

Showing 8 changed files with 141 additions and 238 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -195,6 +195,7 @@ module.exports = {
         'examples/aws-presigned-url/*.js',
         'examples/bundled/*.js',
         'examples/custom-provider/client/*.js',
+        'examples/transloadit-markdown-bin/*.js',
         'private/dev/*.js',
         'private/release/*.js',
         'private/remark-lint-uppy/*.js',

diff --git a/examples/transloadit-markdown-bin/README.md b/examples/transloadit-markdown-bin/README.md
@@ -0,0 +1,20 @@
+# Uppy Markdown Editor
+
+This example uses Uppy to handle images in a markdown editor.
+
+## 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-markdown-bin start
+```
diff --git a/examples/transloadit-textarea/index.html → examples/transloadit-markdown-bin/index.html b/examples/transloadit-textarea/index.html → examples/transloadit-markdown-bin/index.html
@@ -2,10 +2,9 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <link rel="stylesheet" href="https://releases.transloadit.com/uppy/robodog/v3.0.0-beta.4/robodog.css">
     <style>
       body {
-        font-family: Roboto, Open Sans;
+        font-family: Roboto, 'Open Sans';
         background: #f4f5f6;
       }
       h1, h2, h3, h4, h5, h6 {
@@ -139,6 +138,7 @@ <h3 class="snippet-title"></h3>
         <div class="snippet-content"></div>
       </div>
     </template>
-    <script src="bundle.js"></script>
+    <noscript>This app requires JavaScript.</noscript>
+    <script src="./main.js" type="module"></script>
   </body>
 </html>
diff --git a/examples/transloadit-textarea/main.js → examples/transloadit-markdown-bin/main.js b/examples/transloadit-textarea/main.js → examples/transloadit-markdown-bin/main.js
@@ -1,32 +1,33 @@
-/* eslint-env browser */
-const marked = require('marked')
-const dragdrop = require('drag-drop')
-const robodog = require('@uppy/robodog')
+import { marked } from 'marked'
+import Uppy from '@uppy/core'
+import DropTarget from '@uppy/drop-target'
+import Dashboard from '@uppy/dashboard'
+import Transloadit from '@uppy/transloadit'
+import RemoteSources from '@uppy/remote-sources'
+import Webcam from '@uppy/webcam'
+import ImageEditor from '@uppy/image-editor'
+
+import '@uppy/core/dist/style.css'
+import '@uppy/dashboard/dist/style.css'
+import '@uppy/image-editor/dist/style.css'
 
 const TRANSLOADIT_EXAMPLE_KEY = '35c1aed03f5011e982b6afe82599b6a0'
 const TRANSLOADIT_EXAMPLE_TEMPLATE = '0b2ee2bc25dc43619700c2ce0a75164a'
 
 /**
  * A textarea for markdown text, with support for file attachments.
- *
- * ## Usage
- *
- * ```js
- * const element = document.querySelector('textarea')
- * const mdtxt = new MarkdownTextarea(element)
- * mdtxt.install()
- * ```
  */
 class MarkdownTextarea {
   constructor (element) {
     this.element = element
     this.controls = document.createElement('div')
     this.controls.classList.add('mdtxt-controls')
-    this.uploadLine = document.createElement('div')
-    this.uploadLine.classList.add('mdtxt-upload')
+    this.uploadLine = document.createElement('button')
+    this.uploadLine.setAttribute('type', 'button')
+    this.uploadLine.classList.add('form-upload')
 
     this.uploadLine.appendChild(
-      document.createTextNode('Upload an attachment'),
+      document.createTextNode('Tap here to upload an attachment'),
     )
   }
 
@@ -39,18 +40,37 @@ class MarkdownTextarea {
     wrapper.appendChild(element)
     wrapper.appendChild(this.uploadLine)
 
-    this.setupUploadLine()
+    this.setupUppy()
   }
 
-  setupTextareaDrop () {
-    dragdrop(this.element, (files) => {
-      this.uploadFiles(files)
-    })
-  }
-
-  setupUploadLine () {
-    this.uploadLine.addEventListener('click', () => {
-      this.pickFiles()
+  setupUppy = () => {
+    this.uppy = new Uppy({ autoProceed: true })
+      .use(Transloadit, {
+        waitForEncoding: true,
+        params: {
+          auth: { key: TRANSLOADIT_EXAMPLE_KEY },
+          template_id: TRANSLOADIT_EXAMPLE_TEMPLATE,
+        },
+      })
+      .use(DropTarget, { target: this.element })
+      .use(Dashboard, { closeAfterFinish: true, trigger: '.form-upload' })
+      .use(ImageEditor, { target: Dashboard })
+      .use(Webcam, { target: Dashboard })
+      .use(RemoteSources, { companionUrl: Transloadit.COMPANION })
+
+    this.uppy.on('complete', (result) => {
+      const { successful, failed, transloadit } = result
+      if (successful.length !== 0) {
+        this.insertAttachments(
+          matchFilesAndThumbs(transloadit[0].results),
+        )
+      } else {
+        failed.forEach(error => {
+          console.error(error)
+          this.reportUploadError(error)
+        })
+      }
+      this.uppy.cancelAll()
     })
   }
 
@@ -82,66 +102,20 @@ class MarkdownTextarea {
     })
   }
 
-  matchFilesAndThumbs (results) {
-    const filesById = {}
-    const thumbsById = {}
-
-    results.forEach((result) => {
-      if (result.stepName === 'thumbnails') {
-        thumbsById[result.original_id] = result
-      } else {
-        filesById[result.original_id] = result
+  uploadFiles = (files) => {
+    const filesForUppy = files.map(file => {
+      return {
+        data: file,
+        type: file.type,
+        name: file.name,
+        meta: file.meta || {},
       }
     })
-
-    return Object.keys(filesById).map((key) => ({
-      file : filesById[key],
-      thumb : thumbsById[key],
-    }))
-  }
-
-  uploadFiles () {
-    robodog.upload({
-      waitForEncoding: true,
-      params: {
-        auth: { key: TRANSLOADIT_EXAMPLE_KEY },
-        template_id: TRANSLOADIT_EXAMPLE_TEMPLATE,
-      },
-    }).then((result) => {
-      // Was cancelled
-      if (result == null) return
-      this.insertAttachments(
-        this.matchFilesAndThumbs(result.results),
-      )
-    }).catch((err) => {
-      console.error(err)
-      this.reportUploadError(err)
-    })
-  }
-
-  pickFiles () {
-    robodog.pick({
-      waitForEncoding: true,
-      params: {
-        auth: { key: TRANSLOADIT_EXAMPLE_KEY },
-        template_id: TRANSLOADIT_EXAMPLE_TEMPLATE,
-      },
-    }).then((result) => {
-      // Was cancelled
-      if (result == null) return
-      this.insertAttachments(
-        this.matchFilesAndThumbs(result.results),
-      )
-    }).catch((err) => {
-      console.error(err)
-      this.reportUploadError(err)
-    })
+    this.uppy.addFiles(filesForUppy)
   }
 }
 
-const textarea = new MarkdownTextarea(
-  document.querySelector('#new textarea'),
-)
+const textarea = new MarkdownTextarea(document.querySelector('#new textarea'))
 textarea.install()
 
 function renderSnippet (title, text) {
@@ -170,20 +144,40 @@ function loadSnippets () {
   }
 }
 
+function matchFilesAndThumbs (results) {
+  const filesById = {}
+  const thumbsById = {}
+
+  for (const [stepName, result] of Object.entries(results)) {
+    result.forEach(result => {
+      if (stepName === 'thumbnails') {
+        thumbsById[result.original_id] = result
+      } else {
+        filesById[result.original_id] = result
+      }
+    })
+  }
+
+  return Object.keys(filesById).map((key) => ({
+    file: filesById[key],
+    thumb: thumbsById[key],
+  }))
+}
+
 document.querySelector('#new').addEventListener('submit', (event) => {
   event.preventDefault()
 
-  const title = event.target.querySelector('input[name="title"]').value
+  const title = event.target.elements['title'].value
     || 'Unnamed Snippet'
   const text = textarea.element.value
 
   saveSnippet(title, text)
   renderSnippet(title, text)
 
+  // eslint-disable-next-line no-param-reassign
   event.target.querySelector('input').value = ''
+  // eslint-disable-next-line no-param-reassign
   event.target.querySelector('textarea').value = ''
 })
 
-window.addEventListener('DOMContentLoaded', () => {
-  loadSnippets()
-})
+window.addEventListener('DOMContentLoaded', loadSnippets, { once: true })
diff --git a/examples/transloadit-markdown-bin/package.json b/examples/transloadit-markdown-bin/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "@uppy-example/transloadit-markdown-bin",
+  "version": "0.0.0",
+  "type": "module",
+  "dependencies": {
+    "@uppy/core": "workspace:*",
+    "@uppy/dashboard": "workspace:*",
+    "@uppy/drop-target": "workspace:*",
+    "@uppy/image-editor": "workspace:*",
+    "@uppy/remote-sources": "workspace:*",
+    "@uppy/transloadit": "workspace:*",
+    "@uppy/webcam": "workspace:*",
+    "marked": "^4.0.18"
+  },
+  "devDependencies": {
+    "vite": "^3.0.0"
+  },
+  "private": true,
+  "scripts": {
+    "start": "vite"
+  }
+}
diff --git a/examples/transloadit-textarea/package.json b/examples/transloadit-textarea/package.json