Revert "Multi file upload for disability proof documents (#117)" (#118)

This reverts commit dba9813.

src/components/App/Form/Summary/Sections/DisabilityProof.tsx

@@ -1,7 +1,7 @@
 import { useFormDataContext } from 'state/formDataState/context';
 import { Table, ChangeAnswerButton } from 'components/shared';
+import { FileCell } from 'components/sharedTableCells';
 import dompurify from 'dompurify';
-import MultiFileCell from 'components/sharedTableCells/MultiFileCell/MultiFileCell';
 
 const { sanitize } = dompurify;
 
@@ -68,21 +68,21 @@ const DisabilityProof = () => {
   const proofBlind = categories.includes('Blind')
     ? [
         <span>Proof of disability - blind or partially sighted</span>,
-        <MultiFileCell filesConfig={[{ title: '', files: proofDocumentBlind! }]} />,
+        <FileCell filesConfig={[{ title: '', file: proofDocumentBlind! }]} />,
         <ChangeAnswerButton from="Blind" />,
       ]
     : [];
   const proofDeaf = categories.includes('Deaf')
     ? [
         <span>Proof of disability - deaf or only able to hear a little sound in both ears</span>,
-        <MultiFileCell filesConfig={[{ title: '', files: proofDocumentDeaf! }]} />,
+        <FileCell filesConfig={[{ title: '', file: proofDocumentDeaf! }]} />,
         <ChangeAnswerButton from="Deaf" />,
       ]
     : [];
   const proofLanguage = categories.includes('Language')
     ? [
         <span>Proof of disability - cannot speak at all in any language</span>,
-        <MultiFileCell filesConfig={[{ title: '', files: proofDocumentLanguage! }]} />,
+        <FileCell filesConfig={[{ title: '', file: proofDocumentLanguage! }]} />,
         <ChangeAnswerButton from="Language" />,
       ]
     : [];
@@ -96,14 +96,14 @@ const DisabilityProof = () => {
       ]
     : [
         <span>Proof of disability - cannot walk or find it difficult to walk short distances</span>,
-        <MultiFileCell filesConfig={[{ title: '', files: proofDocumentWalk! }]} />,
+        <FileCell filesConfig={[{ title: '', file: proofDocumentWalk! }]} />,
         <ChangeAnswerButton from="Walk" />,
       ];
   const proofWalk = categories.includes('Walk') ? proofWalkAlt : [];
   const proofArms = categories.includes('Arms')
     ? [
         <span>Proof of disability - unable to use both arms</span>,
-        <MultiFileCell filesConfig={[{ title: '', files: proofDocumentArms! }]} />,
+        <FileCell filesConfig={[{ title: '', file: proofDocumentArms! }]} />,
         <ChangeAnswerButton from="Arms" />,
       ]
     : [];
@@ -113,7 +113,7 @@ const DisabilityProof = () => {
           Proof of disability - find it hard to learn and remember new information and live
           independently
         </span>,
-        <MultiFileCell filesConfig={[{ title: '', files: proofDocumentLearn! }]} />,
+        <FileCell filesConfig={[{ title: '', file: proofDocumentLearn! }]} />,
         <ChangeAnswerButton from="Learn" />,
       ]
     : [];
@@ -138,7 +138,7 @@ const DisabilityProof = () => {
   const proofDrive = categories.includes('DrivingLicense')
     ? [
         <span>Proof of disability - cannot drive a car because of a medical condition</span>,
-        <MultiFileCell filesConfig={[{ title: '', files: proofDocumentDrive! }]} />,
+        <FileCell filesConfig={[{ title: '', file: proofDocumentDrive! }]} />,
         <ChangeAnswerButton from="Drive" />,
       ]
     : [];
@@ -162,7 +162,7 @@ const DisabilityProof = () => {
     refusedLicense,
     proofDrive,
   ].filter((el) => {
-    return el !== undefined && el.length !== 0;
+    return el !== [] && el.length !== 0;
   });
   return (
     <Table

src/components/App/Form/Summary/Sections/SendRequest.tsx

@@ -28,14 +28,14 @@ const SendYourRequest = () => {
   const fileData = [];
   const applicationNumber = Math.floor(Math.random() * 10000000 + 1).toString();
   const files = [
-    [formDataState.ApplicantPhoto],
-    formDataState.proofDocumentArms ? [...formDataState.proofDocumentArms] : [],
-    formDataState.proofDocumentBlind ? [...formDataState.proofDocumentBlind] : [],
-    formDataState.proofDocumentDeaf ? [...formDataState.proofDocumentDeaf] : [],
-    formDataState.proofDocumentDrive ? [...formDataState.proofDocumentDrive] : [],
-    formDataState.proofDocumentLanguage ? [...formDataState.proofDocumentLanguage] : [],
-    formDataState.proofDocumentLearn ? [...formDataState.proofDocumentLearn] : [],
-    formDataState.proofDocumentWalk ? [...formDataState.proofDocumentWalk] : [],
+    formDataState.ApplicantPhoto,
+    formDataState.proofDocumentArms,
+    formDataState.proofDocumentBlind,
+    formDataState.proofDocumentDeaf,
+    formDataState.proofDocumentDrive,
+    formDataState.proofDocumentLanguage,
+    formDataState.proofDocumentLearn,
+    formDataState.proofDocumentWalk,
   ];
   const checkAnswersEl = document.getElementById('application-summary');
   // remove change button

src/components/sharedSteps/DisabilityProofStep/DisabilityProofStep.tsx

@@ -1,9 +1,8 @@
 import { useFormDataSubscription, useNavigationLogic } from 'customHooks';
-import { Button, Question } from 'components/shared';
+import { Button, FileUpload, Question } from 'components/shared';
 import { TSharedStepDocsProps, sharedStepSimplePropTypes } from 'types/step';
 import Icon from 'components/shared/Icon/Icon';
 import { useGlobalContext } from 'state/globalState';
-import MultiFileUpload from 'components/shared/MultiFileUpload/MultiFileUpload';
 
 const DisabilityProofStep = ({
   handleNavigation,
@@ -28,7 +27,6 @@ const DisabilityProofStep = ({
   const proofDocumentLanguage = useFormDataSubscription('proofDocumentLanguage');
   const proofDocumentDrive = useFormDataSubscription('proofDocumentDrive');
   const applicationForMe = useFormDataSubscription('applicationForMe');
-  const maxFilesAllowed = 8;
 
   const { goToNextStep } = useNavigationLogic('DisablityCategories', 'Distance');
   const pronoun = applicationForMe.currentValue ? 'You' : 'They';
@@ -99,17 +97,6 @@ const DisabilityProofStep = ({
       handleNavigation();
     }
   };
-  const deleteFile = (file: File) => {
-    if (identityDocument.currentValue !== null) {
-      const array = [...identityDocument.currentValue];
-      const index = identityDocument.currentValue.indexOf(file);
-      if (index > -1) {
-        array.splice(index, 1);
-        identityDocument.set(array);
-      }
-    }
-  };
-
   // const one = !question.includes('learn') ? 'one' : 'at least two';
   return (
     <Question
@@ -165,16 +152,14 @@ const DisabilityProofStep = ({
         You can take a picture of the document on a mobile phone. Please make sure the image is
         clear enough to read.
       </p>
-      <MultiFileUpload
-        hint={`Files must be jpeg, png or pdf file format. You can upload up to ${maxFilesAllowed} files.`}
+      <FileUpload
+        hint="Files must be jpeg, png or pdf file format"
         accept=".png,.jpg,.jpeg,.pdf"
         name={`${dataCategoryPrefix}proof`}
-        maxFiles={maxFilesAllowed}
-        defaultFiles={identityDocument.currentValue}
-        updateFiles={identityDocument.set}
-        removeFile={deleteFile}
+        defaultFile={identityDocument.currentValue}
+        updateFile={identityDocument.set}
         error={identityDocument.error}
-        aria-label={`Files must be jpeg, png or pdf file format. You can upload up to ${maxFilesAllowed} files.`}
+        aria-label="Files must be jpeg, png or pdf file format"
       />
       {alternateEvidence && (
         <Button

src/state/formDataState/types.ts

@@ -94,13 +94,13 @@ export type TFormDataState = {
   studentIdPhoto: Nullable<File>;
   studentProofDocument: Nullable<File>;
   identityDocument: Nullable<File>;
-  proofDocumentBlind: Nullable<File[]>;
-  proofDocumentDeaf: Nullable<File[]>;
-  proofDocumentWalk: Nullable<File[]>;
-  proofDocumentArms: Nullable<File[]>;
-  proofDocumentLearn: Nullable<File[]>;
-  proofDocumentLanguage: Nullable<File[]>;
-  proofDocumentDrive: Nullable<File[]>;
+  proofDocumentBlind: Nullable<File>;
+  proofDocumentDeaf: Nullable<File>;
+  proofDocumentWalk: Nullable<File>;
+  proofDocumentArms: Nullable<File>;
+  proofDocumentLearn: Nullable<File>;
+  proofDocumentLanguage: Nullable<File>;
+  proofDocumentDrive: Nullable<File>;
 
   disabilityCategories: Nullable<Array<string>>;
   drivingLicense: Nullable<string>;

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es6",
+    "target": "es5",
     "lib": ["dom", "dom.iterable", "esnext"],
     "baseUrl": "src",
     "allowJs": true,