refactor: wrap upload button with form to reset it easily after upload

Author: PatrykBuniX

src/script/page/message-list/AssetUploadButton.test.tsx

@@ -32,36 +32,35 @@ jest.mock('../../Config', () => ({
 const pngFile = new File(['(⌐□_□)'], 'chucknorris.png', {type: 'image/png'});
 
 describe('AssetUploadButton', () => {
-  it('Does call onSelectFiles with uploaded file', async () => {
+  it('Does call onSelectFiles with uploaded file', () => {
     const onSelectFiles = jest.fn();
 
-    const {getByTestId} = render(<AssetUploadButton onSelectFiles={onSelectFiles} />);
+    const {container} = render(<AssetUploadButton onSelectFiles={onSelectFiles} />);
+    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
 
-    const fileInput = getByTestId('conversation-input-bar-files') as HTMLInputElement;
     fireEvent.change(fileInput, {
       target: {files: [pngFile]},
     });
 
     expect(onSelectFiles).toHaveBeenCalledWith([pngFile]);
   });
 
-  it('Does reset file input after upload', async () => {
+  it('Does reset a form with input after upload', () => {
     const onSelectFiles = jest.fn();
 
-    const {getByTestId} = render(<AssetUploadButton onSelectFiles={onSelectFiles} />);
+    const {container} = render(<AssetUploadButton onSelectFiles={onSelectFiles} />);
 
-    const getFileInput = () => getByTestId('conversation-input-bar-files') as HTMLInputElement;
-    let fileInput = getFileInput();
+    const form = container.querySelector('form');
+    jest.spyOn(form!, 'reset');
+
+    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
 
     fireEvent.change(fileInput, {
       target: {files: [pngFile]},
     });
 
-    expect(fileInput.files?.[0].name).toEqual(pngFile.name);
     expect(onSelectFiles).toHaveBeenCalledWith([pngFile]);
-
-    //input did reset we grab new reference
-    fileInput = getFileInput();
-    expect(fileInput.files).toHaveLength(0);
+    expect(fileInput.files?.[0].name).toEqual(pngFile.name);
+    expect(form!.reset).toHaveBeenCalled();
   });
 });

src/script/page/message-list/AssetUploadButton.tsx

@@ -17,7 +17,7 @@
  *
  */
 
-import {useState, useRef} from 'react';
+import {useRef} from 'react';
 import {Config} from '../../Config';
 import {t} from 'Util/LocalizerUtil';
 import Icon from 'Components/Icon';
@@ -27,9 +27,9 @@ interface AssetUploadButtonProps {
 }
 
 export const AssetUploadButton = ({onSelectFiles}: AssetUploadButtonProps) => {
-  const [inputKey, setInputKey] = useState(Date.now());
   const acceptedFileTypes = Config.getConfig().FEATURE.ALLOWED_FILE_UPLOAD_EXTENSIONS.join(',');
   const fileRef = useRef<HTMLInputElement>(null!);
+  const formRef = useRef<HTMLFormElement>(null);
 
   const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const {files} = event.target;
@@ -40,30 +40,30 @@ export const AssetUploadButton = ({onSelectFiles}: AssetUploadButtonProps) => {
 
     onSelectFiles(Array.from(files));
 
-    //reset file input's value by re-rendering the component
-    setInputKey(Date.now());
+    //reset file input's value resetting form wrapper
+    formRef.current?.reset();
   };
 
   return (
-    <button
-      type="button"
-      aria-label={t('tooltipConversationFile')}
-      title={t('tooltipConversationFile')}
-      className="conversation-button controls-right-button no-radius file-button"
-      onClick={() => fileRef.current?.click()}
-      data-uie-name="do-share-file"
-    >
-      <Icon.Attachment />
-      <input
-        key={inputKey}
-        ref={fileRef}
-        accept={acceptedFileTypes ?? null}
-        id="conversation-input-bar-files"
-        data-uie-name="conversation-input-bar-files"
-        tabIndex={-1}
-        onChange={handleFileChange}
-        type="file"
-      />
-    </button>
+    <form ref={formRef}>
+      <button
+        type="button"
+        aria-label={t('tooltipConversationFile')}
+        title={t('tooltipConversationFile')}
+        className="conversation-button controls-right-button no-radius file-button"
+        onClick={() => fileRef.current?.click()}
+        data-uie-name="do-share-file"
+      >
+        <Icon.Attachment />
+        <input
+          ref={fileRef}
+          accept={acceptedFileTypes ?? null}
+          id="conversation-input-bar-files"
+          tabIndex={-1}
+          onChange={handleFileChange}
+          type="file"
+        />
+      </button>
+    </form>
   );
 };