Página inicial Explorar Ajuda
Entrar
biheng
/
uppy
1
0
Fork 0
Arquivos Issues 0 Pull Requests 0 Wiki
Ver código fonte

Merge pull request #1450 from transloadit/feature/robodog-dashboard

robodog: add Dashboard API
Artur Paikin 6 anos atrás
pai
cb27df2502 105cdbc2d9
commit
e3657ae017
9 arquivos alterados com 168 adições e 25 exclusões
Visão dividida Mostrar estatísticas do Diff
  1. 26 7
      examples/transloadit/index.html
  2. 34 8
      examples/transloadit/main.js
  3. 2 3
      examples/transloadit/readme.md
  4. 1 2
      packages/@uppy/dashboard/src/index.js
  5. 30 0
      packages/@uppy/robodog/src/dashboard.js
  6. 2 0
      packages/@uppy/robodog/src/index.js
  7. 68 0
      website/src/docs/robodog-dashboard.md
  8. 2 2
      website/src/docs/robodog-form.md
  9. 3 3
      website/src/docs/robodog.md

+ 26 - 7
examples/transloadit/index.html
Ver arquivo 

@@ -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>
 
@@ -85,17 +94,27 @@
 
           <span class="error"></span>
 
       </form>
 
 
+      <hr>
 
+      <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)">

+ 34 - 8
examples/transloadit/main.js
Ver arquivo 

@@ -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,14 +55,25 @@ 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'
 
 })
 
 
 window.formUppyWithDashboard = formUppyWithDashboard
 
 
+const dashboard = transloadit.dashboard('#dashboard', {
 
+  debug: true,
 
+  waitForEncoding: true,
 
+  params: {
 
+    auth: { key: TRANSLOADIT_KEY },
 
+    template_id: TEMPLATE_ID
 
+  }
 
+})
 
+
 
+window.dashboard = dashboard
 
+
 
 /**
 
  * transloadit.modal
 
  */
 
@@ -59,8 +85,8 @@ function openModal () {
 
     },
 
     waitForEncoding: true,
 
     params: {
 
-      auth: { key: '05a61ed019fe11e783fdbd1f56c73eb0' },
 
-      template_id: 'be001500a56011e889f9cddd88df842c'
 
+      auth: { key: TRANSLOADIT_KEY },
 
+      template_id: TEMPLATE_ID
 
     },
 
     providers: [
 
       'webcam'
 
@@ -84,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')

+ 2 - 3
examples/transloadit/readme.md
Ver arquivo 

@@ -1,7 +1,6 @@
 
-# Multiple Instances
 
+# Robodog
 
 
-This example uses Uppy with the RestoreFiles plugin.
 
-It has two instances on the same page, side-by-side, but with different `id`s so their stored files don't interfere with each other.
 
+This example shows all the different Robodog APIs in action on a single page.
 
 
 ## Run it

+ 1 - 2
packages/@uppy/dashboard/src/index.js
Ver arquivo 

@@ -245,9 +245,8 @@ module.exports = class Dashboard extends Plugin {
 
   requestCloseModal () {
 
     if (this.opts.onRequestCloseModal) {
 
       return this.opts.onRequestCloseModal()
 
-    } else {
 
-      this.closeModal()
 
     }
 
+    return this.closeModal()
 
   }
 
 
   getFocusableNodes () {

+ 30 - 0
packages/@uppy/robodog/src/dashboard.js
Ver arquivo 

@@ -0,0 +1,30 @@
 
+const Dashboard = require('@uppy/dashboard')
 
+const createUppy = require('./createUppy')
 
+const addTransloaditPlugin = require('./addTransloaditPlugin')
 
+const addProviders = require('./addProviders')
 
+
 
+function dashboard (target, opts = {}) {
 
+  const inline = opts.inline == null ? true : opts.inline
 
+
 
+  const pluginId = 'Dashboard'
 
+  const uppy = createUppy(opts)
 
+  addTransloaditPlugin(uppy, opts)
 
+  uppy.use(Dashboard, {
 
+    id: pluginId,
 
+    inline,
 
+    target,
 
+    closeAfterFinish: false
 
+  })
 
+
 
+  if (Array.isArray(opts.providers)) {
 
+    addProviders(uppy, opts.providers, {
 
+      ...opts,
 
+      // Install providers into the Dashboard.
 
+      target: uppy.getPlugin(pluginId)
 
+    })
 
+  }
 
+
 
+  return uppy
 
+}
 
+
 
+module.exports = dashboard

+ 2 - 0
packages/@uppy/robodog/src/index.js
Ver arquivo 

@@ -1,8 +1,10 @@
 
 const form = require('./form')
 
+const dashboard = require('./dashboard')
 
 const pick = require('./pick')
 
 const upload = require('./upload')
 
 
 module.exports = {
 
+  dashboard,
 
   form,
 
   pick,
 
   upload

+ 68 - 0
website/src/docs/robodog-dashboard.md
Ver arquivo 

@@ -0,0 +1,68 @@
 
+---
 
+type: docs
 
+title: "Robodog: Dashboard API"
 
+menu: "Robodog Dashboard"
 
+permalink: docs/robodog/dashboard/
 
+order: 4
 
+category: 'File Processing'
 
+---
 
+
 
+Add the [Dashboard UI][dashboard] to your page, all wired up and ready to go! This is a basic wrapper around the [Transloadit][transloadit] and [Dashboard][dashboard] plugins. Unlike the [File Picker][file picker] API, this Dashboard is embedded directly into the page. Users can upload multiple files after another.
 
+
 
+```html
 
+<div id="dashboard"></div>
 
+
 
+<script>
 
+robodog.dashboard('#dashboard', {
 
+  params: {
 
+    auth: { key: '' },
 
+    template_id: ''
 
+  }
 
+})
 
+</script>
 
+```
 
+
 
+This API can still be used as a modal, too, by specifying `inline: false`:
 
+
 
+```js
 
+robodog.dashboard(selector, { inline: false })
 
+```
 
+
 
+The `robodog.dashboard()` function returns an Uppy instance, which you can use to listen for any Uppy events.
 
+
 
+```js
 
+const uppy = robodog.dashboard(selector, { ...options })
 
+  .on('transloadit:result', (result) => {
 
+    console.log(result)
 
+  })
 
+```
 
+
 
+## Transloadit
 
+
 
+All the options to the [Transloadit][transloadit] plugin are supported.
 
+
 
+## Restrictions
 
+
 
+Set rules and conditions to limit the type and/or number of files that can be selected. Restrictions are configured by the `restrictions` option.
 
+
 
+### `restrictions.maxFileSize`
 
+
 
+Maximum file size in bytes for each individual file.
 
+
 
+### `restrictions.maxNumberOfFiles`
 
+
 
+The total number of files that can be selected. If this is larger than 1, the `multiple` attribute will be added to `<input type="file">` fields.
 
+
 
+### `restrictions.minNumberOfFiles`
 
+
 
+The minimum number of files that must be selected before the upload. The upload will fail and the form will not be submitted if fewer files were selected.
 
+
 
+### `restrictions.allowedFileTypes`
 
+
 
+Array of mime type wildcards `image/*`, exact mime types `image/jpeg`, or file extensions `.jpg`: `['image/*', '.jpg', '.jpeg', '.png', '.gif']`.
 
+
 
+If provided, the [`<input accept>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Limiting_accepted_file_types) attribute will be added to `<input type="file">` fields, so only acceptable files can be selected in the system file dialog.
 
+
 
+[dashboard]: /docs/dashboard
 
+[transloadit]: /docs/transloadit
 
+[file picker]: /docs/robodog/picker

+ 2 - 2
website/src/docs/robodog-form.md
Ver arquivo 

@@ -61,7 +61,7 @@ If provided, the [`<input accept>`](https://developer.mozilla.org/en-US/docs/Web
 
 
 ## Progress Reporting
 
 
-Uploads using HTML forms have no builtin progress reporting. With the Robodog, you can use the `statusBar` option to show an [@uppy/status-bar](/docs/status-bar): an element styled like a progress bar, reporting both upload and Assembly execution progress.
 
+Uploads using HTML forms have no builtin progress reporting. With Robodog, you can use the `statusBar` option to show an [@uppy/status-bar](/docs/status-bar): an element styled like a progress bar, reporting both upload and Assembly execution progress.
 
 
 Point it to an element or a CSS selector:
 
 
@@ -89,7 +89,7 @@ The progress bar will be inserted _into_ that element (thus _not_ replace it).
 
 
 We now recommend using Uppy over the jQuery SDK. Uppy is framework- and library-agnostic, and much more extensible.
 
 
-Like the Transloadit jQuery SDK, this API enhances an existing form. That makes this a good candidate for migration. Most of the jQuery SDK options have a direct equivalent in the Robodog.
 
+Like the Transloadit jQuery SDK, this API enhances an existing form. That makes this a good candidate for migration. Most of the jQuery SDK options have a direct equivalent in Robodog.
 
 
 First, change your import URLs and initialization code:

+ 3 - 3
website/src/docs/robodog.md
Ver arquivo 

@@ -26,12 +26,12 @@ Then, with a bundler such as [webpack][webpack] or [Browserify][browserify], do:
 
 const transloadit = require('@uppy/robodog')
 
 ```
 
 
-If you are not using a bundler, you can also import the Robodog using an HTML script tag.
 
+If you are not using a bundler, you can also import Robodog using an HTML script tag.
 
 
 ```html
 
 <link rel="stylesheet" href="https://transloadit.edgly.net/releases/uppy/v0.30.4/robodog.min.css">
 
-<script src="https://transloadit.edgly.net/releases/uppy/v0.30.4/robodog.min.js"></script> 
-``` 
+<script src="https://transloadit.edgly.net/releases/uppy/v0.30.4/robodog.min.js"></script>
 
+```
 
 
 ## Methods