Dropzone

@/components/ui/Dropzone

En sone for når filen ER hovedhandlingen på flaten — kontoutskrift, tilstandsrapport, vedtekter.

Når brukes den

Bruk den store sonen når filopplasting er hovedhandlingen på flaten.
Bruk kompakt når opplasting bare er ÉN av flere handlinger på en trang linje eller verktøylinje.
Er det ikke en drop-sone i det hele tatt (bare en knapp bak et skjult input-felt), bruk en vanlig Button i stedet.
Vis valgtFilnavn for å gi en kvittering på filen som allerede er valgt, i samme sone.

Eksempler

Standard

Den store forklarte sonen — for når filen er hovedhandlingen på siden.

Slipp fil her eller klikk for å velge

PDF, CSV eller Excel fra nettbanken

<Dropzone
  tittel="Slipp fil her eller klikk for å velge"
  undertekst="PDF, CSV eller Excel fra nettbanken"
  valgtFilnavn={valgtFil?.name}
  busy={analyserer}
  onFiles={files => settFil(files[0])}
/>

Kompakt

Én smal linje for trange flater/verktøylinjer, når opplasting kun er én av flere handlinger.

Last opp vedtekter

Laster

busy låser all interaksjon og viser en spinner med egen tekst mens filen behandles.

Analyserer rapport…

Deaktivert

For når opplasting midlertidig ikke er tilgjengelig.

Slipp fil her eller klikk for å velge

Props

Sveip tabellen for å se hele innholdet

Navn

Type

Default

Beskrivelse

onFiles *

(files: File[]) => void

—

Kalles med filene fra enten slipp eller filvelgeren.

string

—

Videreført til det skjulte filfeltets accept-attributt.

multiple

boolean

—

Tillater valg av flere filer samtidig.

busy

boolean

—

Viser Spinner + busyTekst og slår av all interaksjon.

busyTekst

string

'Laster opp…'

Teksten ved siden av spinneren i busy-tilstand.

tittel

string

'Slipp fil her eller klikk for å velge'

Hovedteksten i tom tilstand.

undertekst

string

—

Forklarende linje under tittelen.

valgtFilnavn

string

—

Viser en kvittering for en allerede valgt fil i stedet for tittel/undertekst.

kompakt

boolean

—

Smal linje i stedet for den store forklarte sonen.

disabled

boolean

—

Deaktiverer sonen.

className

string

—

Ekstra klasser.

Beslektede komponenter

button