Allow file upload to select same file after error (#4022)

* Allow file upload to select same file after error

It fixes an error that occur when a user upload a file and have some connection or general error, if select the same file again it does not change.

* Update changelog entry

* Update workaround comment to include issue link

* Use correct dependency location

changelog/fix-460-file-upload-does-not-start-selecting-same-file

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Empty file input to allow the user to select the same file again if there's an error.

client/components/file-upload/index.tsx

@@ -41,6 +41,29 @@ export const FileUploadControl = ( {
 		/>
 	);
 
+	const handleButtonClick = (
+		event: React.MouseEvent< HTMLButtonElement >,
+		openFileDialog: () => void
+	) => {
+		// Get file input next to the button element and clear it's value,
+		// allowing to select the same file again in case of
+		// connection or general error or just need to select it again.
+		// This workaround is useful until we update @wordpress/components to a
+		// version the supports this: https://github.com/WordPress/gutenberg/issues/39267
+		const fileInput:
+			| HTMLInputElement
+			| null
+			| undefined = ( event.target as HTMLButtonElement )
+			.closest( '.components-form-file-upload' )
+			?.querySelector( 'input[type="file"]' );
+
+		if ( fileInput ) {
+			fileInput.value = '';
+		}
+
+		openFileDialog();
+	};
+
 	return (
 		<BaseControl
 			id={ `form-file-upload-base-control-${ field.key }` }
@@ -56,13 +79,6 @@ export const FileUploadControl = ( {
 			</DropZoneProvider>
 			<div className="file-upload">
 				<FormFileUpload
-					id={ `form-file-upload-${ field.key }` }
-					className={ isDone && ! hasError ? 'is-success' : '' }
-					isSecondary
-					isDestructive={ hasError }
-					isBusy={ isLoading }
-					disabled={ disabled || isLoading }
-					icon={ getIcon }
 					accept={ accept }
 					onChange={ (
 						event: React.ChangeEvent< HTMLInputElement >
@@ -72,9 +88,25 @@ export const FileUploadControl = ( {
 							( event.target.files || new FileList() )[ 0 ]
 						);
 					} }
-				>
-					{ __( 'Upload file', 'woocommerce-payments' ) }
-				</FormFileUpload>
+					render={ ( { openFileDialog } ) => (
+						<Button
+							id={ `form-file-upload-${ field.key }` }
+							className={
+								isDone && ! hasError ? 'is-success' : ''
+							}
+							isSecondary
+							isDestructive={ hasError }
+							isBusy={ isLoading }
+							disabled={ disabled || isLoading }
+							icon={ getIcon }
+							onClick={ (
+								event: React.MouseEvent< HTMLButtonElement >
+							) => handleButtonClick( event, openFileDialog ) }
+						>
+							{ __( 'Upload file', 'woocommerce-payments' ) }
+						</Button>
+					) }
+				></FormFileUpload>
 
 				{ hasError ? (
 					<FileUploadError error={ error } />

client/components/file-upload/test/index.tsx

@@ -5,6 +5,7 @@
  */
 import * as React from 'react';
 import { render, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
@@ -87,6 +88,29 @@ describe( 'FileUploadControl', () => {
 		);
 	} );
 
+	test( 'triggers onFileChange two times when selecting the same file again', async () => {
+		const { container: control } = render(
+			<FileUploadControl { ...props } />
+		);
+
+		const file = new File( [ 'hello' ], 'hello.png', {
+			type: 'image/png',
+		} );
+
+		// Note: FormFileUpload does not associate file input with label so workaround is required to select it.
+		const input = control.querySelector( 'input[type="file"]' );
+		if ( input !== null ) {
+			await userEvent.upload( input, file );
+			await userEvent.upload( input, file );
+		}
+
+		expect( props.onFileChange ).toHaveBeenNthCalledWith(
+			2,
+			field.key,
+			file
+		);
+	} );
+
 	test( 'triggers onFileRemove', () => {
 		props.fileName = 'file.pdf';
 		props.isDone = true;