Stop user from uploading invalid file types + add logging

Author: eriksson-daniel

frontend/src/components/attachments/upload-button.tsx

@@ -20,6 +20,8 @@ const MAX_SIZE_BYTES_TOTAL = MAX_SIZE_MIB_TOTAL * BYTES_PER_MIB;
 
 const FORMATTER = new Intl.NumberFormat('nb-NO');
 
+const VALID_FILE_TYPES = ['image/png', 'image/jpeg', 'image/jpg', 'application/pdf'];
+
 interface Props {
   caseId: string;
   inputId: string;
@@ -57,28 +59,49 @@ export const UploadButton = ({ inputId, setLoading, isLoading, addError, caseId,
       return;
     }
 
+    const uploadedSize = attachments.reduce((total, attachment) => total + attachment.sizeInBytes, 0);
+    const includedFiles: File[] = [];
+    const exclusionReasons: string[] = [];
     let pickedSize = 0;
 
     for (const file of files) {
-      pickedSize += file.size;
+      if (!VALID_FILE_TYPES.includes(file.type)) {
+        addError(`${file.name}: ${error_messages[ErrorMessageKeys.FILE_COULD_NOT_BE_CONVERTED]}`);
+        exclusionReasons.push(`Invalid type: ${file.type}`);
+        continue;
+      }
 
       if (file.size > MAX_SIZE_BYTES_SINGLE) {
         addError(`${file.name}: ${error_messages[ErrorMessageKeys.TOO_LARGE]}`);
-        return;
+        exclusionReasons.push(`File too large: ${FORMATTER.format(file.size / BYTES_PER_KB)} KiB`);
+        continue;
       }
+
+      const overhead = (includedFiles.length + 1) * OVERHEAD_BYTES;
+
+      if (uploadedSize + pickedSize + overhead + file.size > MAX_SIZE_BYTES_TOTAL) {
+        addError(`${error_messages.could_not_add} ${file.name}. ${error_messages[ErrorMessageKeys.TOTAL_TOO_LARGE]}`);
+        exclusionReasons.push(
+          `Total size exceeded. Could not add file of size: ${FORMATTER.format(file.size / BYTES_PER_KB)} KiB. Used: ${FORMATTER.format((uploadedSize + pickedSize + overhead) / BYTES_PER_KB)} KiB.`,
+        );
+        continue;
+      }
+
+      pickedSize += file.size;
+      includedFiles.push(file);
     }
 
-    const uploadedSize = attachments.reduce((total, attachment) => total + attachment.sizeInBytes, 0);
-    const overhead = files.length * OVERHEAD_BYTES;
+    if (exclusionReasons.length > 0) {
+      appEvent(AppEventEnum.UPLOAD_FILES_ERROR, { exclusions: exclusionReasons });
+    }
 
-    if (uploadedSize + pickedSize + overhead > MAX_SIZE_BYTES_TOTAL) {
-      addError(error_messages[ErrorMessageKeys.TOTAL_TOO_LARGE]);
+    if (includedFiles.length === 0) {
       return;
     }
 
     setLoading(true);
 
-    const uploads = Array.from(files).map(async (file) => {
+    const uploads = includedFiles.map(async (file) => {
       try {
         await uploadAttachment({ caseId, file }).unwrap();
       } catch (err) {
@@ -112,7 +135,7 @@ export const UploadButton = ({ inputId, setLoading, isLoading, addError, caseId,
         id={inputId}
         type="file"
         multiple
-        accept="image/png, image/jpeg, image/jpg, .pdf"
+        accept={[...VALID_FILE_TYPES, '.pdf'].join(',')}
         ref={fileInput}
         onChange={(e) => {
           upload(e);

frontend/src/language/en.tsx

@@ -380,6 +380,7 @@ export const en: Translations = {
     [ErrorMessageKeys.FILE_COULD_NOT_BE_CONVERTED]:
       'You have tried to include an attachment with a format we do not support. Attachments are limited to til PNG, JPEG, and PDF.',
     download: 'Failed to download PDF. Please try again later.',
+    could_not_add: 'Could not add',
     skjema: {
       title: 'Form is not complete',
       fnr_dnr_or_npid: 'You must input a valid national identity number, D number or NPID.',

frontend/src/language/nb.tsx

@@ -383,6 +383,7 @@ export const nb = {
     [ErrorMessageKeys.FILE_COULD_NOT_BE_CONVERTED]:
       'Du har prøvd å legge til et vedlegg med et format vi ikke støtter. Vedlegg er begrenset til PNG, JPEG, og PDF.',
     download: 'Klarte ikke å laste ned PDF. Vennligst prøv igjen senere.',
+    could_not_add: 'Kunne ikke legge til',
     skjema: {
       title: 'Feil i skjema',
       fnr_dnr_or_npid: 'Du må fylle inn et gyldig fødselsnummer, D-nummer eller NPID.',

frontend/src/language/nn.tsx

@@ -22,9 +22,9 @@ export const nn: Translations = {
       [CaseType.ANKE]:
         'Dersom du er ein arbeidsgivar må du logge ut og sende anka i posten. Du legg inn fødselsnummeret eller D-nummeret til den arbeidstakaren som vedtaket gjeld for, skriv ut anka og signerer som arbeidsgivar.',
       [CaseType.ETTERSENDELSE_KLAGE]:
-        'Dersom du er ein arbeidsgivar må du logge ut og legge inn fødselsnummeret eller D-nummeret til den arbeidstakaren som ettersendinga gjeld for, skriv ut framsida og signerer som arbeidsgivar.',
+        'Dersom du er ein arbeidsgivar må du logge ut og leggje inn fødselsnummeret eller D-nummeret til den arbeidstakaren som ettersendinga gjeld for, skriv ut framsida og signerer som arbeidsgivar.',
       [CaseType.ETTERSENDELSE_ANKE]:
-        'Dersom du er ein arbeidsgivar må du logge ut og legge inn fødselsnummeret eller D-nummeret til den arbeidstakaren som ettersendinga gjeld for, skriv ut framsida og signerer som arbeidsgivar.',
+        'Dersom du er ein arbeidsgivar må du logge ut og leggje inn fødselsnummeret eller D-nummeret til den arbeidstakaren som ettersendinga gjeld for, skriv ut framsida og signerer som arbeidsgivar.',
     },
     common: {
       title_fragment: {
@@ -56,7 +56,7 @@ export const nn: Translations = {
         clear_errors: 'Fjern feilmeldingar',
         title: 'Vedlegg',
         upload_button_text: 'Last opp nytt vedlegg',
-        description: 'Har du informasjon du ønsker å legge ved, lastar du det opp her.',
+        description: 'Har du informasjon du ønsker å leggje ved, lastar du det opp her.',
         supported_types: [
           <span key="1">Filtyper som støttast: </span>,
           <span key="2">
@@ -379,8 +379,9 @@ export const nn: Translations = {
     [ErrorMessageKeys.EMPTY]: 'Du kan ikkje sende inn ei tom fil.',
     [ErrorMessageKeys.VIRUS]: 'Vi mistenker at fila di inneheld eit virus, den kan derfor ikkje sendast inn.',
     [ErrorMessageKeys.FILE_COULD_NOT_BE_CONVERTED]:
-      'Du har prøvd å legge til eit vedlegg med eit format vi ikkje støttar. Vedlegg er avgrensa til PNG, JPEG og PDF.',
+      'Du har prøvd å leggje til eit vedlegg med eit format vi ikkje støttar. Vedlegg er avgrensa til PNG, JPEG og PDF.',
     download: 'Klarte ikkje å laste ned PDF. Ver venleg og prøv på nytt seinare.',
+    could_not_add: 'Kunne ikkje leggje til',
     skjema: {
       title: 'Feil i skjema',
       fnr_dnr_or_npid: 'Du må fylle inn eit gyldig fødselsnummer, D-nummer eller NPID.',

frontend/src/logging/action.ts

@@ -23,6 +23,7 @@ export enum AppEventEnum {
   UPLOAD_FILES_CLICK = 'Click upload attachment',
   UPLOAD_FILES_DONE = 'Done uploading files',
   UPLOAD_FILES_START = 'Start uploading files',
+  UPLOAD_FILES_ERROR = 'Upload files error',
   USER_LOGIN = 'Login',
   MISSING_AUTH = 'Missing authentication',
   LOGGED_OUT_MODAL_OPEN = 'Logged out modal open',