Merge remote-tracking branch 'upstream/master'

.github/CONTRIBUTING.md

@@ -66,6 +66,54 @@ npm run test:endtoend:local -- -b chrome --suite thumbnails
 
 These tests are also run automatically on Travis builds with [SauceLabs](https://saucelabs.com/) cloud service using different OSes.
 
+## Development
+
+### Instagram integration
+
+Even though facebook [allows using](https://developers.facebook.com/blog/post/2018/06/08/enforce-https-facebook-login/) http://localhost in dev mode, Instagram doesn't seem to support that, and seems to need a publically available domain name with HTTPS.
+
+Make sure that you are using a development facebook app at <https://developers.facebook.com/apps>
+
+Go to "Instagram Basic Display" and find `Instagram App ID` and `Instagram App Secret`. Put them in a file called `env.sh` in the repo root:
+```bash
+export COMPANION_INSTAGRAM_KEY="Instagram App ID"
+export COMPANION_INSTAGRAM_SECRET="Instagram App Secret"
+```
+
+Run
+```bash
+ngrok http 3020
+```
+Note the ngrok https base URL, e.g. `https://e0c7de09808d.ngrok.io` and
+append `/instagram/redirect` to it, e.g.:
+
+```
+https://e0c7de09808d.ngrok.io/instagram/redirect
+```
+
+Add this full ngrok URL to `Valid OAuth Redirect URIs` under `Instagram Basic Display`.
+
+Edit `bin/companion` and change to your ngrok URI:
+
+```bash
+COMPANION_DOMAIN="e0c7de09808d.ngrok.io"
+COMPANION_PROTOCOL="https"
+```
+
+Edit `examples/dev/Dashboard.js`:
+
+```
+const COMPANION_URL = 'https://e0c7de09808d.ngrok.io'
+```
+
+Go to: Roles -> Roles -> Add Instagram testers -> Add your instagram account
+
+Go to your instagram account at <https://www.instagram.com/accounts/manage_access/>
+
+Tester invites -> Accept
+
+Now you should be able to test the Instagram integration.
+
 ## Releases
 
 Before doing a release, check that the examples on the website work:

BACKLOG.md

@@ -50,14 +50,14 @@ PRs are welcome! Please do open an issue to discuss first if it's a big feature,
 - [x] dashboard: set default `trigger: null`, see https://github.com/transloadit/uppy/pull/2144#issuecomment-600581690 (@arturi)
 - [ ] form: make the `multipleResults` option `true` by default (@arturi)
 - [x] locales: Remove the old es_GL name alias for gl_ES. Keep gl_ES only (@arturi)
-- [ ] providers: remove `serverHeaders` https://github.com/transloadit/uppy/pull/1861 (@mifi)
-- [ ] transloadit: remove `UPPY_SERVER` constant (@mifi)
-- [ ] tus: set the `limit` option to a sensible default, like 5 (10?) (@arturi)
-- [ ] xhr: set the `limit` option to a sensible default, like 5 (10?) (@arturi)
+- [x] providers: remove `serverHeaders` https://github.com/transloadit/uppy/pull/1861 (@mifi)
+- [x] transloadit: remove `UPPY_SERVER` constant (@mifi)
+- [x] tus: set the `limit` option to a sensible default, like 5 (10?) (@arturi)
+- [x] xhr: set the `limit` option to a sensible default, like 5 (10?) (@arturi)
 - [x] xhr: change default name depending on whether `bundle` is set `files[]` (`true`) vs `file` (default) (#782) (@aduh95)
 - [ ] providers: allow changing provider name title through locale? https://github.com/transloadit/uppy/issues/2279 (@goto-bus-stop)
 - [x] tus: remove `autoRetry` option (throw error at runtime if it is explicitly given) (@aduh95)
-- [ ] dashboard: showing links to files should be turned off by default (it's great for devs, they can opt-in, but for end-user UI it's weird and can even lead to problems) (@arturi)
+- [x] dashboard: showing links to files should be turned off by default (it's great for devs, they can opt-in, but for end-user UI it's weird and can even lead to problems) (@arturi)
 
 ### 3.0
 

website/src/_posts/2016-08-0.8.0.md

@@ -27,8 +27,8 @@ const uppy = new Uppy()
   .use(MetaData, {
     fields: [
       { id: 'resizeTo', name: 'Resize to', value: 1200, placeholder: 'specify future image size' },
-      { id: 'description', name: 'Description', value: '', placeholder: 'describe what the file is for' }
-    ]
+      { id: 'description', name: 'Description', value: '', placeholder: 'describe what the file is for' },
+    ],
   })
 ```
 

website/src/_posts/2016-09-0.10.md

@@ -53,7 +53,7 @@ We have finally begun to expose events on the `uppy` instance, so you can now su
 
 ``` javascript
 uppy.on('core:upload-success', (id, url) => {
-  var img = new Image()
+  const img = new Image()
   img.width = 300
   img.alt = id
   img.src = url

website/src/_posts/2017-02-0.14.md

@@ -45,7 +45,7 @@ uppy.use(Dashboard, {
   maxWidth: 300,
   maxHeight: 350,
   inline: true,
-  target: '#myUploadContainer'
+  target: '#myUploadContainer',
 })
 ```
 
@@ -71,12 +71,15 @@ You can play with all of these new features on [the Dashboard example page](http
 We have moved locale settings from global/core to plugins. By default, each UI plugin ships with an English locale, and you can override any string with your own, like so:
 
 ```js
-uppy.use(DragDrop, {target: '.drop', locale: {
-  strings: {
-    chooseFile: 'Valitse tiedoston',
-    orDragDrop: 'tai siirtää tänne',
-  }
-}})
+uppy.use(DragDrop, {
+  target: '.drop',
+  locale: {
+    strings: {
+      chooseFile: 'Valitse tiedoston',
+      orDragDrop: 'tai siirtää tänne',
+    },
+  },
+})
 ```
 
 <img src="/images/blog/0.14/dnd-fi.png">

website/src/_posts/2017-05-0.17.md

@@ -14,28 +14,28 @@ Hi! We are back with yet another Uppy release that contains some often requested
 Something that a few of our biggest fans were asking for, is finally here! Here's the gist of it:
 
 ```js
-  Uppy({
-    debug: true,
-    autoProceed: false,
-    restrictions: {
-      maxFileSize: 300000,
-      maxNumberOfFiles: 5,
-      minNumberOfFiles: 2,
-      allowedFileTypes: ['image/*', 'video/*']
-    },
-    onBeforeFileAdded: (currentFile, files) => {
-      if (currentFile.name === 'my-file.jpg') {
-        return Promise.resolve()
-      }
-      return Promise.reject('This is not the file I was looking for')
-    },
-    onBeforeUpload: (files) => {
-      if (Object.keys(files).length < 2) {
-        return Promise.reject('Too few files :(')
-      }
+Uppy({
+  debug: true,
+  autoProceed: false,
+  restrictions: {
+    maxFileSize: 300000,
+    maxNumberOfFiles: 5,
+    minNumberOfFiles: 2,
+    allowedFileTypes: ['image/*', 'video/*'],
+  },
+  onBeforeFileAdded: (currentFile, files) => {
+    if (currentFile.name === 'my-file.jpg') {
       return Promise.resolve()
     }
-  })
+    return Promise.reject('This is not the file I was looking for')
+  },
+  onBeforeUpload: (files) => {
+    if (Object.keys(files).length < 2) {
+      return Promise.reject('Too few files :(')
+    }
+    return Promise.resolve()
+  },
+})
 ```
 
 Basically, there are two ways to set restrictions:
@@ -63,7 +63,7 @@ Also, a new `note` option has been added to the Dashboard, as a quick and easy w
 
 ```js
 uppy.use(Dashboard, {
-  note: 'Images and video only, 300kb or less'
+  note: 'Images and video only, 300kb or less',
 })
 ```
 

website/src/_posts/2017-09-0.19.md

@@ -19,10 +19,10 @@ We're also happy to report that [more tests](https://github.com/transloadit/uppy
 We’ve exposed `show/hide/isOpen` APIs for the Dashboard UI plugin. Now you can open and close the modal dialog programmatically:
 
 ```js
-var modal = uppy.getPlugin('Dashboard')
+const modal = uppy.getPlugin('Dashboard')
 modal.show()
 
-...
+// ...
 
 button.addEventListener('click', () => {
   if (modal.isOpen()) {

website/src/_posts/2017-10-0.20.md

@@ -17,6 +17,7 @@ const uppy = Uppy()
 uppy.use(Tus10, { endpoint: '/upload' })
 
 const Dashboard = require('uppy/lib/react/Dashboard')
+
 const Uploader = () => (
   <Dashboard
     uppy={uppy}
@@ -45,7 +46,7 @@ const uppyStateUpdate = (previous, next, patch) => ({
   type: 'UPPY_STATE_UPDATE',
   previous,
   next,
-  patch
+  patch,
 })
 
 function reduce (state = {}, action) {
@@ -53,7 +54,7 @@ function reduce (state = {}, action) {
     return {
       ...state,
       // Merge in the changes.
-      ...action.patch
+      ...action.patch,
     }
   }
 }
@@ -63,9 +64,10 @@ Then pass your Redux store's `dispatch` function and the action creator to the R
 
 ```js
 const ReduxStore = require('uppy/lib/Redux')
+
 uppy.use(ReduxStore, {
   dispatch: store.dispatch,
-  action: uppyStateUpdate
+  action: uppyStateUpdate,
 })
 ```
 
@@ -81,6 +83,7 @@ To try it, add the plugin:
 
 ```js
 const ReduxDevTools = require('uppy/lib/plugins/ReduxDevTools')
+
 uppy.use(ReduxDevTools)
 ```
 
@@ -113,7 +116,7 @@ uppy.use(DragDrop, {
   target: 'body',
   width: '600px',
   height: '300px',
-  note: 'Videos only, up to 100 MB'
+  note: 'Videos only, up to 100 MB',
 })
 ```
 
@@ -123,8 +126,9 @@ We recently released the `GoldenRetriever` plugin, which stores selected files o
 
 ```js
 const ms = require('ms')
+
 uppy.use(GoldenRetriever, {
-  expires: ms('4 hours')
+  expires: ms('4 hours'),
 })
 ```
 
@@ -134,6 +138,7 @@ This will clean up files when Uppy runs, but perhaps not every page of your app
 
 ```js
 const cleanup = require('uppy/lib/plugins/GoldenRetriever/cleanup')
+
 cleanup()
 ```
 

website/src/_posts/2017-12-0.22.md

@@ -96,7 +96,7 @@ Read [more on stores](https://uppy.io/docs/stores/) in docs.
 
 ```js
 uppy.use(Form, {
-  target: '#my-form'
+  target: '#my-form',
 })
 ```
 

website/src/_posts/2018-02-0.23.md

@@ -39,7 +39,7 @@ uppy.on('complete', (result) => {
   //   successful: [...],
   //   transloadit: [...],
   //   uploadID: "cjdnzj2zy0000c___iewu9m5y"
-  //}
+  // }
 })
 ```
 

website/src/_posts/2018-10-0.28.md

@@ -45,14 +45,14 @@ In the beginning, we used to have unified locale packs for text strings in Uppy
 With this change, you can load a locale pack like so: `const uppy = Uppy({locale: german})`, then still override specific strings in a certain plugin, if needed:
 
 ```js
-const uppy = Uppy({locale: german})
+const uppy = Uppy({ locale: german })
 uppy.use(Dashboard, {
   trigger: '#pick-files',
   locale: {
     strings: {
-      dropPasteImport: 'Something else here, %{browse} or this'
-    }
-  }
+      dropPasteImport: 'Something else here, %{browse} or this',
+    },
+  },
 })
 ```
 

website/src/_posts/2019-04-liftoff-23.md

@@ -18,6 +18,7 @@ Hello and welcome to Day 23 of our '30 Days to Liftoff' blog post challenge. The
 ```js
 // npm install @uppy/locales --save
 const russianLocale = require('@uppy/locales/lib/ru_RU')
+
 const uppy = Uppy({
   locale: russianLocale,
 })

website/src/_posts/2019-10-1.5.md

@@ -107,6 +107,7 @@ Then use them like the existing providers:
 ```js
 const Facebook = require('@uppy/facebook')
 const OneDrive = require('@uppy/onedrive')
+
 uppy.use(Facebook, { companionUrl: YOUR_COMPANION_URL })
 uppy.use(OneDrive, { companionUrl: YOUR_COMPANION_URL })
 ```

website/src/_posts/2019-11-1.6.md

@@ -20,11 +20,11 @@ Here’s how the magic works:
 ```js
 const uppy = Uppy({
   restrictions: {
-    maxNumberOfFiles: 3
-  }
+    maxNumberOfFiles: 3,
+  },
 })
 uppy.use(Dashboard, {
-  note: 'You can upload up to 3 files'
+  note: 'You can upload up to 3 files',
 })
 ```
 
@@ -34,8 +34,8 @@ Now, based on some condition in our app, we want to allow more files:
 // Updating Uppy options
 uppy.setOptions({
   restrictions: {
-    maxNumberOfFiles: 5
-  }
+    maxNumberOfFiles: 5,
+  },
 })
 // Updating Dashboard options
 uppy.getPlugin('Dashboard').setOptions({ note: 'You can upload up to 5 files' })
@@ -45,8 +45,9 @@ Say, later on, the user changed their locale and we would like to reflect that i
 
 ```js
 const fi_FI = require('@uppy/locales/lib/fi_FI')
+
 uppy.setOptions({
-  locale: fi_FI
+  locale: fi_FI,
 })
 ```
 

website/src/_posts/2020-03-custom-providers.md

@@ -73,7 +73,7 @@ app.use(bodyParser.json())
 app.use(session({
   secret: 'some-secret',
   resave: true,
-  saveUninitialized: true
+  saveUninitialized: true,
 }))
 
 app.use((req, res, next) => {
@@ -94,16 +94,16 @@ const companionOptions = {
   providerOptions: {
     dropbox: {
       key: 'your Dropbox key',
-      secret: 'your Dropbox secret'
-    }
+      secret: 'your Dropbox secret',
+    },
   },
   server: {
     host: 'localhost:3020',
-    protocol: 'http'
+    protocol: 'http',
   },
   filePath: './output',
   secret: 'some-secret',
-  debug: true
+  debug: true,
 }
 
 app.use(companion.app(companionOptions))
@@ -117,7 +117,6 @@ companion.socket(app.listen(3020), companionOptions)
 
 console.log('Welcome to Companion!')
 console.log(`Listening on http://0.0.0.0:3020`)
-
 ```
 
 The code snippet above sets up an express server and plugs Companion into it. However, the Companion setup doesn't include a custom provider yet. It only includes the Dropbox provider.
@@ -156,7 +155,7 @@ class MyCustomProvider {
   constructor (options) {
     this.authProvider = 'myunsplash' // the name of our provider (lowercased)
   }
-  ...
+  // ...
 }
 ```
 
@@ -272,6 +271,7 @@ With all of this put together the entire file would look something like this:
 
 ```js
 const request = require('request')
+
 const BASE_URL = 'https://api.unsplash.com'
 
 class MyCustomProvider {
@@ -286,8 +286,8 @@ class MyCustomProvider {
       method: 'GET',
       json: true,
       headers: {
-        Authorization: `Bearer ${token}`
-      }
+        Authorization: `Bearer ${token}`,
+      },
     }
 
     request(options, (err, resp, body) => {
@@ -307,8 +307,8 @@ class MyCustomProvider {
       method: 'GET',
       json: true,
       headers: {
-        Authorization: `Bearer ${token}`
-      }
+        Authorization: `Bearer ${token}`,
+      },
     }
 
     request(options, (err, resp, body) => {
@@ -331,8 +331,8 @@ class MyCustomProvider {
       method: 'GET',
       json: true,
       headers: {
-        Authorization: `Bearer ${token}`
-      }
+        Authorization: `Bearer ${token}`,
+      },
     }
 
     request(options, (err, resp, body) => {
@@ -350,14 +350,14 @@ class MyCustomProvider {
     const data = {
       username: null,
       items: [],
-      nextPagePath: null
+      nextPagePath: null,
     }
 
     const items = res
     items.forEach((item) => {
       const isFolder = !!item.published_at
       data.items.push({
-        isFolder: isFolder,
+        isFolder,
         icon: isFolder ? item.cover_photo.urls.thumb : item.urls.thumb,
         name: item.title || item.description,
         mimeType: isFolder ? null : 'image/jpeg',
@@ -365,7 +365,7 @@ class MyCustomProvider {
         thumbnail: isFolder ? item.cover_photo.urls.thumb : item.urls.thumb,
         requestPath: item.id,
         modifiedDate: item.updated_at,
-        size: null
+        size: null,
       })
     })
 
@@ -384,8 +384,8 @@ const uppyOptions = {
   providerOptions: {
     dropbox: {
       key: 'your Dropbox key',
-      secret: 'your Dropbox secret'
-    }
+      secret: 'your Dropbox secret',
+    },
   },
   customProviders: {
     myunsplash: {
@@ -398,16 +398,16 @@ const uppyOptions = {
         secret: 'YOUR UNSPLASH API SECRET',
       },
       // you provider module
-      module: require('./customprovider')
-    }
+      module: require('./customprovider'),
+    },
   },
   server: {
     host: 'localhost:3020',
-    protocol: 'http'
+    protocol: 'http',
   },
   filePath: './output',
   secret: 'some-secret',
-  debug: true
+  debug: true,
 }
 ```
 
@@ -443,7 +443,7 @@ module.exports = class MyCustomProvider extends UIPlugin {
       companionUrl: this.opts.companionUrl,
       companionHeaders: this.opts.companionHeaders || this.opts.serverHeaders,
       provider: 'myunsplash',
-      pluginId: this.id
+      pluginId: this.id,
     })
 
     this.files = []
@@ -451,15 +451,15 @@ module.exports = class MyCustomProvider extends UIPlugin {
     this.render = this.render.bind(this)
 
     // merge default options with the ones set by user
-    this.opts = Object.assign({}, opts)
+    this.opts = { ...opts }
   }
 
   install () {
     this.view = new ProviderViews(this, {
-      provider: this.provider
+      provider: this.provider,
     })
 
-    const target = this.opts.target
+    const { target } = this.opts
     if (target) {
       this.mount(target, this)
     }
@@ -490,25 +490,25 @@ With that done, we can now use our new plugin with Uppy. Create a file `client/m
 const Uppy = require('@uppy/core')
 const Dropbox = require('@uppy/dropbox')
 const Tus = require('@uppy/tus')
-const MyCustomProvider = require('./MyCustomProvider')
 const Dashboard = require('@uppy/dashboard')
+const MyCustomProvider = require('./MyCustomProvider')
 
 const uppy = Uppy({
-  debug: true
+  debug: true,
 })
 
 uppy.use(Dropbox, {
-  companionUrl: 'http://localhost:3020'
+  companionUrl: 'http://localhost:3020',
 })
 
 uppy.use(MyCustomProvider, {
-  companionUrl: 'http://localhost:3020'
+  companionUrl: 'http://localhost:3020',
 })
 
 uppy.use(Dashboard, {
   inline: true,
   target: 'body',
-  plugins: ['Dropbox', 'MyCustomProvider']
+  plugins: ['Dropbox', 'MyCustomProvider'],
 })
 
 uppy.use(Tus, { endpoint: 'https://master.tus.io/files/' })
@@ -526,12 +526,12 @@ module.exports = (api) => {
     presets: [
       ['@babel/preset-env', {
         modules: false,
-        loose: true
-      }]
+        loose: true,
+      }],
     ],
     plugins: [
       ['@babel/plugin-transform-react-jsx', { pragma: 'h' }],
-    ].filter(Boolean)
+    ].filter(Boolean),
   }
 }
 ```

website/src/_posts/2020-04-1.10.md

@@ -12,8 +12,8 @@ Uppy `1.10.1` adds long-awaited support for [Facebook](/docs/facebook/) and [One
 ```js
 const uppy = Uppy()
 uppy.use(Dashboard)
-uppy.use(Facebook, { target: Dashboard, companionUrl: 'https://companion.uppy.io/'})
-uppy.use(OneDrive, { target: Dashboard, companionUrl: 'https://companion.uppy.io/'})
+uppy.use(Facebook, { target: Dashboard, companionUrl: 'https://companion.uppy.io/' })
+uppy.use(OneDrive, { target: Dashboard, companionUrl: 'https://companion.uppy.io/' })
 ```
 
 Try the live demos on [Transloadit.com](https://transloadit.com): import your files from Facebook or OneDrive, and then:

website/src/_posts/2020-04-1.13.md

@@ -25,7 +25,7 @@ There are three options available:
 
 ```js
 uppy.use(Dashboard, {
-  theme: 'dark'
+  theme: 'dark',
 })
 ```
 
@@ -49,11 +49,11 @@ uppy.use(Dashboard, {
         return h('input', {
           type: 'checkbox',
           onChange: (ev) => onChange(ev.target.checked ? 'on' : 'off'),
-          defaultChecked: value === 'on'
+          defaultChecked: value === 'on',
         })
-     }
-    }
-  ]
+      },
+    },
+  ],
 })
 ```
 
@@ -65,13 +65,13 @@ In the past, Uppy could already import files from Google Drive using Companion.
 
 Companion now automagically converts GSuite documents, such as docs, spreadsheets and presentations, to `.docx`, `.xlsx` and `.ppt` files that can be opened in various applications. The current list of conversions is hardcoded to:
 
-```js
+```json
 {
-  'application/vnd.google-apps.document': '.docx',
-  'application/vnd.google-apps.drawing': '.png',
-  'application/vnd.google-apps.script': '.json',
-  'application/vnd.google-apps.spreadsheet': '.xlsx',
-  'application/vnd.google-apps.presentation': '.ppt'
+  "application/vnd.google-apps.document": ".docx",
+  "application/vnd.google-apps.drawing": ".png",
+  "application/vnd.google-apps.script": ".json",
+  "application/vnd.google-apps.spreadsheet": ".xlsx",
+  "application/vnd.google-apps.presentation": ".ppt"
 }
 ```
 

website/src/_posts/2020-07-1.18-image-editor.md

@@ -30,9 +30,9 @@ const ImageEditor = require('@uppy/image-editor')
 
 const uppy = new Uppy()
 uppy.use(Dashboard)
-uppy.use(ImageEditor, { 
+uppy.use(ImageEditor, {
   target: Dashboard,
-  quality: 0.8 // for the resulting image, 0.8 is a sensible default
+  quality: 0.8, // for the resulting image, 0.8 is a sensible default
 })
 ```
 

website/src/_posts/2020-10-1.22.md

@@ -25,8 +25,8 @@ New `maxTotalFileSize` restriction makes sure the total size of all the files se
 ```js
 const uppy = new Uppy({
   restrictions: {
-    maxTotalFileSize: 104857600
-  }
+    maxTotalFileSize: 104857600,
+  },
 })
 ```
 

website/src/_posts/2020-12-1.24.md

@@ -77,9 +77,9 @@ This does not solve all our problems yet: dynamic configuration is still difficu
 If you are using Image Editor plugin with the Dashboard, there’s a new option [`autoOpenFileEditor`](https://uppy.io/docs/dashboard/#autoOpenFileEditor-false), which will open Image Editor automatically for the first image that was added to Uppy.
 
 ```js
-let uppy = new Uppy()
+const uppy = new Uppy()
   .use(Dashboard, {
-    autoOpenFileEditor: true
+    autoOpenFileEditor: true,
   })
 ```
 

website/src/_posts/2021-02-1.26.md

@@ -27,7 +27,7 @@ This option can be set on init:
 
 ```js
 uppy.use(Dashboard, {
-  disabled: true 
+  disabled: true,
 })
 ```
 
@@ -52,8 +52,8 @@ userNameInput.addEventListener('change', () => {
 uppy.use(XHRUpload, {
   headers: file => ({
     'authorization': `bearer ${global.userToken}`,
-    'header-name': file.meta.someMetaValue
-  })
+    'header-name': file.meta.someMetaValue,
+  }),
 })
 ```
 

website/src/_posts/2021-04-1.27.md

@@ -23,7 +23,7 @@ With `@uppy/drop-target` it is now possible to turn your whole app / page (or an
 
 ```js
 uppy.use(DropTarget, {
-  target: document.body
+  target: document.body,
 })
 ```
 

website/src/_posts/2021-07-1.30.md

@@ -17,14 +17,14 @@ Uppy now has an official Angular integration! It’s still in beta, so please tr
 npm install @uppy/angular
 ```
 
-```js
+```ts
 // app.component.ts
 
-import { Component } from '@angular/core';
+import { Component } from '@angular/core'
 import { Uppy } from '@uppy/core'
 
 @Component({
-  selector: 'app-root'
+  selector: 'app-root',
 })
 export class AppComponent {
   uppy: Uppy = new Uppy({ debug: true, autoProceed: true })