Skip to content

Commit

Permalink
UPDATE: to properly send files to backend
Browse files Browse the repository at this point in the history 
Co-authored-by: andregroseth <[email protected]>
  • Loading branch information
@JeremiahUy @andregroseth
JeremiahUy and andregroseth committed Nov 19, 2024
1 parent 35a536f commit aba5201
Show file tree
Hide file tree
Showing 2 changed files with 69 additions and 73 deletions.
135 changes: 63 additions & 72 deletions apps/frontend/src/components/behandlingensLivlop/CustomFileUpload.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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)
Expand All @@ -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>
)
}

Expand Down
7 changes: 6 additions & 1 deletion apps/frontend/src/pages/BehandlingensLivslopPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -79,6 +80,7 @@ export const BehandlingensLivslopPage = () => {
if (etterlevelseDokumentasjon) {
const mutatedBehandlingensLivslop = {
...behandlingensLivslop,
filer: filesToUpload,
etterlevelseDokumentasjonId: etterlevelseDokumentasjon.id,
} as IBehandlingensLivslopRequest

Expand Down Expand Up @@ -239,7 +241,10 @@ export const BehandlingensLivslopPage = () => {
oversikt.
</BodyShort>

<CustomFileUpload initialValues={initialValues.filer} />
<CustomFileUpload
initialValues={initialValues.filer}
setFilesToUpload={setFilesToUpload}
/>

<div className="mt-3">
<TextAreaField
Expand Down

0 comments on commit aba5201

Please sign in to comment.