From f3f431087d8236580dc3075ad8ed113c9b2b39c4 Mon Sep 17 00:00:00 2001 From: Sean Pennino Date: Tue, 7 Dec 2021 17:40:16 -0800 Subject: [PATCH 1/3] Clear files after upload --- frontend-react/src/pages/Upload.tsx | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/frontend-react/src/pages/Upload.tsx b/frontend-react/src/pages/Upload.tsx index 1822cf4c3ec..ac01bebf8e4 100644 --- a/frontend-react/src/pages/Upload.tsx +++ b/frontend-react/src/pages/Upload.tsx @@ -1,10 +1,11 @@ -import React, { useState } from "react"; +import React, { useState, useRef, Ref } from "react"; import { Button, Form, FormGroup, Label, FileInput, + FileInputRef, } from "@trussworks/react-uswds"; import { useResource } from "rest-hooks"; import { useOktaAuth } from "@okta/okta-react"; @@ -28,6 +29,7 @@ export const Upload = () => { const [reportId, setReportId] = useState(null); const [successTimestamp, setSuccessTimestamp] = useState(""); const [buttonText, setButtonText] = useState("Upload"); + const fileInputRef = useRef() const [headerMessage, setHeaderMessage] = useState( "Upload your COVID-19 results" ); @@ -80,7 +82,12 @@ export const Upload = () => { } }; - const handleChange = async (event: React.ChangeEvent) => { + const handleClearFiles = (): void => { + fileInputRef.current?.clearFiles() + setFileContent(""); + }; + + const handleFileChange = async (event: React.ChangeEvent) => { try { if (!event?.currentTarget?.files?.length) { // no files selected @@ -162,7 +169,8 @@ export const Upload = () => { setErrors(response.errors); } } - setButtonText("Upload another file"); + console.log("handleClearFiles2"); + handleClearFiles(); setIsSubmitting(false); }; @@ -339,7 +347,8 @@ export const Upload = () => { name="upload-csv-input" aria-describedby="upload-csv-input-label" accept=".csv, text/csv" - onChange={(e) => handleChange(e)} + onChange={(e) => handleFileChange(e)} + ref={fileInputRef as Ref} required /> From b5fb23b8964b6a0d8c9a8112e1ec7666f0777207 Mon Sep 17 00:00:00 2001 From: Sean Pennino Date: Tue, 7 Dec 2021 18:46:43 -0800 Subject: [PATCH 2/3] Change FileInput key to force reset --- frontend-react/src/pages/Upload.tsx | 21 +++++++-------------- 1 file changed, 7 insertions(+), 14 deletions(-) diff --git a/frontend-react/src/pages/Upload.tsx b/frontend-react/src/pages/Upload.tsx index ac01bebf8e4..8f826d7bf5e 100644 --- a/frontend-react/src/pages/Upload.tsx +++ b/frontend-react/src/pages/Upload.tsx @@ -1,11 +1,10 @@ -import React, { useState, useRef, Ref } from "react"; +import React, { useState } from "react"; import { Button, Form, FormGroup, Label, FileInput, - FileInputRef, } from "@trussworks/react-uswds"; import { useResource } from "rest-hooks"; import { useOktaAuth } from "@okta/okta-react"; @@ -22,14 +21,13 @@ 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([]); const [destinations, setDestinations] = useState(""); const [reportId, setReportId] = useState(null); const [successTimestamp, setSuccessTimestamp] = useState(""); - const [buttonText, setButtonText] = useState("Upload"); - const fileInputRef = useRef() const [headerMessage, setHeaderMessage] = useState( "Upload your COVID-19 results" ); @@ -82,11 +80,6 @@ export const Upload = () => { } }; - const handleClearFiles = (): void => { - fileInputRef.current?.clearFiles() - setFileContent(""); - }; - const handleFileChange = async (event: React.ChangeEvent) => { try { if (!event?.currentTarget?.files?.length) { @@ -169,8 +162,9 @@ export const Upload = () => { setErrors(response.errors); } } - console.log("handleClearFiles2"); - handleClearFiles(); + console.log("handleClearFiles7"); + // 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); }; @@ -332,7 +326,6 @@ export const Upload = () => { )} -
handleSubmit(e)}> handleFileChange(e)} - ref={fileInputRef as Ref} required /> @@ -364,7 +357,7 @@ export const Upload = () => { )} - {!isSubmitting && {buttonText}} + {!isSubmitting && Upload}
From 6166f0c36b5657a8362e9d6549698fca68ab84b9 Mon Sep 17 00:00:00 2001 From: Sean Pennino Date: Tue, 7 Dec 2021 18:55:20 -0800 Subject: [PATCH 3/3] Cleanup --- frontend-react/src/pages/Upload.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/frontend-react/src/pages/Upload.tsx b/frontend-react/src/pages/Upload.tsx index 8f826d7bf5e..e025df86e23 100644 --- a/frontend-react/src/pages/Upload.tsx +++ b/frontend-react/src/pages/Upload.tsx @@ -28,6 +28,7 @@ export const Upload = () => { const [destinations, setDestinations] = useState(""); const [reportId, setReportId] = useState(null); const [successTimestamp, setSuccessTimestamp] = useState(""); + const [buttonText, setButtonText] = useState("Upload"); const [headerMessage, setHeaderMessage] = useState( "Upload your COVID-19 results" ); @@ -80,7 +81,9 @@ export const Upload = () => { } }; - const handleFileChange = async (event: React.ChangeEvent) => { + const handleFileChange = async ( + event: React.ChangeEvent + ) => { try { if (!event?.currentTarget?.files?.length) { // no files selected @@ -162,9 +165,9 @@ export const Upload = () => { setErrors(response.errors); } } - console.log("handleClearFiles7"); + 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) + setFileInputResetValue(fileInputResetValue + 1); setIsSubmitting(false); }; @@ -357,7 +360,7 @@ export const Upload = () => { )} - {!isSubmitting && Upload} + {!isSubmitting && {buttonText}}