diff --git a/frontend-react/src/pages/Upload.tsx b/frontend-react/src/pages/Upload.tsx index 1822cf4c3ec..e025df86e23 100644 --- a/frontend-react/src/pages/Upload.tsx +++ b/frontend-react/src/pages/Upload.tsx @@ -21,6 +21,7 @@ library.add(faSync); export const Upload = () => { const { authState } = useOktaAuth(); const [isSubmitting, setIsSubmitting] = useState(false); + const [fileInputResetValue, setFileInputResetValue] = useState(0); const [fileContent, setFileContent] = useState(""); const [warnings, setWarnings] = useState([]); const [errors, setErrors] = useState([]); @@ -80,7 +81,9 @@ export const Upload = () => { } }; - const handleChange = async (event: React.ChangeEvent) => { + const handleFileChange = async ( + event: React.ChangeEvent + ) => { try { if (!event?.currentTarget?.files?.length) { // no files selected @@ -163,6 +166,8 @@ export const Upload = () => { } } setButtonText("Upload another file"); + // Changing the key to force the FileInput to reset. Otherwise it won't recognize changes to the file's content unless the file name changes + setFileInputResetValue(fileInputResetValue + 1); setIsSubmitting(false); }; @@ -324,7 +329,6 @@ export const Upload = () => { )} -
handleSubmit(e)}> handleChange(e)} + onChange={(e) => handleFileChange(e)} required />