example: replace transloadit-textarea with transloadit-markdown-bin (#4013)

Co-authored-by: Artur Paikin <artur@arturpaikin.com> Co-authored-by: Artur Paikin <artur@arturpaikin.com>
2026-07-23 02:08:30 +00:00 · 2022-08-18 23:07:53 +02:00 · 2022-08-18 23:07:53 +02:00 · 1ce625660e
commit 1ce625660e
parent dac4051ad1
8 changed files with 140 additions and 237 deletions
--- 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',
--- 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
+```
--- a/examples/transloadit-markdown-bin/index.html
+++ b/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 @@
        <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>
--- a/examples/transloadit-markdown-bin/main.js
+++ b/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)
-    })
-  }
+  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 })

-  setupUploadLine () {
-    this.uploadLine.addEventListener('click', () => {
-      this.pickFiles()
+    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 })
--- 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"
+  }
+}
--- a/examples/transloadit-textarea/package.json
+++ b/examples/transloadit-textarea/package.json
@ -1,15 +0,0 @@
-{
-  "name": "@uppy-example/transloadit-textarea",
-  "version": "0.0.0",
-  "dependencies": {
-    "@uppy/robodog": "workspace:*",
-    "browserify": "^16.5.2",
-    "drag-drop": "^4.2.0",
-    "ecstatic": "^4.1.4",
-    "marked": "^0.7.0"
-  },
-  "private": true,
-  "scripts": {
-    "start": "browserify main.js -o bundle.js && ecstatic"
-  }
-}
--- a/examples/transloadit-textarea/template.json
+++ b/examples/transloadit-textarea/template.json
@ -1,93 +0,0 @@
-{
-  "steps": {
-    ":original": {
-      "robot": "/upload/handle"
-    },
-
-    "images": {
-      "use": [
-        ":original"
-      ],
-      "robot": "/file/filter",
-      "result": true,
-      "accepts": [
-        ["${file.mime}", "regex", "image/"]
-      ]
-    },
-    "videos": {
-      "use": [
-        ":original"
-      ],
-      "robot": "/file/filter",
-      "result": true,
-      "accepts": [
-        ["${file.mime}", "regex", "video/"]
-      ]
-    },
-    "audios": {
-      "use": [
-        ":original"
-      ],
-      "robot": "/file/filter",
-      "result": true,
-      "accepts": [
-        ["${file.mime}", "regex", "audio/"]
-      ]
-    },
-    "others": {
-      "use": [
-        ":original"
-      ],
-      "robot": "/file/filter",
-      "result": true,
-      "rejects": [
-        ["${file.mime}", "regex", "image/"],
-        ["${file.mime}", "regex", "video/"],
-        ["${file.mime}", "regex", "audio/"]
-      ]
-    },
-
-    "audio_thumbnails": {
-      "use": [
-        "audios"
-      ],
-      "robot": "/audio/artwork",
-      "ffmpeg_stack": "v3.3.3"
-    },
-    "resized_thumbnails": {
-      "use": [
-        "images",
-        "audio_thumbnails"
-      ],
-      "robot": "/image/resize",
-      "imagemagick_stack": "v2.0.7",
-      "width": 400,
-      "height": 300,
-      "resize_strategy": "fit",
-      "zoom": false
-    },
-    "video_thumbnails": {
-      "use": [
-        "videos"
-      ],
-      "robot": "/video/thumbs",
-      "ffmpeg_stack": "v3.3.3",
-      "count": 1,
-      "offsets": [
-        "50%"
-      ],
-      "format": "jpeg",
-      "width": 400,
-      "height": 300,
-      "resize_strategy": "fit"
-    },
-    "thumbnails": {
-      "use": [
-        "resized_thumbnails",
-        "video_thumbnails"
-      ],
-      "robot": "/image/optimize",
-      "result": true
-    }
-  }
-}
--- a/yarn.lock
+++ b/yarn.lock
@ -8279,15 +8279,19 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@uppy-example/transloadit-textarea@workspace:examples/transloadit-textarea":
+"@uppy-example/transloadit-markdown-bin@workspace:examples/transloadit-markdown-bin":
  version: 0.0.0-use.local
-  resolution: "@uppy-example/transloadit-textarea@workspace:examples/transloadit-textarea"
+  resolution: "@uppy-example/transloadit-markdown-bin@workspace:examples/transloadit-markdown-bin"
  dependencies:
-    "@uppy/robodog": "workspace:*"
-    browserify: ^16.5.2
-    drag-drop: ^4.2.0
-    ecstatic: ^4.1.4
-    marked: ^0.7.0
+    "@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
+    vite: ^3.0.0
  languageName: unknown
  linkType: soft

@ -8578,7 +8582,7 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@uppy/drop-target@workspace:^, @uppy/drop-target@workspace:packages/@uppy/drop-target":
+"@uppy/drop-target@workspace:*, @uppy/drop-target@workspace:^, @uppy/drop-target@workspace:packages/@uppy/drop-target":
  version: 0.0.0-use.local
  resolution: "@uppy/drop-target@workspace:packages/@uppy/drop-target"
  dependencies:
@ -8661,7 +8665,7 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@uppy/image-editor@workspace:^, @uppy/image-editor@workspace:packages/@uppy/image-editor":
+"@uppy/image-editor@workspace:*, @uppy/image-editor@workspace:^, @uppy/image-editor@workspace:packages/@uppy/image-editor":
  version: 0.0.0-use.local
  resolution: "@uppy/image-editor@workspace:packages/@uppy/image-editor"
  dependencies:
@ -8783,7 +8787,7 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@uppy/remote-sources@workspace:^, @uppy/remote-sources@workspace:packages/@uppy/remote-sources":
+"@uppy/remote-sources@workspace:*, @uppy/remote-sources@workspace:^, @uppy/remote-sources@workspace:packages/@uppy/remote-sources":
  version: 0.0.0-use.local
  resolution: "@uppy/remote-sources@workspace:packages/@uppy/remote-sources"
  dependencies:
@ -11872,7 +11876,7 @@ __metadata:
  languageName: node
  linkType: hard

-"browserify@npm:^16.2.3, browserify@npm:^16.5.2":
+"browserify@npm:^16.2.3":
  version: 16.5.2
  resolution: "browserify@npm:16.5.2"
  dependencies:
@ -12716,13 +12720,6 @@ __metadata:
  languageName: node
  linkType: hard

-"charset@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "charset@npm:1.0.1"
-  checksum: adf747e7bc76c0e47dbfbb555ef376f5adb2e67cad35718f19a2d02e27589345ccaf3c6170c185d2cc82298241f8478cdcdcab8be8ec429bf56807885f3c5300
-  languageName: node
-  linkType: hard
-
 "check-more-types@npm:2.24.0, check-more-types@npm:^2.24.0":
  version: 2.24.0
  resolution: "check-more-types@npm:2.24.0"
@ -15392,22 +15389,6 @@ __metadata:
  languageName: node
  linkType: hard

-"ecstatic@npm:^4.1.4":
-  version: 4.1.4
-  resolution: "ecstatic@npm:4.1.4"
-  dependencies:
-    charset: ^1.0.1
-    he: ^1.1.1
-    mime: ^2.4.1
-    minimist: ^1.1.0
-    on-finished: ^2.3.0
-    url-join: ^4.0.0
-  bin:
-    ecstatic: lib/bin.js
-  checksum: f1b1343ab6d84867effb48505ede0a1044c1a2fe2620702179e790a111a989781215892fb3f5885e9ab7529cbcf2634efb26e5245dff47c976918ec4631ba2d5
-  languageName: node
-  linkType: hard
-
 "ee-first@npm:1.1.0":
  version: 1.1.0
  resolution: "ee-first@npm:1.1.0"
@ -19681,7 +19662,7 @@ __metadata:
  languageName: node
  linkType: hard

-"he@npm:^1.1.1, he@npm:^1.2.0":
+"he@npm:^1.2.0":
  version: 1.2.0
  resolution: "he@npm:1.2.0"
  bin:
@ -24372,7 +24353,7 @@ hexo-filter-github-emojis@arturi/hexo-filter-github-emojis:
  languageName: node
  linkType: hard

-"marked@npm:^4.0.12":
+"marked@npm:^4.0.12, marked@npm:^4.0.18":
  version: 4.0.18
  resolution: "marked@npm:4.0.18"
  bin:
@ -36191,13 +36172,6 @@ hexo-filter-github-emojis@arturi/hexo-filter-github-emojis:
  languageName: node
  linkType: hard

-"url-join@npm:^4.0.0":
-  version: 4.0.1
-  resolution: "url-join@npm:4.0.1"
-  checksum: f74e868bf25dbc8be6a8d7237d4c36bb5b6c62c72e594d5ab1347fe91d6af7ccd9eb5d621e30152e4da45c2e9a26bec21390e911ab54a62d4d82e76028374ee5
-  languageName: node
-  linkType: hard
-
 "url-loader@npm:^4.1.1":
  version: 4.1.1
  resolution: "url-loader@npm:4.1.1"