首頁 探索 說明
登入
biheng
/
uppy
1
0
複刻 0
檔案 問題管理 0 合併請求 0 Wiki
瀏覽代碼

Merge pull request #1375 from transloadit/fix/markdownbin

examples: use template + demo key for transloadit-textarea example
Artur Paikin 6 年之前
父節點
7cf71238ba 93359b09a4
當前提交
e950b628d3
共有 3 個文件被更改，包括 131 次插入 和 108 次删除
分割檢視 顯示文件統計
  1. 16 3
      examples/transloadit-textarea/index.html
  2. 22 105
      examples/transloadit-textarea/main.js
  3. 93 0
      examples/transloadit-textarea/template.json

+ 16 - 3
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">

+ 22 - 105
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')
 
-
 
-// 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 robodog = require('@uppy/robodog')
 
+
 
+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(

+ 93 - 0
examples/transloadit-textarea/template.json
查看文件 

@@ -0,0 +1,93 @@
 
+{
 
+  "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": "v1.0.0",
 
+      "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
 
+    }
 
+  }
 
+}