.handleInputChange() - use .currentTarget; clear the input using ''

[lakesare]

This PR:

• created a proper demo of the bug event.target.value = '' is preventing, added that demo to the comments
• properly type the text input event: we go from ChangeEvent to TargetedEvent<HTMLInputElement, Event>
• everything else (target => currentTarget, null => '') is a consequence of the correct typing

New version is tested in:

• Firefox
• Chrome
• Safari

Testing consists of:

1. make sure uploading a duplicate file always triggers onBeforeFileAdded
2. make sure currentTarget.files actually has files

[github-actions]

Diff output files

diff --git a/packages/@uppy/dashboard/lib/Dashboard.js b/packages/@uppy/dashboard/lib/Dashboard.js
index a4e8014..d666201 100644
--- a/packages/@uppy/dashboard/lib/Dashboard.js
+++ b/packages/@uppy/dashboard/lib/Dashboard.js
@@ -494,7 +494,7 @@ export default class Dashboard extends UIPlugin {
     };
     this.handleInputChange = event => {
       event.preventDefault();
-      const files = toArray(event.target.files);
+      const files = toArray(event.currentTarget.files || []);
       if (files.length > 0) {
         this.uppy.log("[Dashboard] Files selected through input");
         this.addFiles(files);
diff --git a/packages/@uppy/dashboard/lib/components/AddFiles.js b/packages/@uppy/dashboard/lib/components/AddFiles.js
index 8a0edf9..8e4ee54 100644
--- a/packages/@uppy/dashboard/lib/components/AddFiles.js
+++ b/packages/@uppy/dashboard/lib/components/AddFiles.js
@@ -16,7 +16,7 @@ class AddFiles extends Component {
     };
     this.onFileInputChange = event => {
       this.props.handleInputChange(event);
-      event.target.value = null;
+      event.currentTarget.value = "";
     };
     this.renderHiddenInput = (isFolder, refCallback) => {
       var _this$props$allowedFi;
diff --git a/packages/@uppy/drag-drop/lib/DragDrop.js b/packages/@uppy/drag-drop/lib/DragDrop.js
index 5f2d2c3..2515b3b 100644
--- a/packages/@uppy/drag-drop/lib/DragDrop.js
+++ b/packages/@uppy/drag-drop/lib/DragDrop.js
@@ -36,12 +36,12 @@ export default class DragDrop extends UIPlugin {
       }
     };
     this.onInputChange = event => {
-      const files = toArray(event.target.files);
+      const files = toArray(event.currentTarget.files || []);
       if (files.length > 0) {
         this.uppy.log("[DragDrop] Files selected through input");
         this.addFiles(files);
       }
-      event.target.value = null;
+      event.currentTarget.value = "";
     };
     this.handleDragOver = event => {
       var _this$opts$onDragOver, _this$opts;
diff --git a/packages/@uppy/file-input/lib/FileInput.js b/packages/@uppy/file-input/lib/FileInput.js
index 13cfa50..e859b0c 100644
--- a/packages/@uppy/file-input/lib/FileInput.js
+++ b/packages/@uppy/file-input/lib/FileInput.js
@@ -40,9 +40,9 @@ export default class FileInput extends UIPlugin {
   }
   handleInputChange(event) {
     this.uppy.log("[FileInput] Something selected through input...");
-    const files = toArray(event.target.files);
+    const files = toArray(event.currentTarget.files || []);
     this.addFiles(files);
-    event.target.value = null;
+    event.currentTarget.value = "";
   }
   handleClick() {
     this.input.click();

[mifi]

Suggested change

	const files = toArray(event.currentTarget.files || [])
	const files = toArray(event.currentTarget.files ?? [])

[mifi]

Suggested change

	const files = toArray(event.currentTarget.files || [])
	const files = toArray(event.currentTarget.files ?? [])

[mifi]

Suggested change

	const files = toArray(event.currentTarget.files || [])
	const files = toArray(event.currentTarget.files ?? [])

[mifi]

I assume you checked that using currentTarget in place of target is safe (e.g. they seem to differ with regards to bubbling)