Add error for invalid file types

newjersey · Jul 8, 2024 · bcfb9bc · bcfb9bc
1 parent 325cb84
commit bcfb9bc
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 9 deletions.
diff --git a/frontend/src/components/QuestionInput/QuestionInput.tsx b/frontend/src/components/QuestionInput/QuestionInput.tsx
@@ -124,7 +124,16 @@ export const QuestionInput = ({ onSend, disabled, placeholder, clearOnSend, conv
   const onFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0]
     if (file) {
-      if (file.size > 5 * 1024 * 1024) {
+      if (!ACCEPTED_FILE_TYPES.includes(file.type)) {
+        setInputError(
+          'Only the following file types are supported: .pdf, .jpeg, .png, .gif, .bmp, .tiff. Please try a different file.'
+        )
+        setSelectedFile(null)
+        if (fileInputRef?.current?.value) {
+          fileInputRef.current.value = ''
+        }
+        logEvent('submit_prompt_client_error_file_type', { object_type: file.type })
+      } else if (file.size > 5 * 1024 * 1024) {
         // 5MB limit
         setInputError('File size of attachments cannot exceed 5 MB. Please try a smaller file.')
         setSelectedFile(null)

diff --git a/frontend/src/custom/fileUploadUtils.ts b/frontend/src/custom/fileUploadUtils.ts
@@ -1,6 +1,11 @@
-import pdfToText from 'react-pdftotext'
-
-export const ACCEPTED_FILE_TYPES = ['.jpg', '.png', '.gif', '.bmp', '.tiff', '.pdf']
+export const ACCEPTED_FILE_TYPES = [
+  'image/jpeg',
+  'image/png',
+  'image/gif',
+  'image/bmp',
+  'image/tiff',
+  'application/pdf'
+]
 
 export interface UploadedFile {
   name: string

diff --git a/static/assets/index-7812758c.js → static/assets/index-43fd397a.js b/static/assets/index-7812758c.js → static/assets/index-43fd397a.js
diff --git a/static/assets/index-7812758c.js.map → static/assets/index-43fd397a.js.map b/static/assets/index-7812758c.js.map → static/assets/index-43fd397a.js.map
diff --git a/static/index.html b/static/index.html
@@ -21,7 +21,7 @@
       })(window, document, 'script', 'dataLayer', 'GTM-P3V3PJ6')
     </script>
     <!-- End Google Tag Manager -->
-    <script type="module" crossorigin src="/assets/index-7812758c.js"></script>
+    <script type="module" crossorigin src="/assets/index-43fd397a.js"></script>
     <link rel="stylesheet" href="/assets/index-71eea0dc.css">
   </head>
   <body>