Merge pull request #1405 from academic-relations/1404-fileupload-issue

fix: reset file input using ref to allow re-selection of the same file

packages/web/src/common/components/FileUpload.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from "react";
+import React, { useMemo, useRef, useState } from "react";
 
 import { ApiFil001RequestBody } from "@sparcs-clubs/interface/api/file/apiFil001";
 import { overlay } from "overlay-kit";
@@ -116,6 +116,7 @@ const FileUpload: React.FC<FileUploadProps> = ({
   const { mutate: putFileS3Mutation } = usePutFileS3();
 
   const [files, setFiles] = useState<FileDetail[]>(initialFiles);
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
 
   const updateFiles = (_files: FileDetail[]) => {
     setFiles(_files);
@@ -126,7 +127,6 @@ const FileUpload: React.FC<FileUploadProps> = ({
     const newFiles = _files.filter(file => !files.find(f => f.id === file.id));
     const updatedFiles = multiple ? [...files, ...newFiles] : newFiles;
     updateFiles(updatedFiles);
-    onChange(updatedFiles);
   };
   const removeFile = (_file: FileDetail) => {
     const updatedFiles = files.filter(file => file.id !== _file.id);
@@ -208,6 +208,10 @@ const FileUpload: React.FC<FileUploadProps> = ({
       file => ({ file, previewUrl: URL.createObjectURL(file) }),
     );
     onSubmit(newFiles);
+
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
   };
 
   const handleClick = () => {
@@ -243,6 +247,7 @@ const FileUpload: React.FC<FileUploadProps> = ({
           <Icon type="file_upload_outlined" size={20} color="white" />
         </UploadIcon>
         <HiddenInput
+          ref={fileInputRef}
           type="file"
           accept={allowedTypes.join(",")}
           multiple={multiple}