|
|
@@ -10,7 +10,7 @@ Uppy is a sleek, modular file uploader that integrates seamlessly with any frame
|
|
|
|
|
|
Uppy consists of a core module and [various plugins](/docs/plugins/) for selecting, manipulating and uploading files. Here’s how it works:
|
|
|
|
|
|
-```shell
|
|
|
+```bash
|
|
|
# install dependencies
|
|
|
npm install @uppy/core @uppy/dashboard @uppy/tus
|
|
|
```
|
|
|
@@ -39,17 +39,47 @@ Adding [Uppy Server](/docs/server/) to the mix enables remote sources such as In
|
|
|
|
|
|
## Installation
|
|
|
|
|
|
+Uppy can be used with a module bundler such as [Webpack](http://webpack.github.io/) or [Browserify](http://browserify.org/), or by including it in a script tag.
|
|
|
+
|
|
|
+> You may need polyfills if your application supports Internet Explorer or other older browsers. See [Browser Support](#browser-support).
|
|
|
+
|
|
|
+### With a module bundler
|
|
|
+
|
|
|
+Install the `@uppy/core` package from npm:
|
|
|
+
|
|
|
``` bash
|
|
|
+$ 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:
|
|
|
+
|
|
|
+```js
|
|
|
+const Uppy = require('@uppy/core')
|
|
|
+const XHRUpload = require('@uppy/xhr-upload')
|
|
|
+const DragDrop = require('@uppy/drag-drop')
|
|
|
+```
|
|
|
+
|
|
|
+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.
|
|
|
+
|
|
|
+You can also use the combined `uppy` package, which includes all plugins that are maintained by the Uppy team. Only use it if you have tree-shaking set up in your module bundler, otherwise you may end up sending a lot of unused code to your users.
|
|
|
+
|
|
|
+```bash
|
|
|
$ npm install uppy
|
|
|
```
|
|
|
|
|
|
-We recommend installing from NPM and then using a module bundler such as [Webpack](http://webpack.github.io/), [Browserify](http://browserify.org/) or [Rollup.js](http://rollupjs.org/).
|
|
|
+Then you can import Uppy and plugins like so:
|
|
|
|
|
|
-> You may need polyfills if your application supports Internet Explorer or other older browsers. See [Browser Support](#browser-support).
|
|
|
+```js
|
|
|
+import Uppy, { XHRUpload, DragDrop } from 'uppy'
|
|
|
+```
|
|
|
+
|
|
|
+And add the `uppy/dist/uppy.min.css` file to your page.
|
|
|
|
|
|
-Alternatively, you can also use a pre-built bundle from Transloadit's CDN: Edgly. In that case, `Uppy` will attach itself to the global `window.Uppy` object.
|
|
|
+### With a script tag
|
|
|
|
|
|
-> ⚠️ The bundle currently consists of most Uppy plugins. 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.
|
|
|
+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>`:
|
|
|
|
|
|
@@ -77,7 +107,7 @@ Alternatively, you can also use a pre-built bundle from Transloadit's CDN: Edgly
|
|
|
- [Uppy](/docs/uppy/) — full list of options, methods and events.
|
|
|
- [Plugins](/docs/plugins/) — list of Uppy plugins and their options.
|
|
|
- [Server](/docs/server/) — setting up and running an uppy-server instance, which adds support for Instagram, Dropbox, Google Drive, direct links, and other remote sources.
|
|
|
-- [React](/docs/react/) — components to integrate uppy UI plugins with React apps.
|
|
|
+- [React](/docs/react/) — components to integrate Uppy UI plugins with React apps.
|
|
|
- [Writing Plugins](/docs/writing-plugins) — how to write a plugin for Uppy [documentation in progress].
|
|
|
|
|
|
## Browser Support
|
Renée Kooi