Clear input[type=file] in FileInput too, updated comments and changed ev to event

packages/@uppy/dashboard/src/components/AddFiles.js

@@ -21,8 +21,13 @@ class AddFiles extends Component {
 
   handleFileInputChange (event) {
     this.props.handleInputChange(event)
+
+    // We clear the input after a file is selected, because otherwise
+    // change event is not fired in Chrome and Safari when a file
+    // with the same name is selected.
     // ___Why not use value="" on <input/> instead?
-    //    Because if we use that method of clearing the input, Chrome will not trigger onChange={} if we drop the same file twice (Issue #768).
+    //    Because if we use that method of clearing the input,
+    //    Chrome will not trigger change if we drop the same file twice (Issue #768).
     event.target.value = null
   }
 

packages/@uppy/drag-drop/src/index.js

@@ -88,10 +88,10 @@ module.exports = class DragDrop extends Plugin {
     })
   }
 
-  handleInputChange (ev) {
+  handleInputChange (event) {
     this.uppy.log('[DragDrop] Files selected through input')
 
-    const files = toArray(ev.target.files)
+    const files = toArray(event.target.files)
 
     files.forEach((file) => {
       try {
@@ -106,8 +106,12 @@ module.exports = class DragDrop extends Plugin {
       }
     })
 
+    // We clear the input after a file is selected, because otherwise
+    // change event is not fired in Chrome and Safari when a file
+    // with the same name is selected.
     // ___Why not use value="" on <input/> instead?
-    //    Because if we use that method of clearing the input, Chrome will not trigger onChange={} if we drop the same file twice (Issue #768).
+    //    Because if we use that method of clearing the input,
+    //    Chrome will not trigger change if we drop the same file twice (Issue #768).
     event.target.value = null
   }
 

packages/@uppy/file-input/src/index.js

@@ -36,10 +36,10 @@ module.exports = class FileInput extends Plugin {
     this.handleClick = this.handleClick.bind(this)
   }
 
-  handleInputChange (ev) {
+  handleInputChange (event) {
     this.uppy.log('[FileInput] Something selected through input...')
 
-    const files = toArray(ev.target.files)
+    const files = toArray(event.target.files)
 
     files.forEach((file) => {
       try {
@@ -53,6 +53,14 @@ module.exports = class FileInput extends Plugin {
         // Nothing, restriction errors handled in Core
       }
     })
+
+    // We clear the input after a file is selected, because otherwise
+    // change event is not fired in Chrome and Safari when a file
+    // with the same name is selected.
+    // ___Why not use value="" on <input/> instead?
+    //    Because if we use that method of clearing the input,
+    //    Chrome will not trigger change if we drop the same file twice (Issue #768).
+    event.target.value = null
   }
 
   handleClick (ev) {
@@ -73,25 +81,25 @@ module.exports = class FileInput extends Plugin {
     const restrictions = this.uppy.opts.restrictions
     const accept = restrictions.allowedFileTypes ? restrictions.allowedFileTypes.join(',') : null
 
-    // empty value="" on file input, so that the input is cleared after a file is selected,
-    // because Uppy will be handling the upload and so we can select same file
-    // after removing — otherwise browser thinks it’s already selected
-    return <div class="uppy-Root uppy-FileInput-container">
-      <input class="uppy-FileInput-input"
-        style={this.opts.pretty && hiddenInputStyle}
-        type="file"
-        name={this.opts.inputName}
-        onchange={this.handleInputChange}
-        multiple={restrictions.maxNumberOfFiles !== 1}
-        accept={accept}
-        ref={(input) => { this.input = input }}
-        value="" />
-      {this.opts.pretty &&
-        <button class="uppy-FileInput-btn" type="button" onclick={this.handleClick}>
-          {this.i18n('chooseFiles')}
-        </button>
-      }
-    </div>
+    return (
+      <div class="uppy-Root uppy-FileInput-container">
+        <input class="uppy-FileInput-input"
+          style={this.opts.pretty && hiddenInputStyle}
+          type="file"
+          name={this.opts.inputName}
+          onchange={this.handleInputChange}
+          multiple={restrictions.maxNumberOfFiles !== 1}
+          accept={accept}
+          ref={(input) => { this.input = input }} />
+        {this.opts.pretty &&
+          <button class="uppy-FileInput-btn"
+            type="button"
+            onclick={this.handleClick}>
+            {this.i18n('chooseFiles')}
+          </button>
+        }
+      </div>
+    )
   }
 
   install () {