From f95d6a626f80abf2e0d59e5cdfbc8ca439948f17 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9e=20Kooi?= <renee@kooi.me>
Date: Mon, 25 Mar 2019 13:22:36 +0100
Subject: [PATCH 1/2] examples: use template + demo key for
 transloadit-textarea example

---
 examples/transloadit-textarea/index.html    |  19 ++-
 examples/transloadit-textarea/main.js       | 123 ++++----------------
 examples/transloadit-textarea/template.json |  92 +++++++++++++++
 3 files changed, 128 insertions(+), 106 deletions(-)
 create mode 100644 examples/transloadit-textarea/template.json
diff --git a/examples/transloadit-textarea/index.html b/examples/transloadit-textarea/index.html
index 32827fe67..8797484ee 100644
--- a/examples/transloadit-textarea/index.html
+++ b/examples/transloadit-textarea/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <link rel="stylesheet" href="https://transloadit.edgly.net/releases/uppy/v0.30.3/uppy.css">
+    <link rel="stylesheet" href="https://transloadit.edgly.net/releases/uppy/v0.30.3/robodog.css">
     <style>
       body {
         font-family: Roboto, Open Sans;
@@ -26,7 +26,8 @@
         border-radius: 5px;
       }
 
-      main h2 { margin-top: 0 }
+      main p:first-child { margin-top: 0 }
+
       label {
         display: flex;
         padding-bottom: 16px;
@@ -102,6 +103,14 @@
       <h1>Markdown Bin</h1>
     </header>
     <main>
+      <p>
+      Markdown Bin is a demo app that works a bit like Github Gists or pastebin. You can add markdown snippets, and add file attachments to each snippet by clicking "Upload an attachment" or by dragging files onto the text area. Transloadit generates an inline preview image for images, videos, and audio files. <a target="_blank" href="https://github.com/transloadit/uppy/blob/master/examples/transloadit-textarea/template.json">&raquo;&nbsp;View the Assembly Template here.</a>
+      </p>
+
+      <p>
+        ⚠️ For this demo, snippets are stored locally in your browser. Attachments are stored in Transloadit's temporary storage and expire after about 24 hours. In a real app, you can easily export files to a permanent storage solution like Amazon S3 or Google Cloud. <a target="_blank" href="https://transloadit.com/docs/#17-saving-conversion-results">&raquo;&nbsp;Learn more</a>
+      </p>
+
       <form id="new">
         <h2>Create a new snippet</h2>
         <label>
@@ -117,7 +126,11 @@
           </button>
         </p>
       </form>
-      <div id="snippets"></div>
+
+      <h2>Previous snippets</h2>
+
+      <div id="snippets">
+      </div>
     </main>
     <template id="snippet">
       <div class="snippet">
diff --git a/examples/transloadit-textarea/main.js b/examples/transloadit-textarea/main.js
index 0de6d46ba..ca06c019e 100644
--- a/examples/transloadit-textarea/main.js
+++ b/examples/transloadit-textarea/main.js
@@ -1,105 +1,22 @@
 /* eslint-env browser */
 const marked = require('marked')
 const dragdrop = require('drag-drop')
-const transloadit = require('@uppy/robodog')
+const robodog = require('@uppy/robodog')
 
-// TOP SECRET!!!!!!!
-const TRANSLOADIT_KEY = '05a61ed019fe11e783fdbd1f56c73eb0'
-
-const THUMB_SIZE = [400, 300]
-
-/* eslint-disable no-template-curly-in-string */
-const IMAGE_FILTER = ['${file.mime}', 'regex', 'image/']
-const VIDEO_FILTER = ['${file.mime}', 'regex', 'video/']
-const AUDIO_FILTER = ['${file.mime}', 'regex', 'audio/']
-/* eslint-enable no-template-curly-in-string */
-
-const transloaditSteps = {
-  ':original': {
-    robot: '/upload/handle'
-  },
-
-  // Separate source files
-
-  images: {
-    use: [':original'],
-    robot: '/file/filter',
-    result: true,
-    accepts: [IMAGE_FILTER]
-  },
-  videos: {
-    use: [':original'],
-    robot: '/file/filter',
-    result: true,
-    accepts: [VIDEO_FILTER]
-  },
-  audios: {
-    use: [':original'],
-    robot: '/file/filter',
-    result: true,
-    accepts: [AUDIO_FILTER]
-  },
-  others: {
-    use: [':original'],
-    robot: '/file/filter',
-    result: true,
-    rejects: [IMAGE_FILTER, VIDEO_FILTER, AUDIO_FILTER]
-  },
-
-  // Generate thumbs for different types of files
-
-  audio_thumbnails: {
-    use: ['audios'],
-    robot: '/audio/artwork'
-  },
-  resized_thumbnails: {
-    use: ['images', 'audio_thumbnails'],
-    robot: '/image/resize',
-    imagemagick_stack: 'v1.0.0',
-    width: THUMB_SIZE[0],
-    height: THUMB_SIZE[1],
-    resize_strategy: 'fit',
-    zoom: false
-  },
-  video_thumbnails: {
-    use: ['videos'],
-    robot: '/video/thumbs',
-    ffmpeg_stack: 'v2.2.3',
-    count: 1,
-    offsets: ['50%'],
-    format: 'jpeg',
-    width: THUMB_SIZE[0],
-    height: THUMB_SIZE[1],
-    resize_strategy: 'fit'
-  },
-
-  // Optimize thumbnails for decent file size
-
-  thumbnails: {
-    use: ['resized_thumbnails', 'video_thumbnails'],
-    robot: '/image/optimize'
-  },
-
-  // Store all the things away
-
-  store_sources: {
-    use: ['images', 'videos', 'audios', 'others'],
-    robot: '/s3/store',
-    credentials: 'uppy_test_s3',
-    // eslint-disable-next-line no-template-curly-in-string
-    path: 'markdownbin/sources/${unique_prefix}/${file.url_name}',
-    result: true
-  },
-  store_thumbnails: {
-    use: ['thumbnails'],
-    robot: '/s3/store',
-    credentials: 'uppy_test_s3',
-    // eslint-disable-next-line no-template-curly-in-string
-    path: 'markdownbin/thumbs/${file.md5hash}',
-    result: true
-  }
-}
+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
@@ -185,11 +102,11 @@ class MarkdownTextarea {
   }
 
   uploadFiles (files) {
-    transloadit.upload({
+    robodog.upload({
       waitForEncoding: true,
       params: {
-        auth: { key: TRANSLOADIT_KEY },
-        steps: transloaditSteps
+        auth: { key: TRANSLOADIT_EXAMPLE_KEY },
+        template_id: TRANSLOADIT_EXAMPLE_TEMPLATE
       }
     }).then((result) => {
       this.insertAttachments(
@@ -202,11 +119,11 @@ class MarkdownTextarea {
   }
 
   pickFiles () {
-    transloadit.pick({
+    robodog.pick({
       waitForEncoding: true,
       params: {
-        auth: { key: TRANSLOADIT_KEY },
-        steps: transloaditSteps
+        auth: { key: TRANSLOADIT_EXAMPLE_KEY },
+        template_id: TRANSLOADIT_EXAMPLE_TEMPLATE
       }
     }).then((result) => {
       this.insertAttachments(
diff --git a/examples/transloadit-textarea/template.json b/examples/transloadit-textarea/template.json
new file mode 100644
index 000000000..ea17852ee
--- /dev/null
+++ b/examples/transloadit-textarea/template.json
@@ -0,0 +1,92 @@
+{
+  "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"
+    },
+    "resized_thumbnails": {
+      "use": [
+        "images",
+        "audio_thumbnails"
+      ],
+      "robot": "/image/resize",
+      "imagemagick_stack": "v1.0.0",
+      "width": 400,
+      "height": 300,
+      "resize_strategy": "fit",
+      "zoom": false
+    },
+    "video_thumbnails": {
+      "use": [
+        "videos"
+      ],
+      "robot": "/video/thumbs",
+      "ffmpeg_stack": "v2.2.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
+    }
+  }
+}

From 93359b09a498aa737be3d6bd7fc1a3bf1c4adbbd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9e=20Kooi?= <renee@kooi.me>
Date: Mon, 25 Mar 2019 13:46:40 +0100
Subject: [PATCH 2/2] examples: fix outdated ffmpeg_stack warnings

---
 examples/transloadit-textarea/template.json | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/examples/transloadit-textarea/template.json b/examples/transloadit-textarea/template.json
index ea17852ee..37ed4666d 100644
--- a/examples/transloadit-textarea/template.json
+++ b/examples/transloadit-textarea/template.json
@@ -51,7 +51,8 @@
       "use": [
         "audios"
       ],
-      "robot": "/audio/artwork"
+      "robot": "/audio/artwork",
+      "ffmpeg_stack": "v3.3.3"
     },
     "resized_thumbnails": {
       "use": [
@@ -70,7 +71,7 @@
         "videos"
       ],
       "robot": "/video/thumbs",
-      "ffmpeg_stack": "v2.2.3",
+      "ffmpeg_stack": "v3.3.3",
       "count": 1,
       "offsets": [
         "50%"
