Aksel

Meny

FileUpload

Oppdatert Stabil
GithubYarnEndringslogg

Intro

FileUpload består av et sett med delkomponenter relatert til filopplasting.

Egnet til:

  • La brukere laste opp én eller flere filer.
  • Vise status for opplasting: laster opp, feil, laster ned osv.
  • La brukere dra og slippe filer.
  • Vise liste med vedlegg.

Uegnet til:

  • Forhåndsvisning av filer (vise miniatyrbilder).
  • Validering og virussjekk av filer (må gjøres backend).

Har du innspill til komponenten?

Send forslag

Eksempler

SandboxSandbox
Åpne eksempel i nytt vindu

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:

  • Du kan laste opp dokumenter i PDF- eller Word-format.
  • Filer kan være opptil 10 MB.
  • Du kan legge ved opptil 5 filer.
GjørEksempel på FileUpload som flere setninger i beskrivelsen

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:

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.

Lenker

Props

FileUpload

translations?

  • Type:
    RecursivePartial<{ dropzone: { button: string; buttonMultiple: string; dragAndDrop: string; dragAndDropMultiple: string; drop: string; or: string; disabled: string; disabledFilelimit: string; }; item: { retryButtonTitle: string; deleteButtonTitle: string; uploading: string; downloading: string; }; }>
  • Description:

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

FileUpload.Dropzone

label

  • Type:
    string
  • Description:

icon?

  • Type:
    ComponentType<any>
  • Default:
    CloudUpIcon

translations?

  • Type:
    RecursivePartial<{ button: string; buttonMultiple: string; dragAndDrop: string; dragAndDropMultiple: string; drop: string; or: string; disabled: string; disabledFilelimit: string; }>
  • Description:

multiple?

  • Type:
    boolean
  • Default:
    true
  • Description:

accept?

  • Type:
    string
  • Description:

maxSizeInBytes?

  • Type:
    number
  • Description:

validator?

  • Type:
    ((file: File) => string | true)
  • Description:

onSelect

  • Type:
    (files: FileObject[], partitionedFiles: FilesPartitioned) => void
  • Description:

fileLimit?

  • Type:
    { max: number; current: number; }
  • Description:

error?

  • Type:
    ReactNode
  • Description:

errorId?

  • Type:
    string
  • Description:

disabled?

  • Type:
    boolean
  • Description:

description?

  • Type:
    ReactNode
  • Description:

id?

  • Type:
    string
  • Description:

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLInputElement>
  • Description:

FileUpload.Item

as?

  • Type:
    (("div" | "li") & ElementType<any, keyof IntrinsicElements>)
  • Default:
    "div"
  • Description:

file

  • Type:
    FileItem
  • Description:

onFileClick?

  • Type:
    ((event: MouseEvent<HTMLAnchorElement, MouseEvent>) => void)
  • Description:

href?

  • Type:
    string
  • Description:

error?

  • Type:
    string
  • Description:

status?

  • Type:
    "downloading" | "uploading" | "idle"
  • Default:
    idle
  • Description:

description?

  • Type:
    string
  • Description:

button?

  • Type:
    { action: "delete" | "retry"; onClick: (event: MouseEvent<HTMLButtonElement, MouseEvent>) => void; id?: string; }
  • Description:

translations?

  • Type:
    RecursivePartial<{ retryButtonTitle: string; deleteButtonTitle: string; uploading: string; downloading: string; }>
  • Description:

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

FileUpload.Trigger

multiple?

  • Type:
    boolean
  • Default:
    true
  • Description:

accept?

  • Type:
    string
  • Description:

maxSizeInBytes?

  • Type:
    number
  • Description:

validator?

  • Type:
    ((file: File) => string | true)
  • Description:

onSelect

  • Type:
    (files: FileObject[], partitionedFiles: FilesPartitioned) => void
  • Description:

ref?

  • Type:
    LegacyRef<HTMLInputElement>
  • Description:

Relaterte komponenter