From 9a4b8ef4db47aa3ac6e38bb1ffb14ece68e88270 Mon Sep 17 00:00:00 2001 From: Evgenia Karunus Date: Tue, 15 Oct 2024 13:09:54 +0500 Subject: [PATCH] `.handleInputChange()` - use `.currentTarget`; clear the input using `''` (#5381) * everywhere - proper typing, `target` => `currentTarget`, `null` => `''` * everywhere - update the comment id --- packages/@uppy/dashboard/src/Dashboard.tsx | 7 +++++-- .../dashboard/src/components/AddFiles.tsx | 15 +++++++-------- packages/@uppy/drag-drop/src/DragDrop.tsx | 17 ++++++----------- packages/@uppy/file-input/src/FileInput.tsx | 18 +++++++----------- 4 files changed, 25 insertions(+), 32 deletions(-) diff --git a/packages/@uppy/dashboard/src/Dashboard.tsx b/packages/@uppy/dashboard/src/Dashboard.tsx index 108b1ae6c5..290761919f 100644 --- a/packages/@uppy/dashboard/src/Dashboard.tsx +++ b/packages/@uppy/dashboard/src/Dashboard.tsx @@ -17,6 +17,7 @@ import toArray from '@uppy/utils/lib/toArray' import getDroppedFiles from '@uppy/utils/lib/getDroppedFiles' import { defaultPickerIcon } from '@uppy/provider-views' +import type { TargetedEvent } from 'preact/compat' import { nanoid } from 'nanoid/non-secure' import memoizeOne from 'memoize-one' import * as trapFocus from './utils/trapFocus.ts' @@ -766,9 +767,11 @@ export default class Dashboard extends UIPlugin< } } - private handleInputChange = (event: InputEvent) => { + private handleInputChange = ( + event: TargetedEvent, + ) => { event.preventDefault() - const files = toArray((event.target as HTMLInputElement).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/src/components/AddFiles.tsx b/packages/@uppy/dashboard/src/components/AddFiles.tsx index 4a5243ef80..43597d4ced 100644 --- a/packages/@uppy/dashboard/src/components/AddFiles.tsx +++ b/packages/@uppy/dashboard/src/components/AddFiles.tsx @@ -31,16 +31,15 @@ class AddFiles extends Component { this.mobilePhotoFileInput.click() } - private onFileInputChange = (event: $TSFixMe) => { + private onFileInputChange = ( + event: TargetedEvent, + ) => { 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 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 // eslint-disable-line no-param-reassign + // Clear the input so that Chrome/Safari/etc. can detect file section when the same file is repeatedly selected + // (see https://github.com/transloadit/uppy/issues/768#issuecomment-2264902758) + // eslint-disable-next-line no-param-reassign + event.currentTarget.value = '' } private renderHiddenInput = (isFolder: $TSFixMe, refCallback: $TSFixMe) => { diff --git a/packages/@uppy/drag-drop/src/DragDrop.tsx b/packages/@uppy/drag-drop/src/DragDrop.tsx index 1bc94200cc..cfdc95b7ae 100644 --- a/packages/@uppy/drag-drop/src/DragDrop.tsx +++ b/packages/@uppy/drag-drop/src/DragDrop.tsx @@ -2,7 +2,7 @@ import { UIPlugin, type Uppy } from '@uppy/core' import type { DefinePluginOpts } from '@uppy/core/lib/BasePlugin.js' import type { UIPluginOptions } from '@uppy/core/lib/UIPlugin.js' import type { Body, Meta } from '@uppy/utils/lib/UppyFile' -import type { ChangeEvent } from 'preact/compat' +import type { TargetedEvent } from 'preact/compat' import toArray from '@uppy/utils/lib/toArray' import isDragDropSupported from '@uppy/utils/lib/isDragDropSupported' import getDroppedFiles from '@uppy/utils/lib/getDroppedFiles' @@ -80,22 +80,17 @@ export default class DragDrop extends UIPlugin< } } - private onInputChange = (event: ChangeEvent) => { - const files = toArray((event.target as HTMLInputElement).files!) + private onInputChange = (event: TargetedEvent) => { + const files = toArray(event.currentTarget.files || []) if (files.length > 0) { this.uppy.log('[DragDrop] Files selected through input') this.addFiles(files) } - // 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 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). - // @ts-expect-error TS freaks out, but this is fine + // Clear the input so that Chrome can detect file section when the same file is repeatedly selected + // (see https://github.com/transloadit/uppy/issues/768#issuecomment-2264902758) // eslint-disable-next-line no-param-reassign - event.target.value = null + event.currentTarget.value = '' } private handleDragOver = (event: DragEvent) => { diff --git a/packages/@uppy/file-input/src/FileInput.tsx b/packages/@uppy/file-input/src/FileInput.tsx index 09cc9fbc0e..e952fd6ba2 100644 --- a/packages/@uppy/file-input/src/FileInput.tsx +++ b/packages/@uppy/file-input/src/FileInput.tsx @@ -4,7 +4,7 @@ import { UIPlugin, Uppy, type UIPluginOptions } from '@uppy/core' import toArray from '@uppy/utils/lib/toArray' import type { Body, Meta } from '@uppy/utils/lib/UppyFile' import type { DefinePluginOpts } from '@uppy/core/lib/BasePlugin.js' - +import type { TargetedEvent } from 'preact/compat' // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore We don't want TS to generate types for the package.json import packageJson from '../package.json' @@ -65,19 +65,15 @@ export default class FileInput extends UIPlugin< } } - private handleInputChange(event: Event) { + private handleInputChange(event: TargetedEvent) { this.uppy.log('[FileInput] Something selected through input...') - const files = toArray((event.target as HTMLFileInputElement).files) + const files = toArray(event.currentTarget.files || []) this.addFiles(files) - // 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 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). - // @ts-expect-error yes - event.target.value = null // eslint-disable-line no-param-reassign + // Clear the input so that Chrome can detect file section when the same file is repeatedly selected + // (see https://github.com/transloadit/uppy/issues/768#issuecomment-2264902758) + // eslint-disable-next-line no-param-reassign + event.currentTarget.value = '' } private handleClick() {