From aba52012cb696e6078866779b4adecb54194950a Mon Sep 17 00:00:00 2001
From: JeremiahUy <jeremiah.augie.uy@nav.no>
Date: Tue, 19 Nov 2024 13:22:52 +0100
Subject: [PATCH] UPDATE: to properly send files to backend

Co-authored-by: andregroseth <lord.andre.groseth@nav.no>
---
 .../behandlingensLivlop/CustomFileUpload.tsx  | 135 ++++++++----------
 .../src/pages/BehandlingensLivslopPage.tsx    |   7 +-
 2 files changed, 69 insertions(+), 73 deletions(-)

diff --git a/apps/frontend/src/components/behandlingensLivlop/CustomFileUpload.tsx b/apps/frontend/src/components/behandlingensLivlop/CustomFileUpload.tsx
index 960356690..bbf67c1a7 100644
--- a/apps/frontend/src/components/behandlingensLivlop/CustomFileUpload.tsx
+++ b/apps/frontend/src/components/behandlingensLivlop/CustomFileUpload.tsx
@@ -6,8 +6,7 @@ import {
   Heading,
   VStack,
 } from '@navikt/ds-react'
-import { FieldArray, FieldArrayRenderProps } from 'formik'
-import { useEffect, useState } from 'react'
+import { Dispatch, useEffect, useState } from 'react'
 
 const MAX_FILES = 4
 const MAX_SIZE_MB = 5
@@ -20,10 +19,11 @@ const errors: Record<FileRejectionReason, string> = {
 
 interface IProps {
   initialValues: File[]
+  setFilesToUpload: Dispatch<React.SetStateAction<File[]>>
 }
 
 export const CustomFileUpload = (props: IProps) => {
-  const { initialValues } = props
+  const { initialValues, setFilesToUpload } = props
   const [files, setFiles] = useState<FileObject[]>([])
   const acceptedFiles = files.filter((file) => !file.error)
   const rejectedFiles = files.filter((f): f is FileRejected => f.error)
@@ -40,81 +40,72 @@ export const CustomFileUpload = (props: IProps) => {
 
   const removeFile = (fileToRemove: FileObject) => {
     setFiles(files.filter((file) => file !== fileToRemove))
+    setFilesToUpload(files.filter((file) => file !== fileToRemove).map((file) => file.file))
   }
 
   return (
-    <FieldArray name="filer">
-      {(fieldArrayRenderProps: FieldArrayRenderProps) => (
-        <VStack gap="6">
-          <FileUpload.Dropzone
-            label="Last opp behandlingslivsløp"
-            description={`Støttet filformater er pdf, png, og jpeg. Maks 4 filer. Maks størrelse på ${MAX_SIZE_MB} MB.`}
-            accept=".png,.jpeg,.pdf"
-            maxSizeInBytes={MAX_SIZE}
-            fileLimit={{ max: MAX_FILES, current: acceptedFiles.length }}
-            onSelect={(newFiles: FileObject[]) => {
-              setFiles([...files, ...newFiles])
-              newFiles.forEach((file) => {
-                if (!file.error) {
-                  const reader = new FileReader()
-                  reader.readAsArrayBuffer(file.file)
-                  reader.onloadend = () => {
-                    fieldArrayRenderProps.push(file.file)
-                  }
-                }
-              })
-            }}
-          />
+    <VStack gap="6">
+      <FileUpload.Dropzone
+        label="Last opp behandlingslivsløp"
+        description={`Støttet filformater er pdf, png, og jpeg. Maks 4 filer. Maks størrelse på ${MAX_SIZE_MB} MB.`}
+        accept=".png,.jpeg,.pdf"
+        maxSizeInBytes={MAX_SIZE}
+        fileLimit={{ max: MAX_FILES, current: acceptedFiles.length }}
+        onSelect={(newFiles: FileObject[]) => {
+          setFiles([...files, ...newFiles])
+          setFilesToUpload([
+            ...files.map((file) => file.file),
+            ...newFiles.map((newFile) => newFile.file),
+          ])
+        }}
+      />
 
-          {acceptedFiles.length > 0 && (
-            <VStack gap="2">
-              <Heading level="3" size="xsmall">
-                {`Vedlegg (${acceptedFiles.length})`}
-              </Heading>
-              <VStack as="ul" gap="3">
-                {acceptedFiles.map((file, index) => (
-                  <FileUpload.Item
-                    as="li"
-                    key={file.file.name + '_' + index}
-                    file={file.file}
-                    button={{
-                      action: 'delete',
-                      onClick: () => {
-                        removeFile(file)
-                        fieldArrayRenderProps.remove(index)
-                      },
-                    }}
-                  />
-                ))}
-              </VStack>
-            </VStack>
-          )}
-          {rejectedFiles.length > 0 && (
-            <VStack gap="2">
-              <Heading level="3" size="xsmall">
-                Vedlegg med feil
-              </Heading>
-              <VStack as="ul" gap="3">
-                {rejectedFiles.map((rejected, index) => (
-                  <FileUpload.Item
-                    as="li"
-                    key={index}
-                    file={rejected.file}
-                    button={{
-                      action: 'delete',
-                      onClick: () => {
-                        removeFile(rejected)
-                      },
-                    }}
-                    error={errors[rejected.reasons[0] as FileRejectionReason]}
-                  />
-                ))}
-              </VStack>
-            </VStack>
-          )}
+      {acceptedFiles.length > 0 && (
+        <VStack gap="2">
+          <Heading level="3" size="xsmall">
+            {`Vedlegg (${acceptedFiles.length})`}
+          </Heading>
+          <VStack as="ul" gap="3">
+            {acceptedFiles.map((file, index) => (
+              <FileUpload.Item
+                as="li"
+                key={file.file.name + '_' + index}
+                file={file.file}
+                button={{
+                  action: 'delete',
+                  onClick: () => {
+                    removeFile(file)
+                  },
+                }}
+              />
+            ))}
+          </VStack>
         </VStack>
       )}
-    </FieldArray>
+      {rejectedFiles.length > 0 && (
+        <VStack gap="2">
+          <Heading level="3" size="xsmall">
+            Vedlegg med feil
+          </Heading>
+          <VStack as="ul" gap="3">
+            {rejectedFiles.map((rejected, index) => (
+              <FileUpload.Item
+                as="li"
+                key={index}
+                file={rejected.file}
+                button={{
+                  action: 'delete',
+                  onClick: () => {
+                    removeFile(rejected)
+                  },
+                }}
+                error={errors[rejected.reasons[0] as FileRejectionReason]}
+              />
+            ))}
+          </VStack>
+        </VStack>
+      )}
+    </VStack>
   )
 }
 
diff --git a/apps/frontend/src/pages/BehandlingensLivslopPage.tsx b/apps/frontend/src/pages/BehandlingensLivslopPage.tsx
index e9354bca0..126877db2 100644
--- a/apps/frontend/src/pages/BehandlingensLivslopPage.tsx
+++ b/apps/frontend/src/pages/BehandlingensLivslopPage.tsx
@@ -50,6 +50,7 @@ export const BehandlingensLivslopPage = () => {
   const [tilTemaOversikt, setTilTemaOversikt] = useState<boolean>(false)
   const [pvkDokument, setPvkDokument] = useState<IPvkDokument>()
   const [, setBehandlingesLivslop] = useState<IBehandlingensLivslop>()
+  const [filesToUpload, setFilesToUpload] = useState<File[]>([])
   const navigate = useNavigate()
   const breadcrumbPaths: IBreadCrumbPath[] = [
     dokumentasjonerBreadCrumbPath,
@@ -79,6 +80,7 @@ export const BehandlingensLivslopPage = () => {
     if (etterlevelseDokumentasjon) {
       const mutatedBehandlingensLivslop = {
         ...behandlingensLivslop,
+        filer: filesToUpload,
         etterlevelseDokumentasjonId: etterlevelseDokumentasjon.id,
       } as IBehandlingensLivslopRequest
 
@@ -239,7 +241,10 @@ export const BehandlingensLivslopPage = () => {
                       oversikt.
                     </BodyShort>
 
-                    <CustomFileUpload initialValues={initialValues.filer} />
+                    <CustomFileUpload
+                      initialValues={initialValues.filer}
+                      setFilesToUpload={setFilesToUpload}
+                    />
 
                     <div className="mt-3">
                       <TextAreaField