doc: use ESM syntax in code snippets (#2953)

In preparation for a future release of Uppy which drop support for
CommonJS, we should start nudging our users to use ESM syntax.

Fixes: https://github.com/transloadit/uppy/issues/2951

README.md

@@ -28,12 +28,12 @@ Uppy is being developed by the folks at [Transloadit](https://transloadit.com),
 Code used in the above example:
 
 ```js
-const Uppy = require('@uppy/core')
-const Dashboard = require('@uppy/dashboard')
-const GoogleDrive = require('@uppy/google-drive')
-const Instagram = require('@uppy/instagram')
-const Webcam = require('@uppy/webcam')
-const Tus = require('@uppy/tus')
+import Uppy from '@uppy/core'
+import Dashboard from '@uppy/dashboard'
+import GoogleDrive from '@uppy/google-drive'
+import Instagram from '@uppy/instagram'
+import Webcam from '@uppy/webcam'
+import Tus from '@uppy/tus'
 
 const uppy = new Uppy({ autoProceed: false })
   .use(Dashboard, { trigger: '#select-files' })
@@ -171,9 +171,9 @@ With a module bundler, you can use the required polyfills like so:
 npm install es6-promise whatwg-fetch
 ```
 ```js
-require('es6-promise/auto')
-require('whatwg-fetch')
-const Uppy = require('@uppy/core')
+import 'es6-promise/auto'
+import 'whatwg-fetch'
+import Uppy from '@uppy/core'
 ```
 
 If you're using Uppy from CDN, `es6-promise` and `whatwg-fetch` are already included in the bundle, so no need to include anything additionally:

packages/@uppy/aws-s3-multipart/README.md

@@ -12,8 +12,8 @@ Uppy is being developed by the folks at [Transloadit](https://transloadit.com),
 ## Example
 
 ```js
-const Uppy = require('@uppy/core')
-const AwsS3Multipart = require('@uppy/aws-s3-multipart')
+import Uppy from '@uppy/core'
+import AwsS3Multipart from '@uppy/aws-s3-multipart'
 
 const uppy = new Uppy()
 uppy.use(AwsS3Multipart, {

packages/@uppy/aws-s3/README.md

@@ -12,8 +12,8 @@ Uppy is being developed by the folks at [Transloadit](https://transloadit.com),
 ## Example
 
 ```js
-const Uppy = require('@uppy/core')
-const AwsS3 = require('@uppy/aws-s3')
+import Uppy from '@uppy/core'
+import AwsS3 from '@uppy/aws-s3'
 
 const uppy = new Uppy()
 uppy.use(AwsS3, {

packages/@uppy/box/README.md

@@ -14,8 +14,8 @@ Uppy is being developed by the folks at [Transloadit](https://transloadit.com),
 ## Example
 
 ```js
-const Uppy = require('@uppy/core')
-const Box = require('@uppy/box')
+import Uppy from '@uppy/core'
+import Box from '@uppy/box'
 
 const uppy = new Uppy()
 uppy.use(Box, {

packages/@uppy/companion-client/README.md

@@ -12,8 +12,8 @@ Uppy is being developed by the folks at [Transloadit](https://transloadit.com),
 ## Example
 
 ```js
-const Uppy = require('@uppy/core')
-const { Provider, RequestClient, Socket } = require('@uppy/companion-client')
+import Uppy from '@uppy/core'
+import { Provider, RequestClient, Socket } from '@uppy/companion-client'
 
 const uppy = new Uppy()
 

packages/@uppy/companion/README.md

@@ -24,11 +24,10 @@ companion may either be used as pluggable express app, which you plug to your al
 ### Plug to already existing server
 
 ```javascript
-
-var express = require('express')
-var bodyParser = require('body-parser')
-var session = require('express-session')
-var companion = require('@uppy/companion')
+import express from 'express'
+import bodyParser from 'body-parser'
+import session from 'express-session'
+import companion from '@uppy/companion'
 
 var app = express()
 app.use(bodyParser.json())

packages/@uppy/core/README.md

@@ -18,7 +18,7 @@ Uppy is being developed by the folks at [Transloadit](https://transloadit.com),
 ## Example
 
 ```js
-const Uppy = require('@uppy/core')
+import Uppy from '@uppy/core'
 
 const uppy = new Uppy()
 uppy.use(SomePlugin)

packages/@uppy/dashboard/README.md

@@ -21,8 +21,8 @@ Uppy is being developed by the folks at [Transloadit](https://transloadit.com),
 ## Example
 
 ```js
-const Uppy = require('@uppy/core')
-const Dashboard = require('@uppy/dashboard')
+import Uppy from '@uppy/core'
+import Dashboard from '@uppy/dashboard'
 
 const uppy = new Uppy()
 uppy.use(Dashboard, {

packages/@uppy/drag-drop/README.md

@@ -14,8 +14,8 @@ Uppy is being developed by the folks at [Transloadit](https://transloadit.com),
 ## Example
 
 ```js
-const Uppy = require('@uppy/core')
-const DragDrop = require('@uppy/drag-drop')
+import Uppy from '@uppy/core'
+import DragDrop from '@uppy/drag-drop'
 
 const uppy = new Uppy()
 uppy.use(DragDrop, {

packages/@uppy/dropbox/README.md

@@ -14,8 +14,8 @@ Uppy is being developed by the folks at [Transloadit](https://transloadit.com),
 ## Example
 
 ```js
-const Uppy = require('@uppy/core')
-const Dropbox = require('@uppy/dropbox')
+import Uppy from '@uppy/core'
+import Dropbox from '@uppy/dropbox'
 
 const uppy = new Uppy()
 uppy.use(Dropbox, {

packages/@uppy/facebook/README.md

@@ -15,8 +15,8 @@ Uppy is being developed by the folks at [Transloadit](https://transloadit.com),
 ## Example
 
 ```js
-const Uppy = require('@uppy/core')
-const Facebook = require('@uppy/facebook')
+import Uppy from '@uppy/core'
+import Facebook from '@uppy/facebook'
 
 const uppy = new Uppy()
 uppy.use(Facebook, {

packages/@uppy/file-input/README.md

@@ -14,8 +14,8 @@ Uppy is being developed by the folks at [Transloadit](https://transloadit.com),
 ## Example
 
 ```js
-const Uppy = require('@uppy/core')
-const FileInput = require('@uppy/file-input')
+import Uppy from '@uppy/core'
+import FileInput from '@uppy/file-input'
 
 const uppy = new Uppy()
 uppy.use(FileInput, {

packages/@uppy/form/README.md

@@ -12,8 +12,8 @@ Uppy is being developed by the folks at [Transloadit](https://transloadit.com),
 ## Example
 
 ```js
-const Uppy = require('@uppy/core')
-const Form = require('@uppy/form')
+import Uppy from '@uppy/core'
+import Form from '@uppy/form'
 
 const uppy = new Uppy()
 uppy.use(Form, {

packages/@uppy/golden-retriever/README.md

@@ -12,8 +12,8 @@ Uppy is being developed by the folks at [Transloadit](https://transloadit.com),
 ## Example
 
 ```js
-const Uppy = require('@uppy/core')
-const GoldenRetriever = require('@uppy/golden-retriever')
+import Uppy from '@uppy/core'
+import GoldenRetriever from '@uppy/golden-retriever'
 
 const uppy = new Uppy()
 uppy.use(GoldenRetriever, {

packages/@uppy/google-drive/README.md

@@ -15,8 +15,8 @@ Uppy is being developed by the folks at [Transloadit](https://transloadit.com),
 ## Example
 
 ```js
-const Uppy = require('@uppy/core')
-const GoogleDrive = require('@uppy/google-drive')
+import Uppy from '@uppy/core'
+import GoogleDrive from '@uppy/google-drive'
 
 const uppy = new Uppy()
 uppy.use(GoogleDrive, {

packages/@uppy/image-editor/README.md

@@ -16,9 +16,9 @@ Uppy is being developed by the folks at [Transloadit](https://transloadit.com),
 ## Example
 
 ```js
-const Uppy = require('@uppy/core')
-const Dashboard = require('@uppy/dashboard')
-const ImageEditor = require('@uppy/image-editor')
+import Uppy from '@uppy/core'
+import Dashboard from '@uppy/dashboard'
+import ImageEditor from '@uppy/image-editor'
 
 const uppy = Uppy()
 uppy.use(Dashboard)

packages/@uppy/informer/README.md

@@ -12,8 +12,8 @@ Uppy is being developed by the folks at [Transloadit](https://transloadit.com),
 ## Example
 
 ```js
-const Uppy = require('@uppy/core')
-const Informer = require('@uppy/informer')
+import Uppy from '@uppy/core'
+import Informer from '@uppy/informer'
 
 const uppy = new Uppy()
 uppy.use(Informer, {

packages/@uppy/instagram/README.md

@@ -14,8 +14,8 @@ Uppy is being developed by the folks at [Transloadit](https://transloadit.com),
 ## Example
 
 ```js
-const Uppy = require('@uppy/core')
-const Instagram = require('@uppy/instagram')
+import Uppy from '@uppy/core'
+import Instagram from '@uppy/instagram'
 
 const uppy = new Uppy()
 uppy.use(Instagram, {

packages/@uppy/locales/README.md

@@ -20,8 +20,8 @@ $ npm install @uppy/core @uppy/locales
 ```
 
 ```js
-const Uppy = require('@uppy/core')
-const Russian = require('@uppy/locales/lib/ru_RU')
+import Uppy from '@uppy/core'
+import Russian from '@uppy/locales/lib/ru_RU'
 const uppy = new Uppy({
   debug: true,
   meta: {

packages/@uppy/onedrive/README.md

@@ -14,8 +14,8 @@ Uppy is being developed by the folks at [Transloadit](https://transloadit.com),
 ## Example
 
 ```js
-const Uppy = require('@uppy/core')
-const Facebook = require('@uppy/facebook')
+import Uppy from '@uppy/core'
+import Facebook from '@uppy/facebook'
 
 const uppy = new Uppy()
 uppy.use(Facebook, {

packages/@uppy/progress-bar/README.md

@@ -12,8 +12,8 @@ Uppy is being developed by the folks at [Transloadit](https://transloadit.com),
 ## Example
 
 ```js
-const Uppy = require('@uppy/core')
-const ProgressBar = require('@uppy/progress-bar')
+import Uppy from '@uppy/core'
+import ProgressBar from '@uppy/progress-bar'
 
 const uppy = new Uppy()
 uppy.use(ProgressBar, {

packages/@uppy/provider-views/README.md

@@ -12,8 +12,8 @@ Uppy is being developed by the folks at [Transloadit](https://transloadit.com),
 ## Example
 
 ```js
-const Plugin = require('@uppy/core/lib/plugin')
-const { ProviderViews } = require('@uppy/provider-views')
+import Plugin from '@uppy/core/lib/plugin'
+import { ProviderViews } from '@uppy/provider-views'
 
 class GoogleDrive extends UIPlugin {
   constructor () { /* snip */ }

packages/@uppy/react/README.md

@@ -12,8 +12,8 @@ Uppy is being developed by the folks at [Transloadit](https://transloadit.com),
 ## Example
 
 ```js
-const Uppy = require('@uppy/core')
-const { DashboardModal } = require('@uppy/react')
+import Uppy from '@uppy/core'
+import { DashboardModal } from '@uppy/react'
 
 const uppy = new Uppy()
 

packages/@uppy/redux-dev-tools/README.md

@@ -12,8 +12,8 @@ Uppy is being developed by the folks at [Transloadit](https://transloadit.com),
 ## Example
 
 ```js
-const Uppy = require('@uppy/core')
-const ReduxDevTools = require('uppy/redux-dev-tools')
+import Uppy from '@uppy/core'
+import ReduxDevTools from 'uppy/redux-dev-tools'
 
 const uppy = new Uppy()
 uppy.use(ReduxDevTools)

packages/@uppy/screen-capture/README.md

@@ -12,8 +12,8 @@ Uppy is being developed by the folks at [Transloadit](https://transloadit.com),
 ## Example
 
 ```js
-const Uppy = require('@uppy/core')
-const ScreenCapture = require('@uppy/screen-capture')
+import Uppy from '@uppy/core'
+import ScreenCapture from '@uppy/screen-capture'
 
 const uppy = new Uppy()
 uppy.use(ScreenCapture)

packages/@uppy/status-bar/README.md

@@ -13,8 +13,8 @@ Uppy is being developed by the folks at [Transloadit](https://transloadit.com),
 ## Example
 
 ```js
-const Uppy = require('@uppy/core')
-const StatusBar = require('@uppy/status-bar')
+import Uppy from '@uppy/core'
+import StatusBar from '@uppy/status-bar'
 
 const uppy = new Uppy()
 uppy.use(StatusBar, {

packages/@uppy/store-default/README.md

@@ -12,8 +12,8 @@ Uppy is being developed by the folks at [Transloadit](https://transloadit.com),
 ## Example
 
 ```js
-const Uppy = require('@uppy/core')
-const DefaultStore = require('@uppy/store-default')
+import Uppy from '@uppy/core'
+import DefaultStore from '@uppy/store-default'
 
 const uppy = new Uppy({
   store: DefaultStore()

packages/@uppy/store-redux/README.md

@@ -15,10 +15,10 @@ Uppy is being developed by the folks at [Transloadit](https://transloadit.com),
 ## Example
 
 ```js
-const { combineReducers, createStore } = require('redux')
-const Uppy = require('@uppy/core')
-const ReduxStore = require('@uppy/store-redux')
-const reducers = require('./reducers')
+import { combineReducers, createStore } from 'redux'
+import Uppy from '@uppy/core'
+import ReduxStore from '@uppy/store-redux'
+import reducers from './reducers'
 
 const reducer = combineReducers({
   ...reducers,

packages/@uppy/thumbnail-generator/README.md

@@ -12,8 +12,8 @@ Uppy is being developed by the folks at [Transloadit](https://transloadit.com),
 ## Example
 
 ```js
-const Uppy = require('@uppy/core')
-const ThumbnailGenerator = require('@uppy/thumbnail-generator')
+import Uppy from '@uppy/core'
+import ThumbnailGenerator from '@uppy/thumbnail-generator'
 
 const uppy = new Uppy()
 uppy.use(ThumbnailGenerator, {

packages/@uppy/transloadit/README.md

@@ -14,8 +14,8 @@ Uppy is being developed by the folks at [Transloadit](https://transloadit.com),
 ## Example
 
 ```js
-const Uppy = require('@uppy/core')
-const Transloadit = require('@uppy/transloadit')
+import Uppy from '@uppy/core'
+import Transloadit from '@uppy/transloadit'
 
 const uppy = new Uppy()
 uppy.use(Transloadit, {

packages/@uppy/tus/README.md

@@ -12,8 +12,8 @@ Uppy is being developed by the folks at [Transloadit](https://transloadit.com),
 ## Example
 
 ```js
-const Uppy = require('@uppy/core')
-const Tus = require('@uppy/tus')
+import Uppy from '@uppy/core'
+import Tus from '@uppy/tus'
 
 const uppy = new Uppy()
 uppy.use(Tus, {

packages/@uppy/unsplash/README.md

@@ -14,8 +14,8 @@ Uppy is being developed by the folks at [Transloadit](https://transloadit.com),
 ## Example
 
 ```js
-const Uppy = require('@uppy/core')
-const Unsplash = require('@uppy/unsplash')
+import Uppy from '@uppy/core'
+import Unsplash from '@uppy/unsplash'
 
 const uppy = Uppy()
 uppy.use(Unsplash, {

packages/@uppy/url/README.md

@@ -14,8 +14,8 @@ Uppy is being developed by the folks at [Transloadit](https://transloadit.com),
 ## Example
 
 ```js
-const Uppy = require('@uppy/core')
-const Url = require('@uppy/url')
+import Uppy from '@uppy/core'
+import Url from '@uppy/url'
 
 const uppy = new Uppy()
 uppy.use(Url, {

packages/@uppy/webcam/README.md

@@ -12,8 +12,8 @@ Uppy is being developed by the folks at [Transloadit](https://transloadit.com),
 ## Example
 
 ```js
-const Uppy = require('@uppy/core')
-const Webcam = require('@uppy/webcam')
+import Uppy from '@uppy/core'
+import Webcam from '@uppy/webcam'
 
 const uppy = new Uppy()
 uppy.use(Webcam, {

packages/@uppy/xhr-upload/README.md

@@ -12,8 +12,8 @@ Uppy is being developed by the folks at [Transloadit](https://transloadit.com),
 ## Example
 
 ```js
-const Uppy = require('@uppy/core')
-const XHRUpload = require('@uppy/xhr-upload')
+import Uppy from '@uppy/core'
+import XHRUpload from '@uppy/xhr-upload'
 
 const uppy = new Uppy()
 uppy.use(Uppy, {

packages/@uppy/zoom/README.md

@@ -14,8 +14,8 @@ Uppy is being developed by the folks at [Transloadit](https://transloadit.com),
 ## Example
 
 ```js
-const Uppy = require('@uppy/core')
-const Zoom = require('@uppy/zoom')
+import Uppy from '@uppy/core'
+import Zoom from '@uppy/zoom'
 
 const uppy = Uppy()
 uppy.use(Zoom, {

website/src/docs/aws-s3-multipart.md

@@ -11,7 +11,7 @@ tagline: "uploader for AWS S3 using its resumable Multipart protocol"
 The `@uppy/aws-s3-multipart` plugin can be used to upload files directly to an S3 bucket using S3's Multipart upload strategy. With this strategy, files are chopped up in parts of 5MB+ each, so they can be uploaded concurrently. It is also very reliable: if a single part fails to upload, only that 5MB chunk has to be retried.
 
 ```js
-const AwsS3Multipart = require('@uppy/aws-s3-multipart')
+import AwsS3Multipart from '@uppy/aws-s3-multipart'
 uppy.use(AwsS3Multipart, {
   limit: 4,
   companionUrl: 'https://uppy-companion.myapp.net/'

website/src/docs/aws-s3.md

@@ -12,8 +12,8 @@ The `@uppy/aws-s3` plugin can be used to upload files directly to an S3 bucket.
 Uploads can be signed using either [Companion][companion docs] or a custom signing function.
 
 ```js
-const AwsS3 = require('@uppy/aws-s3')
-const ms = require('ms')
+import AwsS3 from '@uppy/aws-s3'
+import ms from 'ms'
 
 uppy.use(AwsS3, {
   limit: 2,

website/src/docs/box.md

@@ -14,7 +14,7 @@ The `@uppy/box` plugin lets users import files from their Box account.
 A Companion instance is required for the Box plugin to work. Companion handles authentication with Box, downloads the files, and uploads them to the destination. This saves the user bandwidth, especially helpful if they are on a mobile connection.
 
 ```js
-const Box = require('@uppy/box')
+import Box from '@uppy/box'
 
 uppy.use(Box, {
   // Options

website/src/docs/companion.md

@@ -53,10 +53,10 @@ Companion may either be used as a pluggable express app, which you plug into you
 To plug Companion into an existing server, call its `.app` method, passing in an [options](#Options) object as a parameter. This returns a server instance that you can mount on a subpath in your Express or app.
 
 ```js
-const express = require('express')
-const bodyParser = require('body-parser')
-const session = require('express-session')
-const companion = require('@uppy/companion')
+import express from 'express'
+import bodyParser from 'body-parser'
+import session from 'express-session'
+import companion from '@uppy/companion'
 
 const app = express()
 
@@ -402,6 +402,8 @@ We have [a detailed guide on running Companion in Kubernetes](https://github.com
 As of now, Companion supports the [providers listed here](https://uppy.io/docs/companion/#Supported-providers) out of the box, but you may also choose to add your own custom providers. You can do this by passing the `customProviders` option when calling the Uppy `app` method. The custom provider is expected to support Oauth 1 or 2 for authentication/authorization.
 
 ```javascript
+import providerModule from '/path/to/provider/module'
+
 let options = {
     customProviders: {
         myprovidername: {
@@ -413,7 +415,7 @@ let options = {
                 secret: "***",
                 scope: ["read", "write"]
             },
-            module: require('/path/to/provider/module')
+            module: providerModule
         }
     }
 }

website/src/docs/dashboard.md

@@ -18,7 +18,7 @@ tagline: "full-featured sleek UI with file previews, metadata editing, upload/pa
 - Ability to pause or cancel (depending on the uploader plugin) uploads
 
 ```js
-const Dashboard = require('@uppy/dashboard')
+import Dashboard from '@uppy/dashboard'
 
 uppy.use(Dashboard, {
   // Options

website/src/docs/dragdrop.md

@@ -12,7 +12,7 @@ tagline: "plain and simple drag-and-drop area"
 The `@uppy/drag-drop` plugin renders a simple drag and drop area for file selection. it can be useful when you only want the local device as a file source, don’t need file previews and a UI for metadata editing, and the [Dashboard](/docs/dashboard/) feels like overkill.
 
 ```js
-const DragDrop = require('@uppy/drag-drop')
+import DragDrop from '@uppy/drag-drop'
 
 uppy.use(DragDrop, {
   // Options

website/src/docs/drop-target.md

@@ -14,7 +14,7 @@ The `@uppy/drop-target` plugin lets your users drag-and-drop files on any elemen
 Can be used together with Uppy Dashboard or Drag & Drop plugins, or your custom solution, including plain text “please drop files here”.
 
 ```js
-const DropTarget = require('@uppy/drop-target')
+import DropTarget from '@uppy/drop-target'
 
 uppy.use(DragDrop, {
   target: document.body,

website/src/docs/dropbox.md

@@ -14,7 +14,7 @@ The `@uppy/dropbox` plugin lets users import files from their Dropbox account.
 A Companion instance is required for the Dropbox plugin to work. Companion handles authentication with Dropbox, downloads the files, and uploads them to the destination. This saves the user bandwidth, especially helpful if they are on a mobile connection.
 
 ```js
-const Dropbox = require('@uppy/dropbox')
+import Dropbox from '@uppy/dropbox'
 
 uppy.use(Dropbox, {
   // Options

website/src/docs/facebook.md

@@ -14,7 +14,7 @@ The `@uppy/facebook` plugin lets users import files from their Facebook account.
 A Companion instance is required for the `@uppy/facebook` plugin to work. Companion handles authentication with Facebook, downloads the pictures and videos, and uploads them to the destination. This saves the user bandwidth, especially helpful if they are on a mobile connection.
 
 ```js
-const Facebook = require('@uppy/facebook')
+import Facebook from '@uppy/facebook'
 
 uppy.use(Facebook, {
   // Options

website/src/docs/fileinput.md

@@ -12,7 +12,7 @@ tagline: "even more plain and simple, just a button"
 `@uppy/file-input` is the most barebones UI for selecting files — it shows a single button that, when clicked, opens up the browser’s file selector.
 
 ```js
-const FileInput = require('@uppy/file-input')
+import FileInput from '@uppy/file-input'
 
 uppy.use(FileInput, {
   // Options

website/src/docs/form.md

@@ -14,7 +14,7 @@ The `@uppy/form` plugin has several features to integrate with HTML `<form>` ele
 - It can append upload results back to the form as a hidden field. Currently the appended result is a stringified version of a [`result`](/docs/uppy/#uppy-upload) returned from `uppy.upload()` or `complete` event.
 
 ```js
-const Form = require('@uppy/form')
+import Form from '@uppy/form'
 
 uppy.use(Form, {
   // Options

website/src/docs/golden-retriever.md

@@ -35,14 +35,14 @@ const GoldenRetriever = Uppy.GoldenRetriever
 ```js
 // sw.js
 
-require('@uppy/golden-retriever/lib/ServiceWorker')
+import('@uppy/golden-retriever/lib/ServiceWorker')
 ```
 
 2\. Register it in your app entry point:
 
 ```js
 // you app.js entry point
-const GoldenRetriever = require('@uppy/golden-retriever')
+import GoldenRetriever from '@uppy/golden-retriever'
 
 uppy.use(GoldenRetriever, {serviceWorker: true})
 

website/src/docs/google-drive.md

@@ -14,7 +14,7 @@ The `@uppy/google-drive` plugin lets users import files from their Google Drive
 A Companion instance is required for the `@uppy/google-drive` plugin to work. Companion handles authentication with Google, downloads files from the Drive and uploads them to the destination. This saves the user bandwidth, especially helpful if they are on a mobile connection.
 
 ```js
-const GoogleDrive = require('@uppy/google-drive')
+import GoogleDrive from '@uppy/google-drive'
 
 uppy.use(GoogleDrive, {
   // Options

website/src/docs/image-editor.md

@@ -17,9 +17,9 @@ Designed to be used with the Dashboard UI (can in theory work without it).
 ![Screenshor of the Image Editor plugin UI in Dashboard](https://user-images.githubusercontent.com/1199054/87208710-654db400-c307-11ea-9471-6e3c6582d2a5.png)
 
 ```js
-const Uppy = require('@uppy/core')
-const Dashboard = require('@uppy/dashboard')
-const ImageEditor = require('@uppy/image-editor')
+import Uppy from '@uppy/core'
+import Dashboard from '@uppy/dashboard'
+import ImageEditor from '@uppy/image-editor'
 
 const uppy = new Uppy()
 uppy.use(Dashboard)

website/src/docs/index.md

@@ -69,14 +69,14 @@ npm install @uppy/core @uppy/xhr-upload @uppy/dashboard
 
 ```js
 // Import the plugins
-const Uppy = require('@uppy/core')
-const XHRUpload = require('@uppy/xhr-upload')
-const Dashboard = require('@uppy/dashboard')
+import Uppy from '@uppy/core'
+import XHRUpload from '@uppy/xhr-upload'
+import Dashboard from '@uppy/dashboard'
 
 // And their styles (for UI plugins)
-// With webpack and `style-loader`, you can require them like this:
-require('@uppy/core/dist/style.css')
-require('@uppy/dashboard/dist/style.css')
+// With webpack and `style-loader`, you can import them like this:
+import '@uppy/core/dist/style.css'
+import '@uppy/dashboard/dist/style.css'
  
 const uppy = new Uppy()
   .use(Dashboard, {
@@ -166,9 +166,9 @@ With a module bundler, you can use the required polyfills like so:
 npm install es6-promise whatwg-fetch
 ```
 ```js
-require('es6-promise/auto')
-require('whatwg-fetch')
-const Uppy = require('@uppy/core')
+import 'es6-promise/auto'
+import 'whatwg-fetch'
+import Uppy from '@uppy/core'
 ```
 
 If you're using Uppy from CDN, `es6-promise` and  `whatwg-fetch` are already included in the bundle, no need to include anything additionally:

website/src/docs/informer.md

@@ -13,7 +13,7 @@ The `@uppy/informer` plugin is a pop-up bar for showing notifications. When plug
 Informer gets its data from `uppy.state.info`, which is updated by various plugins via [`uppy.info`](https://uppy.io/docs/uppy/#uppy-info) method.
 
 ```js
-const Informer = require('@uppy/informer')
+import Informer from '@uppy/informer'
 
 uppy.use(Informer, {
   // Options

website/src/docs/instagram.md

@@ -14,7 +14,7 @@ The `@uppy/instagram` plugin lets users import files from their Instagram accoun
 A Companion instance is required for the `@uppy/instagram` plugin to work. Companion handles authentication with Instagram, downloads the pictures and videos, and uploads them to the destination. This saves the user bandwidth, especially helpful if they are on a mobile connection.
 
 ```js
-const Instagram = require('@uppy/instagram')
+import Instagram from '@uppy/instagram'
 
 uppy.use(Instagram, {
   // Options

website/src/docs/locales.md

@@ -20,8 +20,8 @@ npm i @uppy/core @uppy/locales
 ```
 
 ```js
-const Uppy = require('@uppy/core')
-const German = require('@uppy/locales/lib/de_DE') // see below for the full list of locales
+import Uppy from '@uppy/core'
+import German from '@uppy/locales/lib/de_DE' // see below for the full list of locales
 const uppy = new Uppy({
   debug: true,
   locale: German
@@ -49,9 +49,9 @@ var uppy = Uppy.Core({
 Many plugins come with their own locale strings, and the packs we provide consist of most of those strings. You can, however, override a locale string for a specific plugin, regardless of whether you are using locale pack or not. See the plugin documentation for the list of locale strings it uses (for example, [here’s how to use it with the Dashboard UI](https://uppy.io/docs/dashboard/#locale)).
 
 ```js
-const Uppy = require('@uppy/core')
-const DragDrop = require('@uppy/drag-drop')
-const Russian = require('@uppy/locales/lib/ru_RU')
+import Uppy from '@uppy/core'
+import DragDrop from '@uppy/drag-drop'
+import Russian from '@uppy/locales/lib/ru_RU'
 const uppy = new Uppy({
   debug: true,
   autoProceed: true,

website/src/docs/onedrive.md

@@ -14,7 +14,7 @@ The `@uppy/onedrive` plugin lets users import files from their OneDrive account.
 A Companion instance is required for the `@uppy/onedrive` plugin to work. Companion handles authentication with OneDrive, downloads the pictures and videos, and uploads them to the destination. This saves the user bandwidth, especially helpful if they are on a mobile connection.
 
 ```js
-const OneDrive = require('@uppy/onedrive')
+import OneDrive from '@uppy/onedrive'
 
 uppy.use(OneDrive, {
   // Options

website/src/docs/plugin-common-options.md

@@ -17,8 +17,8 @@ A unique string identifying the plugin. By default, the plugin's name is used, s
 Can be a `string` CSS selector, a DOM element, or a Plugin class. Consider the following example, where `DragDrop` plugin will be rendered into a `body` element:
 
 ```js
-const Uppy = require('@uppy/core')
-const DragDrop = require('@uppy/drag-drop')
+import Uppy from '@uppy/core'
+import DragDrop from '@uppy/drag-drop'
 const uppy = new Uppy()
 uppy.use(DragDrop, { target: 'body' })
 // or: uppy.use(DragDrop, { target: document.body })
@@ -27,9 +27,9 @@ uppy.use(DragDrop, { target: 'body' })
 While in this one, we are using the `@uppy/dashboard` plugin, which can act as a host target for other plugins:
 
 ```js
-const Uppy = require('@uppy/core')
-const Dashboard = require('@uppy/dashboard')
-const GoogleDrive = require('@uppy/google-drive')
+import Uppy from '@uppy/core'
+import Dashboard from '@uppy/dashboard'
+import GoogleDrive from '@uppy/google-drive'
 const uppy = new Uppy()
 uppy.use(Dashboard, {
   trigger: '#uppyModalOpener'

website/src/docs/progressbar.md

@@ -12,7 +12,7 @@ tagline: "add a small YouTube-style progress bar at the top of the page"
 `@uppy/progress-bar` is a minimalist plugin that shows the current upload progress in a thin bar element, similar to the ones used by YouTube and GitHub when navigating between pages.
 
 ```js
-const ProgressBar = require('@uppy/progress-bar')
+import ProgressBar from '@uppy/progress-bar'
 
 uppy.use(ProgressBar, {
   // Options

website/src/docs/providers.md

@@ -15,27 +15,27 @@ Usage of the Provider plugins is not that different from any other *acquirer* pl
 Here's a quick example:
 
 ```js
-const Uppy = require('@uppy/core')
-const Dashboard = require('@uppy/dashboard')
+import Uppy from '@uppy/core'
+import Dashboard from '@uppy/dashboard'
 const uppy = new Uppy()
 uppy.use(Dashboard, {
   trigger: '#pick-files'
 })
 
 // for Google Drive
-const GoogleDrive = require('@uppy/google-drive')
+import GoogleDrive from '@uppy/google-drive'
 uppy.use(GoogleDrive, {target: Dashboard, companionUrl: 'http://localhost:3020'})
 
 // for Dropbox
-const Dropbox = require('@uppy/dropbox')
+import Dropbox from '@uppy/dropbox'
 uppy.use(Dropbox, {target: Dashboard, companionUrl: 'http://localhost:3020'})
 
 // for Instagram
-const Instagram = require('@uppy/instagram')
+import Instagram from '@uppy/instagram'
 uppy.use(Instagram, {target: Dashboard, companionUrl: 'http://localhost:3020'})
 
 // for URL
-const Url = require('@uppy/url')
+import Url from '@uppy/url'
 uppy.use(Url, {target: Dashboard, companionUrl: 'http://localhost:3020'})
 ```
 

website/src/docs/react-initializing.md

@@ -17,9 +17,9 @@ Functional components are re-run on every render. This makes it very easy to acc
 The `@uppy/react` package provides a hook `useUppy()` that can manage an Uppy instance's lifetime for you. It will be created when your component is first rendered, and destroyed when your component unmounts.
 
 ```js
-const Uppy = require('@uppy/core')
-const Tus = require('@uppy/tus')
-const { DashboardModal, useUppy } = require('@uppy/react')
+import Uppy from '@uppy/core'
+import Tus from '@uppy/tus'
+import { DashboardModal, useUppy } from '@uppy/react'
 
 function MyComponent () {
   const uppy = useUppy(() => {

website/src/docs/redux.md

@@ -15,8 +15,8 @@ Uppy supports the popular [Redux](https://redux.js.org/) state management librar
 You can tell Uppy to use your app’s Redux store for its files and UI state. Please check out [Custom Stores](/docs/stores/) for more information on that. Here’s an example to give you a sense of how this works:
 
 ```js
-const { createStore } = require('redux')
-const createReduxStore = require('@uppy/store-redux')
+import { createStore } from 'redux'
+import createReduxStore from '@uppy/store-redux'
 
 const reducer = combineReducers({
   ...reducers,
@@ -39,8 +39,8 @@ If you’d like to persist your Uppy state — please look into [@uppy/golden-re
 This is a `ReduxDevTools` plugin that simply syncs with the [redux-devtools](https://github.com/gaearon/redux-devtools) browser or JS extensions, and allows for basic time travel:
 
 ```js
-const Uppy = require('@uppy/core')
-const ReduxDevTools = require('@uppy/redux-dev-tools')
+import Uppy from '@uppy/core'
+import ReduxDevTools from '@uppy/redux-dev-tools'
 
 const uppy = new Uppy({
   debug: true,

website/src/docs/robodog.md

@@ -24,8 +24,8 @@ npm install @uppy/robodog
 Then, with a bundler such as [webpack][webpack] or [Browserify][browserify], do:
 
 ```js
-const robodog = require('@uppy/robodog')
-require('@uppy/robodog/dist/robodog.css')
+import robodog from '@uppy/robodog'
+import '@uppy/robodog/dist/robodog.css'
 ```
 
 If you are not using a bundler, you can also import Robodog using an HTML script tag.

website/src/docs/statusbar.md

@@ -13,7 +13,7 @@ The `@uppy/status-bar` plugin shows upload progress and speed, ETAs, pre- and po
 It is best used in combination with a simple file source plugin, such as [`@uppy/file-input`][] or [`@uppy/drag-drop`][], or a custom implementation.
 
 ```js
-const StatusBar = require('@uppy/status-bar')
+import StatusBar from '@uppy/status-bar'
 
 uppy.use(StatusBar, {
   // Options

website/src/docs/stores.md

@@ -26,7 +26,7 @@ There are also some third-party stores:
 To use a store, pass an instance to the [`store` option](/docs/uppy#store-defaultstore) in the Uppy constructor:
 
 ```js
-const defaultStore = require('@uppy/store-default')
+import defaultStore from '@uppy/store-default'
 
 const uppy = new Uppy({
   store: defaultStore()
@@ -48,7 +48,7 @@ This way, you get most of the benefits of Redux, including support for the Redux
 To use the `ReduxStore`, add its reducer to the `uppy` key:
 
 ```js
-const ReduxStore = require('@uppy/store-redux')
+import ReduxStore from '@uppy/store-redux'
 const reducer = combineReducers({
   ...reducers,
   uppy: ReduxStore.reducer
@@ -58,8 +58,8 @@ const reducer = combineReducers({
 Then pass a Redux store instance to the Uppy constructor:
 
 ```js
-const { createStore } = require('redux')
-const ReduxStore = require('@uppy/store-redux')
+import { createStore } from 'redux'
+import ReduxStore from '@uppy/store-redux'
 
 const store = createStore(reducer)
 const uppy = new Uppy({

website/src/docs/svelte.md

@@ -36,9 +36,11 @@ yarn add -D postcss postcss-import postcss-load-config
 Then create a `postcss.config.js` like so:
 
 ```js
-module.exports = {
+import postcss from 'postcss-import'
+
+export default {
   plugins: [
-    require('postcss-import')()
+    postcss
   ]
 }
 ```

website/src/docs/thumbnail-generator.md

@@ -13,7 +13,7 @@ tagline: "generate preview thumbnails for images to be uploaded"
 This plugin is included by default with the [Dashboard](/docs/dashboard), so you don’t have to include it manually. But it is useful if you are not using the Dashboard and want to display image previews in your custom UI.
 
 ```js
-const ThumbnailGenerator = require('@uppy/thumbnail-generator')
+import ThumbnailGenerator from '@uppy/thumbnail-generator'
 
 uppy.use(ThumbnailGenerator, {
   thumbnailWidth: 200,

website/src/docs/transloadit.md

@@ -17,7 +17,7 @@ The `@uppy/transloadit` plugin can be used to upload files to [Transloadit](http
 <a class="TryButton" href="/examples/transloadit/">Try it live</a>
 
 ```js
-const Transloadit = require('@uppy/transloadit')
+import Transloadit from '@uppy/transloadit'
 
 uppy.use(Transloadit, {
   service: 'https://api2.transloadit.com',
@@ -57,8 +57,8 @@ const Transloadit = Uppy.Transloadit
 The main endpoint for Transloadit's hosted companions. You can use this constant in remote provider options, like so:
 
 ```js
-const Dropbox = require('@uppy/dropbox')
-const Transloadit = require('@uppy/transloadit')
+import Dropbox from '@uppy/dropbox'
+import Transloadit from '@uppy/transloadit'
 
 uppy.use(Dropbox, {
   companionUrl: Transloadit.COMPANION,
@@ -83,8 +83,8 @@ A RegExp pattern matching Transloadit's hosted companion endpoints. The pattern
 Use it whenever you use `companionUrl: Transloadit.COMPANION`, like so:
 
 ```js
-const Dropbox = require('@uppy/dropbox')
-const Transloadit = require('@uppy/transloadit')
+import Dropbox from '@uppy/dropbox'
+import Transloadit from '@uppy/transloadit'
 
 uppy.use(Dropbox, {
   companionUrl: Transloadit.COMPANION,

website/src/docs/tus.md

@@ -11,7 +11,7 @@ tagline: "uploads using the <a href='https://tus.io'>tus</a> resumable upload pr
 The `@uppy/tus` plugin brings resumable file uploading by [tus.io](http://tus.io) to Uppy by wrapping the [tus-js-client][].
 
 ```js
-const Tus = require('@uppy/tus')
+import Tus from '@uppy/tus'
 
 uppy.use(Tus, {
   endpoint: 'https://tusd.tusdemo.net/files/', // use your tus endpoint here

website/src/docs/uppy.md

@@ -11,7 +11,7 @@ tagline: "The core module that orchestrates everything"
 This is the core module that orchestrates everything in Uppy, managing state and events and providing methods.
 
 ```js
-const Uppy = require('@uppy/core')
+import Uppy from '@uppy/core'
 
 const uppy = new Uppy()
 ```
@@ -34,8 +34,8 @@ const Core = Uppy.Core
 
 When using TypeScript, Uppy has weak type checking by default. That means that the options to plugins are not type-checked. For example, this is allowed:
 ```ts
-import Uppy = require('@uppy/core')
-import Tus = require('@uppy/tus')
+import Uppy from '@uppy/core'
+import Tus from '@uppy/tus'
 const uppy = new Uppy()
 uppy.use(Tus, {
   invalidOption: null,
@@ -46,8 +46,8 @@ uppy.use(Tus, {
 As of Uppy 1.10, Uppy supports a strict typechecking mode. This mode typechecks the options passed in to plugins. This will be the only mode in Uppy 2.0, but is currently optional to preserve backwards compatibility. The strict mode can be enabled by passing a special generic type parameter to the Uppy constructor:
 
 ```ts
-import Uppy = require('@uppy/core')
-import Tus = require('@uppy/tus')
+import Uppy from '@uppy/core'
+import Tus from '@uppy/tus'
 const uppy = Uppy<Uppy.StrictTypes>()
 uppy.use(Tus, {
   invalidOption: null // this will now make the compilation fail!
@@ -124,7 +124,7 @@ An object of methods that are called with debug information from [`uppy.log`](/d
 Set `logger: Uppy.debugLogger` to get debug info output to the browser console:
 
 ```js
-const Uppy = require('@uppy/core')
+import Uppy from '@uppy/core'
 const uppy = new Uppy({
   logger: Uppy.debugLogger
 })
@@ -312,7 +312,7 @@ locale: {
 Instead of overriding strings yourself, consider using [one of our language packs](https://github.com/transloadit/uppy/tree/master/packages/%40uppy/locales) (or contributing one!):
 
 ```js
-const russianLocale = require('@uppy/locales/lib/ru_RU')
+import russianLocale from '@uppy/locales/lib/ru_RU'
 // ^-- OR: import russianLocale from '@uppy/locales/lib/ru_RU'
 const uppy = new Uppy({
   locale: russianLocale,
@@ -416,8 +416,8 @@ When an upload is completed, this may contain a URL to the uploaded file. Depend
 Add a plugin to Uppy, with an optional plugin options object.
 
 ```js
-const Uppy = require('@uppy/core')
-const DragDrop = require('@uppy/drag-drop')
+import Uppy from '@uppy/core'
+import DragDrop from '@uppy/drag-drop'
 
 const uppy = new Uppy()
 uppy.use(DragDrop, { target: 'body' })
@@ -496,7 +496,7 @@ file.preview   // value that can be used to populate "src" attribute of an "img"
 Get an array of all [File Objects][] that have been added to Uppy.
 
 ```js
-const prettierBytes = require('@transloadit/prettier-bytes')
+import prettierBytes from '@transloadit/prettier-bytes'
 const items = uppy.getFiles().map(() =>
   `<li>${file.name} - ${prettierBytes(file.size)}</li>`
 ).join('')

website/src/docs/url.md

@@ -14,7 +14,7 @@ The `@uppy/url` plugin allows users to import files from the internet. Paste any
 A Companion instance is required for the `@uppy/url` plugin to work. Companion will download the files and upload them to their destination. This saves bandwidth for the user (especially on mobile connections) and helps to avoid CORS restrictions.
 
 ```js
-const Url = require('@uppy/url')
+import Url from '@uppy/url'
 
 uppy.use(Url, {
   // Options

website/src/docs/webcam.md

@@ -13,7 +13,7 @@ The `@uppy/webcam` plugin lets you take photos and record videos with a built-in
 > To use the Webcam plugin in Chrome, [your site must be served over https](https://developers.google.com/web/updates/2015/10/chrome-47-webrtc#public_service_announcements). This restriction does not apply on `localhost`, so you don't have to jump through many hoops during development.
 
 ```js
-const Webcam = require('@uppy/webcam')
+import Webcam from '@uppy/webcam'
 
 uppy.use(Webcam, {
   // Options

website/src/docs/writing-plugins.md

@@ -22,8 +22,8 @@ Plugins are classes that extend from Uppy's `Plugin` class. Each plugin has an `
 The plugin constructor receives the Uppy instance in the first parameter, and any options passed to `uppy.use()` in the second parameter.
 
 ```js
-const { UIPlugin } = require('@uppy/core')
-module.exports = class MyPlugin extends UIPlugin {
+import { UIPlugin } from '@uppy/core'
+export default class MyPlugin extends UIPlugin {
   constructor (uppy, opts) {
     super(uppy, opts)
     this.id = opts.id || 'MyPlugin'
@@ -190,8 +190,8 @@ See the Preact [Getting Started Guide](https://preactjs.com/guide/getting-starte
 
 ```js
 /** @jsx h */
-const { UIPlugin } = require('@uppy/core')
-const { h } = require('preact')
+import { UIPlugin } from '@uppy/core'
+import { h } from 'preact'
 
 class NumFiles extends UIPlugin {
   render () {
@@ -238,9 +238,9 @@ this.i18nArray = this.translator.translateArray.bind(this.translator)
 Below is a full example of a [simple plugin](https://github.com/arturi/uppy-plugin-image-compressor) that compresses images before uploading them. You can replace `compressorjs` method with any other work you need to do. This works especially well for async stuff, like calling an external API.
 
 ```js
-const { UIPlugin } = require('@uppy/core')
-const Translator = require('@uppy/utils/lib/Translator')
-const Compressor = require('compressorjs/dist/compressor.common.js')
+import { UIPlugin } from '@uppy/core'
+import Translator from '@uppy/utils/lib/Translator'
+import Compressor from 'compressorjs/dist/compressor.esm.js'
 
 class UppyImageCompressor extends UIPlugin {
   constructor (uppy, opts) {
@@ -344,7 +344,7 @@ class UppyImageCompressor extends UIPlugin {
   }
 }
 
-module.exports = UppyImageCompressor
+export default UppyImageCompressor
 ```
 
 [core.setfilestate]: /docs/uppy#uppy-setFileState-fileID-state

website/src/docs/xhrupload.md

@@ -13,7 +13,7 @@ tagline: "classic multipart form uploads or binary uploads using XMLHTTPRequest"
 The `@uppy/xhr-upload` plugin handles classic HTML multipart form uploads, as well as uploads using the HTTP `PUT` method.
 
 ```js
-const XHRUpload = require('@uppy/xhr-upload')
+import XHRUpload from '@uppy/xhr-upload'
 
 uppy.use(XHRUpload, {
   endpoint: 'http://my-website.org/upload'

website/src/docs/zoom.md

@@ -14,7 +14,7 @@ The `@uppy/zoom` plugin lets users import files from their Zoom account.
 A Companion instance is required for the `@uppy/zoom` plugin to work. Companion handles authentication with Zoom, downloads the pictures and videos, and uploads them to the destination. This saves the user bandwidth, especially helpful if they are on a mobile connection.
 
 ```js
-const Zoom = require('@uppy/zoom')
+import Zoom from '@uppy/zoom'
 
 uppy.use(Zoom, {
   // Options