[PRMP-550] Add error handling for duplicate file names and wrong file types (#824)

Author: adamwhitingnhs

app/src/components/blocks/_documentUpload/documentSelectFileErrorsPage/DocumentSelectFileErrorsPage.test.tsx

@@ -9,7 +9,10 @@ import {
     DOCUMENT_UPLOAD_STATE,
     DOCUMENT_TYPE,
 } from '../../../../types/pages/UploadDocumentsPage/types';
-import { UPLOAD_FILE_ERROR_TYPE } from '../../../../helpers/utils/fileUploadErrorMessages';
+import {
+    fileUploadErrorMessages,
+    UPLOAD_FILE_ERROR_TYPE,
+} from '../../../../helpers/utils/fileUploadErrorMessages';
 import { routes } from '../../../../types/generic/routes';
 
 const createFailedDocument = (name: string, error: UPLOAD_FILE_ERROR_TYPE): UploadDocument => ({
@@ -77,25 +80,21 @@ describe('DocumentSelectFileErrorsPage', () => {
     });
 
     it.each([
-        {
-            error: UPLOAD_FILE_ERROR_TYPE.invalidPdf,
-            expectedMessage: 'This file is damaged or unreadable',
-        },
-        {
-            error: UPLOAD_FILE_ERROR_TYPE.emptyPdf,
-            expectedMessage: 'This file is empty',
-        },
-        {
-            error: UPLOAD_FILE_ERROR_TYPE.passwordProtected,
-            expectedMessage: 'This file is password protected',
-        },
-    ])('displays correct error message for "$error" file', ({ error, expectedMessage }) => {
+        UPLOAD_FILE_ERROR_TYPE.invalidPdf,
+        UPLOAD_FILE_ERROR_TYPE.emptyPdf,
+        UPLOAD_FILE_ERROR_TYPE.passwordProtected,
+        UPLOAD_FILE_ERROR_TYPE.duplicateFileName,
+        UPLOAD_FILE_ERROR_TYPE.passwordProtected,
+        UPLOAD_FILE_ERROR_TYPE.invalidFileType,
+    ])('displays correct error message for "$error" file', (error) => {
         const fileName = `file-${error}.pdf`;
         const doc = createFailedDocument(fileName, error);
         renderDocs([doc]);
 
         expect(screen.getByText(fileName)).toBeInTheDocument();
-        expect(screen.getByText(expectedMessage)).toBeInTheDocument();
+        expect(
+            screen.getByText(fileUploadErrorMessages[error].selectFileError!),
+        ).toBeInTheDocument();
     });
 
     it('renders multiple error files correctly', () => {

app/src/components/blocks/_documentUpload/documentSelectFileErrorsPage/DocumentSelectFileErrorsPage.tsx

@@ -18,17 +18,6 @@ type Props = {
 const DocumentSelectFileErrorsPage = ({ documents }: Props): JSX.Element => {
     const navigate = useNavigate();
 
-    const fileErrorText = (errorType: UPLOAD_FILE_ERROR_TYPE): string | undefined => {
-        switch (errorType) {
-            case UPLOAD_FILE_ERROR_TYPE.invalidPdf:
-                return fileUploadErrorMessages.invalidPdf.selectFileError;
-            case UPLOAD_FILE_ERROR_TYPE.emptyPdf:
-                return fileUploadErrorMessages.emptyPdf.selectFileError;
-            case UPLOAD_FILE_ERROR_TYPE.passwordProtected:
-                return fileUploadErrorMessages.passwordProtected.selectFileError;
-        }
-    };
-
     useEffect(() => {
         if (documents.length === 0) {
             navigate(routes.HOME);
@@ -47,7 +36,7 @@ const DocumentSelectFileErrorsPage = ({ documents }: Props): JSX.Element => {
             {documents.map((doc) => (
                 <div key={doc.id}>
                     <ErrorMessage className="mb-1">{doc.file.name}</ErrorMessage>
-                    <p>{fileErrorText(doc.error!)}</p>
+                    <p>{fileUploadErrorMessages[doc.error!]?.selectFileError}</p>
                 </div>
             ))}
 

app/src/components/blocks/_documentUpload/documentSelectStage/DocumentSelectStage.test.tsx

@@ -8,7 +8,7 @@ import { JSX, useRef, useState } from 'react';
 import * as ReactRouter from 'react-router-dom';
 import usePatient from '../../../../helpers/hooks/usePatient';
 import { buildLgFile, buildPatientDetails } from '../../../../helpers/test/testBuilders';
-import { PDF_PARSING_ERROR_TYPE } from '../../../../helpers/utils/fileUploadErrorMessages';
+import { PDF_PARSING_ERROR_TYPE, UPLOAD_FILE_ERROR_TYPE } from '../../../../helpers/utils/fileUploadErrorMessages';
 import { getFormattedDate } from '../../../../helpers/utils/formatDate';
 import { formatNhsNumber } from '../../../../helpers/utils/formatNhsNumber';
 import { routeChildren, routes } from '../../../../types/generic/routes';
@@ -208,6 +208,43 @@ describe('DocumentSelectStage', () => {
                 });
             },
         );
+
+        it('should navigate to file errors page when user selects a file that is not a PDF', async () => {
+            renderApp(history);
+            const dropzone = screen.getByTestId('dropzone');
+            const nonPdfFile = {...lgDocumentOne, type: 'text/plain' };
+            fireEvent.drop(dropzone, {
+                dataTransfer: { files: [nonPdfFile] },
+            });
+
+            await waitFor(() => {
+                expect(mockedUseNavigate).toHaveBeenCalledWith(
+                    routeChildren.DOCUMENT_UPLOAD_FILE_ERRORS,
+                );
+            });
+        });
+
+        it('should navigate to file errors page when user selects a file that is a duplicate file name', async () => {
+            renderApp(history);
+            const dropzone = screen.getByTestId('dropzone');
+            fireEvent.drop(dropzone, {
+                dataTransfer: { files: [lgDocumentOne] },
+            });
+
+            await waitFor(() => {
+                expect(screen.getByText(lgDocumentOne.name)).toBeInTheDocument();
+            });
+
+            fireEvent.drop(dropzone, {
+                dataTransfer: { files: [lgDocumentOne] },
+            });
+
+            await waitFor(() => {
+                expect(mockedUseNavigate).toHaveBeenCalledWith(
+                    routeChildren.DOCUMENT_UPLOAD_FILE_ERRORS,
+                );
+            });
+        });
     });
 
     const TestApp = (props: Partial<Props>): JSX.Element => {

app/src/components/blocks/_documentUpload/documentSelectStage/DocumentSelectStage.tsx

@@ -84,54 +84,64 @@ const DocumentSelectStage = ({
         }
 
         if (fileArray) {
-            void updateFileList(fileArray.filter(validateFileType));
+            void updateFileList(fileArray);
         }
     };
 
     const onInput = (e: FileInputEvent): void => {
         fileInputAreaRef.current?.scrollIntoView({ behavior: 'smooth' });
-        const fileArray = Array.from(e.target.files ?? new FileList()).filter(validateFileType);
+        const fileArray = Array.from(e.target.files ?? new FileList());
 
         void updateFileList(fileArray);
     };
 
     const updateFileList = async (fileArray: File[]): Promise<void> => {
-        const documentMap = fileArray
-            .filter((f) => !documents.some((d) => d.file.name === f.name))
-            .map(async (file) => {
-                const document: UploadDocument = {
-                    id: uuidv4(),
-                    file,
-                    state: DOCUMENT_UPLOAD_STATE.SELECTED,
-                    progress: 0,
-                    docType: documentType,
-                    attempts: 0,
-                    numPages: 0,
-                    validated: false,
-                };
-
-                const buffer = await file.arrayBuffer();
-
-                try {
-                    const pdf = await getDocument(buffer).promise;
-                    await pdf.getPage(1);
-                    document.numPages = pdf.numPages;
-                    await pdf.destroy();
-                } catch (e) {
-                    const error = e as Error;
-                    document.state = DOCUMENT_UPLOAD_STATE.FAILED;
-
-                    if (error.message === PDF_PARSING_ERROR_TYPE.INVALID_PDF_STRUCTURE) {
-                        document.error = UPLOAD_FILE_ERROR_TYPE.invalidPdf;
-                    } else if (error.message === PDF_PARSING_ERROR_TYPE.PASSWORD_MISSING) {
-                        document.error = UPLOAD_FILE_ERROR_TYPE.passwordProtected;
-                    } else if (error.message === PDF_PARSING_ERROR_TYPE.EMPTY_PDF) {
-                        document.error = UPLOAD_FILE_ERROR_TYPE.emptyPdf;
-                    }
-                }
+        const documentMap = fileArray.map(async (file) => {
+            const document: UploadDocument = {
+                id: uuidv4(),
+                file,
+                state: DOCUMENT_UPLOAD_STATE.SELECTED,
+                progress: 0,
+                docType: documentType,
+                attempts: 0,
+                numPages: 0,
+                validated: false,
+            };
+
+            if (!validateFileType(file)) {
+                document.state = DOCUMENT_UPLOAD_STATE.FAILED;
+                document.error = UPLOAD_FILE_ERROR_TYPE.invalidFileType;
+                return document;
+            }
 
+            if (documents.some((d) => d.file.name === document.file.name)) {
+                document.state = DOCUMENT_UPLOAD_STATE.FAILED;
+                document.error = UPLOAD_FILE_ERROR_TYPE.duplicateFileName;
                 return document;
-            });
+            }
+
+            const buffer = await file.arrayBuffer();
+
+            try {
+                const pdf = await getDocument(buffer).promise;
+                await pdf.getPage(1);
+                document.numPages = pdf.numPages;
+                await pdf.destroy();
+            } catch (e) {
+                const error = e as Error;
+                document.state = DOCUMENT_UPLOAD_STATE.FAILED;
+
+                if (error.message === PDF_PARSING_ERROR_TYPE.INVALID_PDF_STRUCTURE) {
+                    document.error = UPLOAD_FILE_ERROR_TYPE.invalidPdf;
+                } else if (error.message === PDF_PARSING_ERROR_TYPE.PASSWORD_MISSING) {
+                    document.error = UPLOAD_FILE_ERROR_TYPE.passwordProtected;
+                } else if (error.message === PDF_PARSING_ERROR_TYPE.EMPTY_PDF) {
+                    document.error = UPLOAD_FILE_ERROR_TYPE.emptyPdf;
+                }
+            }
+
+            return document;
+        });
 
         const docs = await Promise.all(documentMap);
 

app/src/helpers/utils/fileUploadErrorMessages.ts

@@ -9,6 +9,8 @@ export enum UPLOAD_FILE_ERROR_TYPE {
     invalidPdf = 'invalidPdf',
     emptyPdf = 'emptyPdf',
     duplicatePositionError = 'duplicatePositionError',
+    duplicateFileName = 'duplicateFileName',
+    invalidFileType = 'invalidFileType',
 }
 
 export enum PDF_PARSING_ERROR_TYPE {
@@ -57,4 +59,14 @@ export const fileUploadErrorMessages: ErrorMessageType = {
         inline: 'You have selected the same position number for two or more files',
         errorBox: 'You have selected the same position number for two or more files',
     },
+    duplicateFileName: {
+        inline: 'This file has the same name as another file you have selected',
+        errorBox: 'This file has the same name as another file you have selected',
+        selectFileError: 'This file has the same name as another file you have selected',
+    },
+    invalidFileType: {
+        inline: 'This file is not in the correct file format',
+        errorBox: 'This file is not in the correct file format',
+        selectFileError: 'This file is not in the correct file format',
+    },
 };