Почетна Преглед Помоћ
Пријавите се
biheng
/
uppy
1
0
Креирај огранак 0
Датотеке Дискусије 0 Захтеви за спајање 0 Вики
Преглед изворни кода

robodog: Add dashboard() to example.

Renée Kooi пре 6 година
родитељ
0fa68aab9d
комит
0c7ad1ab29
2 измењених фајлова са 48 додато и 18 уклоњено
Подељен поглед Покажи статистику Diff
  1. 23 8
      examples/transloadit/index.html
  2. 25 10
      examples/transloadit/main.js

+ 23 - 8
examples/transloadit/index.html
Прегледај датотеку 

@@ -3,7 +3,7 @@
 
   <head>
 
     <meta charset="utf-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
-    <title>Uppy :tl: playground</title>
 
+    <title>Robodog playground</title>
 
   </head>
 
   <body>
 
     <style>
 
@@ -27,10 +27,15 @@
 
       #logo { height: 1em; vertical-align: middle; }
 
     </style>
 
     <main>
 
-      <h1>Uppy <img src="https://transloadit.edgly.net/assets/images/logo-small.svg" alt="Transloadit" id="logo"> playground</h1>
 
+      <h1>Robodog <img src="https://transloadit.edgly.net/assets/images/logo-small.svg" alt="Transloadit" id="logo"> playground</h1>
 
+      <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/master/examples/transloadit">Github repository</a> for the source code.
 
 
       <hr>
 
-      <h2>transloadit.form()</h2>
 
+      <h2>robodog.form()</h2>
 
+
 
+      <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.
 
 
       <form id="test-form" method="post" action="http://localhost:9967/test">
 
         <p><strong>leave a message</strong>
 
@@ -59,7 +64,11 @@
 
       </form>
 
 
       <hr>
 
-      <h2>transloadit.form() with dashboard</h2>
 
+      <h2>robodog.form() with dashboard</h2>
 
+
 
+      <p>
 
+        You can also use the Dashboard UI inside a plain old HTML form by specifying a <code>dashboard: '.target-css-selector'</code> option.
 
+
 
       <form id="dashboard-form" method="post" action="http://localhost:9967/test">
 
         <p><strong>leave a message</strong>
 
         <p>
 
@@ -86,20 +95,26 @@
 
       </form>
 
 
       <hr>
 
-      <h2>transloadit.dashboard()</h2>
 
+      <h2>robodog.dashboard()</h2>
 
+
 
+      <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!
 
 
       <p id="dashboard">
 
 
       <hr>
 
-      <h2>transloadit.pick()</h2>
 
+      <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 ✌️
 
 
       <p>
 
         <button onclick="openModal()">Open</button>
 
 
       <hr>
 
-      <h2>transloadit.upload()</h2>
 
+      <h2>robodog.upload()</h2>
 
       <p>
 
-        An &lt;input type=file&gt; backed by `transloadit.upload`:
 
+        An &lt;input type=file&gt; backed by <code>robodog.upload</code>:
 
 
       <p>
 
         <input type="file" multiple onchange="doUpload(event)">

+ 25 - 10
examples/transloadit/main.js
Прегледај датотеку 

@@ -1,6 +1,21 @@
 
 const { inspect } = require('util')
 
 const transloadit = require('@uppy/robodog')
 
 
+const TRANSLOADIT_KEY = '35c1aed03f5011e982b6afe82599b6a0'
 
+// A trivial template that resizes images, just for example purposes.
 
+//
 
+// "steps": {
 
+//   ":original": { "robot": "/upload/handle" },
 
+//   "resize": {
 
+//     "use": ":original",
 
+//     "robot": "/image/resize",
 
+//     "width": 100,
 
+//     "height": 100,
 
+//     "imagemagick_stack": "v1.0.0"
 
+//   }
 
+// }
 
+const TEMPLATE_ID = 'bbc273f69e0c4694a5a9d1b587abc1bc'
 
+
 
 /**
 
  * transloadit.form
 
  */
 
@@ -13,8 +28,8 @@ const formUppy = transloadit.form('#test-form', {
 
   },
 
   waitForEncoding: true,
 
   params: {
 
-    auth: { key: '05a61ed019fe11e783fdbd1f56c73eb0' },
 
-    template_id: 'be001500a56011e889f9cddd88df842c'
 
+    auth: { key: TRANSLOADIT_KEY },
 
+    template_id: TEMPLATE_ID
 
   },
 
   modal: true,
 
   progressBar: '#test-form .progress'
 
@@ -40,8 +55,8 @@ const formUppyWithDashboard = transloadit.form('#dashboard-form', {
 
   },
 
   waitForEncoding: true,
 
   params: {
 
-    auth: { key: '05a61ed019fe11e783fdbd1f56c73eb0' },
 
-    template_id: 'be001500a56011e889f9cddd88df842c'
 
+    auth: { key: TRANSLOADIT_KEY },
 
+    template_id: TEMPLATE_ID
 
   },
 
   dashboard: '#dashboard-form .dashboard'
 
 })
 
@@ -52,8 +67,8 @@ const dashboard = transloadit.dashboard('#dashboard', {
 
   debug: true,
 
   waitForEncoding: true,
 
   params: {
 
-    auth: { key: '05a61ed019fe11e783fdbd1f56c73eb0' },
 
-    template_id: 'be001500a56011e889f9cddd88df842c'
 
+    auth: { key: TRANSLOADIT_KEY },
 
+    template_id: TEMPLATE_ID
 
   }
 
 })
 
 
@@ -70,8 +85,8 @@ function openModal () {
 
     },
 
     waitForEncoding: true,
 
     params: {
 
-      auth: { key: '05a61ed019fe11e783fdbd1f56c73eb0' },
 
-      template_id: 'be001500a56011e889f9cddd88df842c'
 
+      auth: { key: TRANSLOADIT_KEY },
 
+      template_id: TEMPLATE_ID
 
     },
 
     providers: [
 
       'webcam'
 
@@ -95,8 +110,8 @@ window.doUpload = (event) => {
 
   transloadit.upload(event.target.files, {
 
     waitForEncoding: true,
 
     params: {
 
-      auth: { key: '05a61ed019fe11e783fdbd1f56c73eb0' },
 
-      template_id: 'be001500a56011e889f9cddd88df842c'
 
+      auth: { key: TRANSLOADIT_KEY },
 
+      template_id: TEMPLATE_ID
 
     }
 
   }).then((result) => {
 
     resultEl.classList.remove('hidden')