diff --git a/website/src/components/DataUploadForm.tsx b/website/src/components/DataUploadForm.tsx index b635ce6497..c1e458b6cc 100644 --- a/website/src/components/DataUploadForm.tsx +++ b/website/src/components/DataUploadForm.tsx @@ -3,7 +3,7 @@ import { DatePicker } from '@mui/x-date-pickers'; import { isErrorFromAlias } from '@zodios/core'; import type { AxiosError } from 'axios'; import { type DateTime } from 'luxon'; -import { type ChangeEvent, type FormEvent, useMemo, useState } from 'react'; +import { type ChangeEvent, type FormEvent, useMemo, useState, useRef, useEffect } from 'react'; import { withLocalizationProvider, withQueryProvider } from './common/withProvider.tsx'; import { getClientLogger } from '../clientLogger.ts'; @@ -46,6 +46,8 @@ const InnerDataUploadForm = ({ }: DataUploadFormProps) => { const [metadataFile, setMetadataFile] = useState(null); const [sequenceFile, setSequenceFile] = useState(null); + const metadataFileInputRef = useRef(null); + const sequenceFileInputRef = useRef(null); const { zodiosHooks } = useGroupManagementClient(clientConfig); const groupsOfUser = zodiosHooks.useGetGroupsOfUser({ @@ -114,6 +116,34 @@ const InnerDataUploadForm = ({ // window.location.href = routes.userSequenceReviewPage(organism); }; + useEffect(() => { + const interval = setInterval(() => { + // Check for files which are no longer readable - which generally indicates the file has been edited since being + // selected in the UI - and clear these. + metadataFile + ?.slice(0, 1) + .arrayBuffer() + .catch(() => { + setMetadataFile(null); + if (metadataFileInputRef.current) { + metadataFileInputRef.current.value = ''; + } + }); + + sequenceFile + ?.slice(0, 1) + .arrayBuffer() + .catch(() => { + setSequenceFile(null); + if (sequenceFileInputRef.current) { + sequenceFileInputRef.current.value = ''; + } + }); + }, 500); + + return () => clearInterval(interval); + }, [metadataFile, sequenceFile]); + return (
{action === 'submit' && @@ -152,7 +182,11 @@ const InnerDataUploadForm = ({ placeholder='Metadata File:' size='small' type='file' - onChange={(event: ChangeEvent) => setMetadataFile(event.target.files?.[0] || null)} + inputRef={metadataFileInputRef} + onChange={(event: ChangeEvent) => { + const file = event.target.files?.[0] || null; + setMetadataFile(file); + }} disabled={false} InputLabelProps={{ shrink: true, @@ -166,7 +200,11 @@ const InnerDataUploadForm = ({ placeholder='Sequences File:' size='small' type='file' - onChange={(event: ChangeEvent) => setSequenceFile(event.target.files?.[0] || null)} + inputRef={sequenceFileInputRef} + onChange={(event: ChangeEvent) => { + const file = event.target.files?.[0] || null; + setSequenceFile(file); + }} disabled={false} InputLabelProps={{ shrink: true,