Преглед на файлове

website: add StatusBar plugin example

Renée Kooi преди 7 години
родител
ревизия
cfa98bf48f

+ 0 - 0
website/src/examples/statusbar/app.css


+ 11 - 0
website/src/examples/statusbar/app.es6

@@ -0,0 +1,11 @@
+const Uppy = require('uppy/lib/core/Core')
+const FileInput = require('uppy/lib/plugins/FileInput')
+const StatusBar = require('uppy/lib/plugins/StatusBar')
+const Tus10 = require('uppy/lib/plugins/Tus10')
+
+const uppyOne = new Uppy({debug: true})
+uppyOne
+  .use(FileInput, {target: '.UppyInput'})
+  .use(Tus10, {endpoint: '//master.tus.io/files/'})
+  .use(StatusBar, {target: '.UppyInput-Progress'})
+  .run()

+ 9 - 0
website/src/examples/statusbar/app.html

@@ -0,0 +1,9 @@
+<!-- Basic Uppy styles -->
+<link rel="stylesheet" href="/uppy/uppy.min.css">
+
+<div class="grid">
+  <div class="column-full">
+    <div class="UppyInput"></div>
+    <div class="UppyInput-Progress"></div>
+  </div>
+</div>

+ 35 - 0
website/src/examples/statusbar/index.ejs

@@ -0,0 +1,35 @@
+---
+title: Status Bar
+layout: example
+type: examples
+order: 1
+---
+
+{% blockquote %}
+The StatusBar plugin shows upload progress.
+{% endblockquote %}
+
+<link rel="stylesheet" href="app.css">
+<% include app.html %>
+<script src="app.js"></script>
+
+<hr />
+
+<p id="console-wrapper">
+  Console output (latest logs are at the top): <br />
+</p>
+
+<p>
+  On this page we're using the following HTML snippet:
+</p>
+{% include_code lang:html statusbar/app.html %}
+
+<p>
+  Along with this JavaScript:
+</p>
+{% include_code lang:js statusbar/app.es6 %}
+
+<p>
+  And the following CSS:
+</p>
+{% include_code lang:css statusbar/app.css %}