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

add a copy/pastable and easily understandable Uppy CDN example that works right away

Artur Paikin пре 6 година
родитељ
dae9186a6c
комит
0e5210dcaa
2 измењених фајлова са 54 додато и 30 уклоњено
Један поглед Покажи статистику Diff
  1. 52 29
      website/src/docs/index.md
  2. 2 1
      website/themes/uppy/source/css/_page.scss

+ 52 - 29
website/src/docs/index.md
Прегледај датотеку 

@@ -6,29 +6,38 @@ alias: api/
 
 order: 0
 
 order: 0
 
 ---
 
 ---
 
 
 
-Uppy is a sleek, modular file uploader that integrates seamlessly with any framework. It fetches files from local disk, Google Drive, Dropbox, Instagram, remote urls, cameras and other exciting locations, and then uploads them to the final destination. It’s fast, easy to use and lets you worry about more important problems than building a file uploader.
 
-
 
-Uppy consists of a core module and [various plugins](/docs/plugins/) for selecting, manipulating and uploading files. Here’s how it works:
 
-
 
-```bash
 
-# install dependencies
 
-npm install @uppy/core @uppy/dashboard @uppy/tus
 
-```
 
-
 
-```js
 
-const Uppy = require('@uppy/core')
 
-const Dashboard = require('@uppy/dashboard')
 
-const Tus = require('@uppy/tus')
 
- 
 
-const uppy = Uppy()
 
-  .use(Dashboard, {
 
-    trigger: '#select-files'
 
-  })
 
-  .use(Tus, {endpoint: 'https://master.tus.io/files/'})
 
- 
 
-uppy.on('complete', (result) => {
 
-  console.log(`Upload complete! We’ve uploaded these files: ${result.successful}`)
 
-})
 
+Uppy is a sleek and modular file uploader. It fetches files from local disk, Google Drive,Instagram, remote urls, cameras etc, and then uploads them to the final destination. It’s fast, easy to use and lets you worry about more important problems than building a file uploader.
 
+
 
+Uppy consists of a core module and [various plugins](/docs/plugins/) for selecting, manipulating and uploading files. 
+
 
+Here’s the simplest example html page with Uppy (it uses a CDN bundle, while we recommend to use a bundler, see [Installation](#Installation)):
 
+
 
+```html
 
+<!doctype html>
 
+<html>
 
+  <head>
 
+    <meta charset="utf-8">
 
+    <title>Uppy</title>
 
+    <link href="https://transloadit.edgly.net/releases/uppy/v0.27.4/dist/uppy.min.css" rel="stylesheet">
 
+  </head>
 
+  <body>
 
+    <div id="drag-drop-area"></div>
 
+
 
+    <script src="https://transloadit.edgly.net/releases/uppy/v0.27.4/dist/uppy.min.js"></script>
 
+    <script>
 
+      var uppy = Uppy.Core()
 
+        .use(Uppy.Dashboard, {
 
+          inline: true,
 
+          target: '#drag-drop-area'
 
+        })
 
+        .use(Uppy.Tus, {endpoint: 'https://master.tus.io/files/'})
 
+
 
+      uppy.on('complete', (result) => {
 
+        console.log(`Upload complete! We’ve uploaded these files: ${result.successful}`)
 
+      })
 
+    </script>
 
+  </body>
 
+</html>
 
 ```
 
 ```
 
 
 
 <a class="TryButton" href="/examples/dashboard/">Try it live</a>
 
 <a class="TryButton" href="/examples/dashboard/">Try it live</a>
 
@@ -53,10 +62,24 @@ $ npm install @uppy/core
 
 
 
 And install the plugins you need separately. The documentation pages for plugins in the sidebar show the necessary `npm install` commands. You can then import Uppy like so:
 
 And install the plugins you need separately. The documentation pages for plugins in the sidebar show the necessary `npm install` commands. You can then import Uppy like so:
 
 
 
+```bash
 
+npm install @uppy/core @uppy/xhr-upload @uppy/dashboard
 
+```
 
+
 
 ```js
 
 ```js
 
 const Uppy = require('@uppy/core')
 
 const Uppy = require('@uppy/core')
 
 const XHRUpload = require('@uppy/xhr-upload')
 
 const XHRUpload = require('@uppy/xhr-upload')
 
-const DragDrop = require('@uppy/drag-drop')
 
+const Dashboard = require('@uppy/dashboard')
 
+ 
 
+const uppy = Uppy()
 
+  .use(Dashboard, {
 
+    trigger: '#select-files'
 
+  })
 
+  .use(XHRUpload, { endpoint: 'https://api2.transloadit.com' })
 
+ 
 
+uppy.on('complete', (result) => {
 
+  console.log(`Upload complete! We’ve uploaded these files: ${result.successful}`)
 
+})
 
 ```
 
 ```
 
 
 
 Many plugins include a CSS file for the necessary styles in their `dist/` folder. The plugin documentation pages will tell you which to use and when. When using multiple plugin CSS files, some code is duplicated. A CSS minifier like [clean-css](https://www.npmjs.com/package/clean-css) is recommended to remove the duplicate selectors.
 
 Many plugins include a CSS file for the necessary styles in their `dist/` folder. The plugin documentation pages will tell you which to use and when. When using multiple plugin CSS files, some code is duplicated. A CSS minifier like [clean-css](https://www.npmjs.com/package/clean-css) is recommended to remove the duplicate selectors.
 
@@ -78,10 +101,10 @@ And add the `uppy/dist/uppy.min.css` file to your page.
 
 ### With a script tag
 
 ### With a script tag
 
 
 
 You can also use a pre-built bundle from Transloadit's CDN: Edgly. `Uppy` will attach itself to the global `window.Uppy` object.
 
 You can also use a pre-built bundle from Transloadit's CDN: Edgly. `Uppy` will attach itself to the global `window.Uppy` object.
 
-⚠️
 
-> The bundle consists of all plugins maintained by the Uppy team. This method is therefore not recommended for production, as your users will have to download all plugins, even if you are only using a few of them.
 
 
 
-1\. Add a script to the bottom of `<body>`:
 
+> ⚠️ The bundle consists of all plugins maintained by the Uppy team. This method is therefore not recommended for production, as your users will have to download all plugins, even if you are only using a few of them.
 
+
 
+1\. Add a script at the bottom of the closing `</body>` tag:
 
 
 
 ``` html
 
 ``` html
 
 <script src="https://transloadit.edgly.net/releases/uppy/v0.27.4/dist/uppy.min.js"></script>
 
 <script src="https://transloadit.edgly.net/releases/uppy/v0.27.4/dist/uppy.min.js"></script>
 
@@ -92,11 +115,11 @@ You can also use a pre-built bundle from Transloadit's CDN: Edgly. `Uppy` will a
 
 <link href="https://transloadit.edgly.net/releases/uppy/v0.27.4/dist/uppy.min.css" rel="stylesheet">
 
 <link href="https://transloadit.edgly.net/releases/uppy/v0.27.4/dist/uppy.min.css" rel="stylesheet">
 
 ```
 
 ```
 
 
 
-3\. Initialize:
 
+3\. Initialize at the bottom of the closing `</body>` tag:
 
 
 
 ``` html
 
 ``` html
 
 <script>
 
 <script>
 
-  var uppy = Uppy.Core({ autoProceed: false })
 
+  var uppy = Uppy.Core()
 
   uppy.use(Uppy.DragDrop, { target: '#drag-drop-area' })
 
   uppy.use(Uppy.DragDrop, { target: '#drag-drop-area' })
 
   uppy.use(Uppy.Tus, { endpoint: 'https://master.tus.io/files/' })
 
   uppy.use(Uppy.Tus, { endpoint: 'https://master.tus.io/files/' })
 
 </script>
 
 </script>

+ 2 - 1
website/themes/uppy/source/css/_page.scss
Прегледај датотеку 

@@ -363,6 +363,7 @@
 
 .TryButton,
 
 .TryButton,
 
 a.TryButton {
 
 a.TryButton {
 
   @include reset-button;
 
   @include reset-button;
 
+  display: inline-block;
 
   font-size: 0.8em;
 
   font-size: 0.8em;
 
   padding: 7px 16px;
 
   padding: 7px 16px;
 
   border: 1px solid $color-primary;
 
   border: 1px solid $color-primary;
 
@@ -370,7 +371,7 @@ a.TryButton {
 
   color: $color-primary;
 
   color: $color-primary;
 
   cursor: pointer;
 
   cursor: pointer;
 
   border-radius: 15px;
 
   border-radius: 15px;
 
-  margin-bottom: 1.5em;
 
+  margin: 0.7em 0;
 
 
 
   &:hover {
 
   &:hover {
 
     background-color: $color-primary;
 
     background-color: $color-primary;