File upload

Unable to parse html

const Preview = () => (
  <Field>
    <Label>Last opp profilbilde</Label>
    <Field.Description>
      Filen må være i csv-format og mindre enn 2MB
    </Field.Description>
    <EXPERIMENTAL_FileUpload>
      <Field.Description>Slipp fil her</Field.Description>
      <Button asChild data-variant='secondary'>
        <span>Last opp fil</span>
      </Button>
      <input type='file' />
    </EXPERIMENTAL_FileUpload>
  </Field>
);

render(<Preview />)

File upload er et skjemaelement for å laste opp filer. Komponenten kombinerer et område for å dra og slippe filer med en vanlig filvelger, slik at brukeren kan velge filer enten ved å klikke eller ved å slippe dem i området.

Hvis du trenger avansert filhåndtering med opplastingsstatus per fil, må du selv bygge dette rundt komponenten.

Bruk file upload når

• Brukeren skal laste opp én eller flere filer som en del av et skjema.
• Du ønsker å støtte både dra-og-slipp og klikk for å velge fil.

Unngå file upload når

• Brukeren kun skal velge fra et forhåndsdefinert sett med alternativer.
• Du kan hente inn informasjonen på en enklere måte uten at filopplasting er nødvendig.

Eksempel

Med beskrivelse

Du kan gi en mer utfyllende beskrivelse inni opplastingsområdet.

Unable to parse html

const FileUploadExample = () => (
  <Field>
    <Label>Last opp profilbilde</Label>
    <Field.Description>beskrivelsestekst</Field.Description>
    <EXPERIMENTAL_FileUpload>
      <Field.Description>Slipp fil her</Field.Description>
      <Field.Description>
        Filen må være i csv-format og mindre enn 2MB
      </Field.Description>
      <Button asChild data-variant='secondary'>
        <span>Last opp fil</span>
      </Button>
      <input type='file' />
    </EXPERIMENTAL_FileUpload>
  </Field>
);

render(<FileUploadExample />)

Retningslinjer

Be bare om filopplasting når det er nødvendig. Hvis du kan hente inn informasjonen på en enklere måte, bør du gjøre det i stedet.

Pass på at det alltid finnes en synlig label som beskriver hva som skal lastes opp. Fortell også hvilke krav som gjelder for filene.

Oppgi alltid

• hvilke filtyper som er tillatt
• eventuelle begrensninger på filstørrelse
• hvor mange filer som kan lastes opp
• hva filene skal brukes til

Tekst

Knappeteksten bør være kort og handlingsorientert, f.eks "Velg filer" eller "Velg fil".

Sørg for at feilmeldinger følger retningslinjene for feilmeldinger, og bruk spesifikke feilmeldinger for ulike feilsituasjoner.