feat: set max number of files to 5 + change description text

Author: iehkaatee

src/app/[locale]/incident/components/IncidentDescriptionForm.tsx

@@ -26,7 +26,6 @@ import {
   ACCEPTED_IMAGE_TYPES,
   FileUpload,
   MAX_FILE_SIZE,
-  MAX_NUMBER_FILES,
   MIN_FILE_SIZE,
 } from '@/components/ui/upload/FileUpload'
 
@@ -52,9 +51,6 @@ export const IncidentDescriptionForm = () => {
       })
       .refine((files) => files.every((file) => file.size >= MIN_FILE_SIZE), {
         message: t('errors.file_size_too_small'),
-      })
-      .refine((files) => files.length <= MAX_NUMBER_FILES, {
-        message: t('errors.file_limit_exceeded'), // Your error message here
       }),
   })
 
@@ -160,11 +156,12 @@ export const IncidentDescriptionForm = () => {
                   5. voeg preview toe aan summary [x]
                   6. check toetsenboard controls pt1.[x] pt2.[]
                   7. check overige toegankelijkheid []
-                  8. op de een of andere manier worden de files niet goed bewaard bij een refresh []
-                  9. op dit moment wordt de hele array vervangen []
+                  8. op de een of andere manier worden de files niet goed bewaard bij een refresh [x] --> weggoien
+                  9. op dit moment wordt de hele array vervangen [x]
                   10. ipv form naar upload component alleen een methode passen daarin de update uitvoeren -> makkelijker hergebruik
                   11. form validatie eerder triggeren []
                   12. verschillende screen sizes
+                  13. max 5 items en description aanpassen [x]
 
                   vraag:
                   - wat doen bij overschrijden max aantal files?

src/app/[locale]/incident/summary/components/IncidentSummaryForm.tsx

@@ -61,14 +61,12 @@ const IncidentSummaryForm = () => {
         if (formState.attachments.length > 0) {
           const signalId = res.signal_id
           if (signalId) {
-            formState.attachments
-              .slice(0, MAX_NUMBER_FILES)
-              .forEach((attachment) => {
-                const formData = new FormData()
-                formData.append('signal_id', signalId)
-                formData.append('file', attachment)
-                postAttachments(signalId, formData)
-              })
+            formState.attachments.forEach((attachment) => {
+              const formData = new FormData()
+              formData.append('signal_id', signalId)
+              formData.append('file', attachment)
+              postAttachments(signalId, formData)
+            })
           }
         }
       })
@@ -178,7 +176,7 @@ export const IncidentSummaryFormAttachments = ({
     <div className="flex flex-col gap-2">
       <p className="font-semibold">{title}</p>
       <div className="flex gap-4">
-        {attachments.slice(0, MAX_NUMBER_FILES).map((image, index) => (
+        {attachments.map((image, index) => (
           <PreviewFile file={image} key={index} />
         ))}
       </div>

src/components/ui/upload/FileUpload.tsx

@@ -13,7 +13,7 @@ export const ACCEPTED_IMAGE_TYPES = [
 
 export const MAX_FILE_SIZE = 20971520
 export const MIN_FILE_SIZE = 30720
-export const MAX_NUMBER_FILES = 3
+export const MAX_NUMBER_FILES = 5
 
 interface FormWithFiles extends FieldValues {
   files: File[]
@@ -37,7 +37,10 @@ export const FileUpload = ({ form }: FileUploadProps) => {
   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const files = e.target.files
     if (files && files.length > 0) {
-      const filesArray = Array.from(files)
+      const filesArray = form
+        .getValues('files')
+        .concat(Array.from(files))
+        .slice(0, MAX_NUMBER_FILES)
       form.setValue('files', filesArray)
       setNrOfFiles(filesArray.length)
     }

src/components/ui/upload/PreviewFile.tsx

@@ -10,7 +10,7 @@ type Props = {
 
 const PreviewFile = ({ file, allowDelete = false, onDelete }: Props) => {
   const [imageUrl, setImageUrl] = useState<string>('')
-  const t = useTranslations('general.button')
+  const t = useTranslations('general')
 
   useEffect(() => {
     const objectUrl = file['name'] ? URL.createObjectURL(file) : ''
@@ -21,11 +21,11 @@ const PreviewFile = ({ file, allowDelete = false, onDelete }: Props) => {
 
   return (
     <div className="relative">
-      <img className="empty-box" src={imageUrl} alt="Voorbeeld weergave" />
+      <img className="empty-box" src={imageUrl} alt={t('file.preview')} />
       {allowDelete && (
         <button
           onClick={onDelete}
-          aria-label={t('delete_file')}
+          aria-label={t('button.delete_file')}
           className="absolute bottom-0 right-0 bg-gray-900 bg-opacity-50 text-white w-full flex justify-center items-center py-2 hover:bg-opacity-80 transition-colors duration-200 delay-100"
         >
           <FaRegTrashCan className="w-5 h-5" />

translations/en.json

@@ -14,8 +14,8 @@
     "form": {
       "describe_textarea_heading": "What is it about?",
       "describe_textarea_description": "Do not type personal information in this description. We will ask this of you later in this form.",
-      "describe_upload_heading": "Add pictures (not required)",
-      "describe_upload_description": "Add a photo to clarify the situation",
+      "describe_upload_heading": "Add photos (not required)",
+      "describe_upload_description": "Add a photo to clarify the situation (maximum of 5 photos).",
       "errors": {
         "textarea_required": "This is a required field",
         "file_type_invalid": "Invalid file type. Only JPEG, PNG, and GIF are accepted.",
@@ -96,6 +96,9 @@
     "button": {
       "upload_file": "Upload file",
       "delete_file": "Delete file"
+    },
+    "file": {
+      "preview": "Preview image"
     }
   },
   "routing": {

translations/nl.json

@@ -15,7 +15,7 @@
       "describe_textarea_heading": "Waar gaat het om?",
       "describe_textarea_description": "Typ geen persoonsgegevens in deze omschrijving. We vragen dit later in dit formulier aan u.",
       "describe_upload_heading": "Foto's toevoegen (niet verplicht)",
-      "describe_upload_description": "Voeg een foto toe om de situatie te verduidelijken",
+      "describe_upload_description": "Voeg een foto toe om de situatie te verduidelijken (maximaal 5 foto's).",
       "errors": {
         "textarea_required": "Dit is een verplicht veld",
         "file_type_invalid": "Ongeldig bestandstype. Alleen JPEG, PNG, en GIF zijn toegestaan.",
@@ -97,6 +97,9 @@
     "button": {
       "upload_file": "Upload bestand",
       "delete_file": "Verwijder bestand"
+    },
+    "file": {
+      "preview": "Voorbeeld weergave"
     }
   },
   "routing": {