dashboard: add autoopen for file editors (image-editor) (#2681)

* final-file-added event for when the last file in the batch has been added

* intoduce autoOpenFileEditor — open when the last file (image) from a batch has beed added

* make cropping box more visible

* add docs

* final-file-added --> files-added

packages/@uppy/core/src/index.js

@@ -698,6 +698,7 @@ class Uppy {
     })
 
     this.emit('file-added', newFile)
+    this.emit('files-added', [newFile])
     this.log(`Added file: ${newFile.name}, ${newFile.id}, mime type: ${newFile.type}`)
 
     this._startIfAutoProceed()
@@ -737,6 +738,8 @@ class Uppy {
       this.emit('file-added', newFile)
     })
 
+    this.emit('files-added', newFiles)
+
     if (newFiles.length > 5) {
       this.log(`Added batch of ${newFiles.length} files`)
     } else {

packages/@uppy/dashboard/src/index.js

@@ -143,7 +143,8 @@ module.exports = class Dashboard extends Plugin {
       showSelectedFiles: true,
       showRemoveButtonAfterComplete: false,
       browserBackButtonClose: false,
-      theme: 'light'
+      theme: 'light',
+      autoOpenFileEditor: false
     }
 
     // merge default options with the ones set by user
@@ -651,13 +652,20 @@ module.exports = class Dashboard extends Plugin {
     }
   }
 
-  handleComplete = ({ failed, uploadID }) => {
+  handleComplete = ({ failed }) => {
     if (this.opts.closeAfterFinish && failed.length === 0) {
       // All uploads are done
       this.requestCloseModal()
     }
   }
 
+  _openFileEditorWhenFilesAdded = (files) => {
+    const firstFile = files[0]
+    if (this.canEditFile(firstFile)) {
+      this.openFileEditor(firstFile)
+    }
+  }
+
   initEvents = () => {
     // Modal open button
     if (this.opts.trigger && !this.opts.inline) {
@@ -686,6 +694,10 @@ module.exports = class Dashboard extends Plugin {
     if (this.opts.inline) {
       this.el.addEventListener('keydown', this.handleKeyDownInInline)
     }
+
+    if (this.opts.autoOpenFileEditor) {
+      this.uppy.on('files-added', this._openFileEditorWhenFilesAdded)
+    }
   }
 
   removeEvents = () => {
@@ -709,6 +721,10 @@ module.exports = class Dashboard extends Plugin {
     if (this.opts.inline) {
       this.el.removeEventListener('keydown', this.handleKeyDownInInline)
     }
+
+    if (this.opts.autoOpenFileEditor) {
+      this.uppy.off('files-added', this._openFileEditorWhenFilesAdded)
+    }
   }
 
   superFocusOnEachUpdate = () => {

packages/@uppy/image-editor/src/style.scss

@@ -55,4 +55,15 @@
     outline: none;
     background-color: rgba($blue, 0.8);
   }
+}
+
+// Cropper overrides
+
+.uppy-ImageCropper .cropper-point {
+  width: 8px;
+  height: 8px;
+}
+
+.uppy-ImageCropper .cropper-view-box {
+  outline: 2px solid #39f;
 }

website/src/docs/dashboard.md

@@ -99,7 +99,8 @@ uppy.use(Dashboard, {
   showRemoveButtonAfterComplete: false,
   locale: defaultLocale,
   browserBackButtonClose: false,
-  theme: 'light'
+  theme: 'light',
+  autoOpenFileEditor: false
 })
 ```
 
@@ -410,12 +411,19 @@ Remove all children of the `target` element before mounting the Dashboard. By de
 Uppy Dashboard supports “Dark Mode”. You can try it live on [the Dashboard example page](https://uppy.io/examples/dashboard/).
 
 There are three options:
+
 - `light` — the default
 - `dark`
 - `auto` — will respect the user’s system settings and switch automatically
 
 ![Uppy dark mode screenshot](/images/uppy-dashboard-dark-mar-2020.png)
 
+### `autoOpenFileEditor: false`
+
+Automatically open file editor (see [`@uppy/image-editor`](/docs/image-editor/)) for the first file in a batch. If one file is added, editor opens for that file, if 10 files are added — editor opens for the first file.
+
+Use case: user adds an image — Uppy opens Image Editor right away — user crops / adjusts the image — upload.
+
 ## Methods
 
 ### `openModal()`

website/src/docs/uppy.md

@@ -728,6 +728,13 @@ uppy.on('file-added', (file) => {
 })
 ```
 
+### `files-added`
+
+**Parameters**
+- `files` - An array of [File Objects][File Objects] representing all files that were added at once, in a batch.
+
+Fired each time when one or multiple files are added — one event, for all files
+
 ### `file-removed`
 
 Fired each time a file is removed.