Eksempler

<VStack gap="6">
  <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=".doc,.docx,.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) => (
          <FileUpload.Item
            as="li"
            key={index}
            file={file.file}
            button={{
              action: "delete",
              onClick: () => removeFile(file),
            }}
          />
        ))}
      </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}
            error={errors[rejected.reasons[0]]}
            button={{
              action: "delete",
              onClick: () => removeFile(rejected),
            }}
          />
        ))}
      </VStack>
    </VStack>
  )}
</VStack>

Delkomponenter

FileUpload.Dropzone er en komponent for opplasting av filer. Brukeren får et område/boks der de enten kan dra og slippe filer, eller klikke for å åpne filutforskeren.

FileUpload.Trigger er en wrapper som kan legges rundt en Button for å lage en helt enkel filopplastingsknapp som bare åpner filutforskeren.

FileUpload.Item brukes til å representere en fil. Den kan brukes både når man velger filer i en filopplaster, når filer lastes opp og til å vise tidligere opplastede filer. Den kan vise knapper for å slette og prøve på nytt.

Retningslinjer

Label og beskrivelse

Label på Dropzone/Trigger bør starte med "Last opp", f.eks. "Last opp dokumentasjon". Unngå labeltekst som går over to linjer.

Beskriv hva slags filer som kan lastes opp. Skriv hver begrensning i separate setninger og bruk positiv formulering. Eksempler:

Gjør

Feilmeldinger

Både Dropzone og Item har støtte for å vise feilmeldinger, men det er ikke likegyldig hvilke feilmeldinger som vises hvor. Hovedregelen er at feilmeldingen skal vises der feilen kan fikses:

Dropzone

Skal vise feilmeldinger om at bruker ikke har lagt ved filer, eller for få filer. Feil med filer som allerede er lagt til skal ikke vises her, men på hver enkelt fil.

Item

Skal vise feil på enkeltfiler, for eksempel for stor, feil format osv. Filer med permanente feil (ikke feil ved opplasting) bør vises i en separat liste.

Feilmeldinger om for mange filer bør vises i en egen Alert over listen med filer.

ErrorSummary

Ved bruk av ErrorSummary bør feil med flere filer oppsummeres i ett punkt, med lenke til knappen på den første filen med feil. Hvis alle feilede filer er samlet under én overskrift, kan dere eventuelt lenke til den overskriften.

Fil-lister

Lister over filer bør lages med <ul> og <li>. Se eksempler.

Validering

Dropzone har innebygget støtte for å validere filstørrelse og filtype. Hvis du definerer filtyper, vil filutforskeren kun la bruker velge blant disse typene, men det vil fortsatt være mulig å dra-og-slippe andre filer.

Du kan også sende inn din egen validator-funksjon for egen valideringslogikk:

<FileUpload.Dropzone
  label="Last opp filer"
  onSelect={(files, { accepted, rejected }) => {
    console.log(rejected);
  }}
  validator={(file: File) => {
    if (list.includes(file.name)) {
      return "Filen eksisterer allerede";
    }
    return true;
  }}
/>

// console
[
  {
    "file": ...,
    "reasons": [
      "Filen eksisterer allerede"
    ]
  }
]

Husk at du ikke kan stole på klientsidevalidering. Format og størrelse bør dobbeltsjekkes på serversiden. Det bør også kjøres virussjekk. For bilder er det en fordel å sjekke kvaliteten hvis mulig.

Props