Begynnelse på å bruke filopplaster fra Aksel

src/components/file-uploader/FIleUploader.tsx

@@ -1,6 +1,6 @@
 import React, { DragEventHandler, useEffect, useRef } from 'react';
 import styles from './FileUploader.module.css';
-import { Alert, BodyShort, Button, Detail, Link, Panel } from '@navikt/ds-react';
+import { Alert, BodyShort, Button, Detail, Link } from '@navikt/ds-react';
 import { UploadIcon, FileCheckmarkIcon, TrashIcon, DownloadIcon } from '@navikt/aksel-icons';
 import classNames from 'classnames';
 import { Control, useFieldArray } from 'react-hook-form';

src/components/file-uploader/NyFileUploader.tsx

@@ -0,0 +1,88 @@
+import { useState } from 'react';
+import { FileObject, FileRejected, FileRejectionReason, Heading, VStack, UNSAFE_FileUpload } from '@navikt/ds-react';
+import { useFieldArray } from 'react-hook-form';
+import Søknad from '@/types/Søknad';
+
+interface NyFileUploader {
+    uuid: string;
+}
+
+export const NyFileUploader = ({ uuid }: NyFileUploader) => {
+    const [files, setFiles] = useState<FileObject[]>([]);
+    const vedlegg = useFieldArray<Søknad>({ name: 'vedlegg' });
+
+    function removeFile(fileToRemove: FileObject, index: number) {
+        vedlegg.remove(index);
+        setFiles(files.filter((file) => file !== fileToRemove));
+    }
+
+    const acceptedFiles = files.filter((file) => !file.error);
+    const rejectedFiles = files.filter((f): f is FileRejected => f.error);
+
+    return (
+        <VStack gap="6">
+            <UNSAFE_FileUpload.Dropzone
+                label="Last opp filer til søknaden"
+                description={`Du kan laste opp Word- og PDF-filer. Maks 3 filer. Maks størrelse ${MAX_SIZE_MB} MB.`}
+                accept="image/jpg,image/jpeg,image/png,application/pdf"
+                maxSizeInBytes={MAX_SIZE}
+                fileLimit={{ max: MAX_FILES, current: acceptedFiles.length }}
+                onSelect={(newFiles) => setFiles([...files, ...newFiles])}
+            />
+
+            {acceptedFiles.length > 0 && (
+                <VStack gap="2">
+                    <Heading level="3" size="xsmall">
+                        {`Vedlegg (${acceptedFiles.length})`}
+                    </Heading>
+                    <VStack as="ul" gap="3">
+                        {acceptedFiles.map((file, index) => {
+                            vedlegg.append({ file: file.file, uuid: uuid });
+                            return (
+                                <UNSAFE_FileUpload.Item
+                                    as="li"
+                                    key={index}
+                                    file={file.file}
+                                    button={{
+                                        action: 'delete',
+                                        onClick: () => removeFile(file, 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) => (
+                            <UNSAFE_FileUpload.Item
+                                as="li"
+                                key={index}
+                                file={rejected.file}
+                                error={rejected.reasons[0] === 'fileType' ? errors.fileType : errors.fileSize}
+                                button={{
+                                    action: 'delete',
+                                    onClick: () => removeFile(rejected, index),
+                                }}
+                            />
+                        ))}
+                    </VStack>
+                </VStack>
+            )}
+        </VStack>
+    );
+};
+
+const MAX_FILES = 10;
+const MAX_SIZE_MB = 1;
+const MAX_SIZE = MAX_SIZE_MB * 1024 * 1024;
+
+const errors: Record<FileRejectionReason, string> = {
+    fileType: 'Filformatet støttes ikke',
+    fileSize: `Filen er større enn ${MAX_SIZE_MB} MB`,
+};

src/components/step/Step.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, ErrorSummary, GuidePanel, Heading } from '@navikt/ds-react';
+import { Button, ErrorSummary, Heading } from '@navikt/ds-react';
 import { useFormContext } from 'react-hook-form';
 import styles from './Step.module.css';
 import findAllErrors from '@/utils/errorState';
@@ -66,7 +66,7 @@ export default function Step({
                     ref={errorRef}
                     heading="Du må fikse disse feilene før du kan fortsette:"
                 >
-                    {allErrors.map(({ message, ref, type, types, root }) => {
+                    {allErrors.map(({ message, ref }) => {
                         return (
                             <ErrorSummary.Item key={ref!.name} href={`#${ref!.name}`}>
                                 {message}
@@ -89,9 +89,7 @@ export default function Step({
                             <Button type="button" variant="secondary" onClick={goToPreviousStepHandler}>
                                 Forrige steg
                             </Button>
-                            <Button type="submit">
-                                Neste steg
-                            </Button>
+                            <Button type="submit">Neste steg</Button>
                         </div>
                     )}
                 </>