fix(RV-428): Fix change upload flow to reflect UI (#494)

Author: knguyenrise8

frontend/package-lock.json

@@ -150,6 +150,11 @@ export const ExtractUploadFile: React.FC<ExtractUploadFileProps> = ({
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     if (event.target.files && event.target.files.length > 0) {
       const files = Array.from(event.target.files);
+      if (files.length > 0) {
+        setUploadedFile([]);
+        clearFiles();
+        setHasError(false);
+      }
       setUploadedFile(files);
       const filesObj: IFilesObj = { files };
       localStorage.setItem("files", JSON.stringify(filesObj));
@@ -243,8 +248,9 @@ export const ExtractUploadFile: React.FC<ExtractUploadFileProps> = ({
               >
                 {uploadedFile.length} file(s) selected
               </label>
-              {!isUploadComplete && (
                 <FileInput
+                  hidePreview
+                  accept=".pdf"
                   multiple
                   onChange={handleChange}
                   id={`file-input-multiple-${id}-2`}
@@ -253,7 +259,6 @@ export const ExtractUploadFile: React.FC<ExtractUploadFileProps> = ({
                   chooseText="Change file(s)"
                   dragText=" "
                 />
-              )}
             </div>
             <div
               className="display-flex flex-column width-full height-full margin-bottom-2 margin-top-1"
@@ -352,6 +357,7 @@ export const ExtractUploadFile: React.FC<ExtractUploadFileProps> = ({
               style={{ width: "80%" }}
             >
               <FileInput
+                accept=".pdf"
                 multiple
                 onChange={handleChange}
                 id={`file-input-multiple-${id}-1`}

frontend/src/components/ExtractUploadFile.tsx

@@ -177,7 +177,7 @@ export const FileInputForwardRef: React.ForwardRefRenderFunction<
       }
     }
     setFiles(fileArr);
-
+    console.log('change')
     if (onChange) onChange(e);
   };
 

frontend/src/components/FileInput.tsx

@@ -19,6 +19,7 @@ type FileInputProps = {
   disabled?: boolean;
   multiple?: boolean;
   accept?: string;
+  hidePreview?: boolean;
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
   onDrop?: (e: React.DragEvent) => void;
 };
@@ -43,6 +44,7 @@ export const FileInputForwardRef: React.ForwardRefRenderFunction<
     multiple,
     className,
     accept,
+    hidePreview,
     onChange,
     onDrop,
     ...inputProps
@@ -103,15 +105,14 @@ export const FileInputForwardRef: React.ForwardRefRenderFunction<
       filePreviews.push(
         <FilePreview
           key={key}
+          hidePreview
           imageId={imageId}
           file={files[parseInt(`${i}`)]}
         />,
       );
     }
   }
-
   const instructionClasses = classnames("usa-file-input__instructions", {
-    "display-none": filePreviews.length > 0,
   });
 
   const previewHeaderText =
@@ -187,7 +188,7 @@ export const FileInputForwardRef: React.ForwardRefRenderFunction<
         onDragLeave={handleDragLeave}
         onDrop={handleDrop}
       >
-        {filePreviews.length > 0 && (
+        {filePreviews.length > 0 && !hidePreview && (
           <div
             data-testid="file-input-preview-heading"
             className="usa-file-input__preview-heading"

frontend/src/components/FileInput/file-input.tsx

@@ -7,9 +7,11 @@ const SPACER_GIF =
 export const FilePreview = ({
   imageId,
   file,
+  hidePreview,
 }: {
   imageId: string;
   file: File;
+  hidePreview?: boolean;
 }): React.ReactElement => {
   const [previewSrc, setPreviewSrc] = useState(SPACER_GIF);
   const [showGenericPreview, setShowGenericPreview] = useState(false);
@@ -47,7 +49,7 @@ export const FilePreview = ({
   return (
     <div
       data-testid="file-input-preview"
-      className="usa-file-input__preview"
+      className={`${hidePreview ? 'display-none' : ''} usa-file-input__preview`}
       aria-hidden="true"
     >
       <img

frontend/src/components/FileInput/file-preview.tsx

@@ -22,7 +22,7 @@
 }
 
 .dashed-container-upload {
-  height: 160px;
+  height: 245px;
 }
 
 .upload-back-button {

frontend/src/components/UploadFile.scss

@@ -23,6 +23,10 @@ export const Uploadfile = () => {
         const file = fileList[i];
         filesObj["files"].push(file);
       }
+      if(files.length > 0) {
+        clearFiles();
+        localStorage.setItem("files", JSON.stringify('{}'));
+      }
       localStorage.setItem("files", JSON.stringify(filesObj));
       addFile(event.target?.files[0]);
     }
@@ -59,6 +63,7 @@ export const Uploadfile = () => {
           <div className="display-flex flex-column flex-align-center width-full height-full">
             <FileInput
               onChange={handleChange}
+              accept=".pdf"
               id={`file-input-${id}`}
               className="padding-bottom-2"
               name="file-input-single"

frontend/src/components/UploadFile.tsx

@@ -214,6 +214,7 @@ const AnnotateTemplate: React.FC = () => {
       <UploadHeader
         title="Annotate new template"
         onBack={() => navigate("/new-template/upload")}
+        onSubmit={handleSubmit} 
       />
       <Divider margin="0px" />
       <div className="display-flex flex-justify-center padding-top-4">

frontend/src/pages/AnnotateTemplate.tsx

@@ -201,6 +201,7 @@ exports[`UploadTemplate component > matches the snapshot 1`] = `
                   data-testid="file-input-box"
                 />
                 <input
+                  accept=".pdf"
                   class="usa-file-input__input"
                   data-testid="file-input-input"
                   id="file-input-:r0:"