dashboard: add dashboard:file-edit-start and dashboard:file-edit-complete events (#1776)

* add dashboard:file-edit-start and dashboard:file-edit-complete events

* Small docs change

1. Changed unusual quotes `“` to the ones we use in other places `"`
2. `then user` => `the user`

* prettify quotes

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

@@ -344,6 +344,12 @@ module.exports = class Dashboard extends Plugin {
   }
 
   toggleFileCard (fileId) {
+    if (fileId) {
+      this.uppy.emit('dashboard:file-edit-start')
+    } else {
+      this.uppy.emit('dashboard:file-edit-complete')
+    }
+
     this.setPluginState({
       fileCardFor: fileId || null,
       activeOverlayType: fileId ? 'FileCard' : null

website/src/docs/dashboard.md

@@ -187,7 +187,7 @@ Optionally, specify a string of text that explains something about the upload fo
 
 ### `metaFields: []`
 
-An array of UI field objects that will be shown when a user clicks the “edit” button on that file. Configuring this enables the "edit" button on file cards. Each object requires:
+An array of UI field objects that will be shown when a user clicks the “edit” button on that file. Configuring this enables the “edit” button on file cards. Each object requires:
 
 - `id`, the name of the meta field. Note: this will also be used in CSS/HTML as part of the `id` attribute, so it’s better to [avoid using characters like periods, semicolons, etc](https://stackoverflow.com/a/79022).
 - `name`, the label shown in the interface.
@@ -260,7 +260,7 @@ strings: {
   closeModal: 'Close Modal',
   // Used as the screen reader label for the plus (+) button that shows the “Add more files” screen
   addMoreFiles: 'Add more files',
-  // Used as the header for import panels, e.g., "Import from Google Drive".
+  // Used as the header for import panels, e.g., “Import from Google Drive”.
   importFrom: 'Import from %{name}',
   // When `inline: false`, used as the screen reader label for the dashboard modal.
   dashboardWindowTitle: 'Uppy Dashboard Window (Press escape to close)',
@@ -273,7 +273,7 @@ strings: {
   copyLinkToClipboardFallback: 'Copy the URL below',
   // Used as the hover title and screen reader label for buttons that copy a file link.
   copyLink: 'Copy link',
-  // Used as the hover title and screen reader label for file source icons, e.g., "File source: Dropbox".
+  // Used as the hover title and screen reader label for file source icons, e.g., “File source: Dropbox”.
   fileSource: 'File source: %{name}',
   // Used as the label for buttons that accept and close panels (remote providers or metadata editor)
   done: 'Done',
@@ -281,7 +281,7 @@ strings: {
   removeFile: 'Remove file',
   // Used as the screen reader label for buttons that open the metadata editor panel for a file.
   editFile: 'Edit file',
-  // Shown in the panel header for the metadata editor. Rendered as "Editing image.png".
+  // Shown in the panel header for the metadata editor. Rendered as “Editing image.png”.
   editing: 'Editing %{file}',
   // Text for a button shown on the file preview, used to edit file metadata
   edit: 'Edit',
@@ -367,3 +367,11 @@ uppy.on('dashboard:modal-open', () => {
 ### `dashboard:modal-closed`
 
 Fired when the Dashboard modal is closed.
+
+### `dashboard:file-edit-start`
+
+Fired when the user clicks “edit” icon next to a file in the Dashboard. The FileCard panel is then open with file metadata available for editing.
+
+### `dashboard:file-edit-complete`
+
+Fired when the user finished editing the file metadata.