Fileupload

Release dato: 16.02.2026

Sist oppdatert: 18.02.2026

File upload lar brukeren laste opp vedlegg og bilder. Komponenten støtter drag and drop, filvelger, flere filer, kommentarer og forhåndsvisning av bilder. Dette krever at serveren som tar i mot skjemadataene støtter filopplasting. På mobil kan man brukeren velge å ta et bilde med kamera, eller velge en eksisterende fil.

Relaterte komponenter

Varianter

File upload kan brukes i to forskjellige typer basert på hva du forventer at brukeren skal laste opp.

Type	Bruk
Vedlegg	Laster opp dokumenter og andre filtyper, viser filnavn i listeform
Bilde	Laster opp bilder og viser forhåndsvisning i kort

File upload gir også muligheten til mer funskjonalitet i de opplastede filene (dette gjelder ikke bildevisningen).

Funksjonalitet	Bruk
Statisk	Viser liste over filer med navn
Med kommentar	Viser feltet “Legg til kommentar” ved hver fil
Med navneendringer	Lar brukeren redigere visningsnavnet til filen

Retningslinjer for bruk

Bruk file upload når

brukeren skal sende inn dokumentasjon, skjema, kvitteringer eller bilder som del av en prosess

Unngå fileupload når

du egentlig bare ber brukeren velge noe som allerede finnes i systemet, da er det bedre med select, combobox eller søk
du bruker filopplasting som en omvei for informasjon som kunne vært fylt inn som tekst

Når skal du bruke bilde-preview i file upload?

Bruk bildevarianten (preview) når det viktigste for brukeren er å se hva bildet viser, ikke bare hvilket filnavn det har.

Vis forhåndsvisning i et kort med filnavn og handling
Vurder å begrense antall bilder, og fortell tydelig hvis det er en øvre grense

Vi anbefaler ikke å kombinere preview av bilder og filer, dersom bruker kan laste opp både bilder og filer, anbefaler vi vanlig listevisning av opplastede elementer.

Gi tydelig tilbakemelding på status

Vis alltid hvilket steg filen er i: venter, laster opp, ferdig eller feilet. Det kan være lurt å bruk fremdriftsindikator for større filer eller når opplastning kan ta tid.

Husk at status også må være lesbar med skjermleser, ikke bare med farge og animasjon.

Drag and drop med alternativ

Drag and drop oppleves effektivt, men kan være vanskelig for enkelte brukere og på mobil. Selv om komponenten er fleksibel, anbefaler vi å alltid ha både drag and drop og lenke for å velge fil/bilde, og unngå å gjøre drag and drop til eneste måte å laste opp filer på.

Gjør slik

Eksempel på drag and drop med alternativ for å legge til filer — Gi brukeren mulighet til å både dra en fil inn og velge fil via klikk på lenke

Unngå

Eksempel på drag and drop uten alternativ for å legge til filer — Unngå å kun gi brukeren mulighet til å dra filer inn i en file upload

Gi nok informasjon og riktig feilmelding

Tillat bare relevante filformater, og vis dette eksplisitt i hjelpeteksten inne i selve feltet. Dette kan presiseres i hjelpetekst.
Sett en fornuftig grense for filstørrelse, og forklar hvorfor store filer ikke kan lastes opp.
Gi konkrete råd ved feil, for eksempel at brukeren kan komprimere et bilde eller lagre som et annet format.

Feilmeldingen må opptre i riktig kontekst. Gir du feil på opplastet fil skal dette vises under hele feltet. Dersom det er en feil i filen eller opplastningen feiler, skal dette vises på den aktuelle filen.

Eksempel på fileupload med feilet opplasting av fil.

Responsivitet

File upload skal fungere godt på alle skjermstørrelser og ikke dekke for mye av innholdet.

Dropzonen skalerer i bredde
På små skjermer kan linjelange filnavn brytes eller trunkeres med “…”
Drag and drop fungerer dårlig på mobil, så brukeren må ha et alternativ. Gi brukeren mulighet til å klikke på en lenke eller drop zonen med klikk.

Universell utforming

File upload er et skjemaelement og bør følge de samme prinsippene som andre felter i Punkt.

Feilmeldinger

Feilmeldinger skal være tydelige, konkrete og plassert nær feltet:

Fortell hva som er feil, og hva brukeren må gjøre for å rette det
Marker både komponenten og den konkrete filen som har feil
Ikke vis feilmeldinger kun med fargeendring

Les mer om universell utforming av file upload:

Anatomi

Element	Beskrivelse
1. Label	Tittel/etikett over feltet (valgfritt)
2. Hjelpetekst	Forklaring under feltet (valgfritt)
3. Dropzone	Gir brukeren mulighet til å dra inn filer
4. Beskrivende tekst	Tekst med lenke og informasjon om filformat
5. Fil under opplastning	Fil som lastes opp (med progressbar)
6. Ferdig opplastet fil	Fil som er lastet opp
7. Handlinger	Mulighet for å legge til handlinger (rediger, kommentar eller slett)

Implementasjon i kode

Hvordan ta komponenten i bruk?

Testing

For web component-varianten (<pkt-fileupload>), må dere i JSDOM (eller liknende) vente til custom elementet er registrert før dere tester:

await window.customElements.whenDefined("pkt-fileupload");

For React-komponenten (PktFileUpload) trengs ikke dette, men i testmiljø kan dere måtte polyfille ResizeObserver og DataTransfer. data-testid (og andre input-attributter) videresendes til den underliggende native <input type="file">.

Bruk i skjema

I React-implementasjonen kan komponenten brukes både som ‘controlled’ og ‘uncontrolled’. I tilfelle ‘controlled’, må webappen holde state, og angi denne i value-attributten. Webappen må også angi onFilesChanged-attributten for å ta i mot oppdateringer.

Uansett kan komponenten brukes på to forskjellige måter:

med uploadStrategy="form", hvor komponenten oppfører seg som en <input type='file' />. Brukeren velger en eller (ved multiple) flere filer, og disse lastes opp når brukeren submitter skjemaet.
med uploadStrategy="custom", hvor webapplikasjonen må implementere egen logikk for å laste opp filer, for eksempel via XHR. Dette gjør det mulig å vise en framdriftsindikator for opplastingen.

Både i form- og custom-modus kan komponenten ha noen tilleggsfunksjoner:

mulighet for å angi eget filnavn (renameFilesEnabled), hvor et ekstra input-felt lar brukeren angi et nytt filnavn
mulighet for å gi en kommentar til hver fil (addCommentsEnabled), hvor et textarea lar brukeren skrive en kommentar i fritekst
(eksperimentelt) andre tilleggsfunksjoner som webappen kan tilby ved å implementere typen QueueItemExtension, og plugges inn i extraOperations

Her er et ganske komplett eksempel på bruk av både form- og custom-varianten:

Et server-endepunkt som tar i mot en filopplasting kan se sånn ut:

Props og tokens

Egenskaper

Prop	Type	Beskrivelse
`name`	`string`	Navn for innsending
`value`	`FileItemList`	Liste over filer i komponenten. Bruk denne for controlled-modus.
`defaultValue`	`FileItemList`	Default-verdi når komponenten brukes 'uncontrolled'. Ingen grunn til at denne ikke skal være tom array `[]`
`onFilesChanged`	`(files: FileItemList) => void`	Kalles når fil(er) legges til, fjernes eller oppdateres
`multiple`	`boolean`	Tillat opplasting av flere filer
`addCommentsEnabled`	`boolean`	La brukeren skrive en kommentar pr fil. Kommentarene postes i felter med navn `{fileupload-navn}-comment`
`renameFilesEnabled`	`boolean`	La brukeren angi et navn pr fil. Filnavnene postes i felter med navn `{fileupload-navn}-targetFilename`
`uploadStrategy`	`'form' \| 'custom'`	Velg mellom skjemaopplasting (filene sendes når skjemaet sendes inn) og bakgrunnsopplasting (webappen håndterer opplasting via `onFileUploadRequested` og oppdaterer `transfers`).
`itemRenderer`	`'filename' \| 'thumbnail' \| ItemRendererType`	Hvordan filer skal vises i opplastings-køen. Enten filnavn eller som thumbnails. Du kan også (eksperimentelt) lage din egen komponent.
`truncateTail`	`number`	Hvordan lange filnavn skal forkortes med ellipse i køen. Med `4` vil filnavnet vises som `langt-filnavn-med ... .pdf`. Med verdi `0` kommer ellipsen til slutt.
`fullWidth`	`boolean`	Om komponenten skal ta full bredde av foreldreelementet
`allowedFormats`	`string[]`	Liste over tillatte filformater. F.eks. ['pdf', 'jpg', 'png'] eller ['image/*', 'application/pdf']
`formatErrorMessage`	`string`	Tilpasset feilmelding ved ugyldig filtype.
`maxFileSize`	`string \| number`	Maksimal filstørrelse. F.eks. '5MB', '500KB', '1GB' eller antall bytes
`sizeErrorMessage`	`string`	Tilpasset feilmelding ved for stor fil.
`onFileValidation`	`(file: File) => string \| null`	Kjører etter innebygd format/størrelse-validering. Returner feilmeldingsstreng hvis ugyldig, null hvis gyldig.
`errorMessage`	`string`	Feilmelding for å vise under komponenten (ekstern/programmatisk feil)
`hasError`	`boolean`	Om komponenten har en feiltilstand
`disabled`	`boolean`	Deaktiverer hele komponenten - ingen interaksjon mulig
`label`	`string`	Etikett/tittel over komponenten
`helptext`	`string \| ReactNode`	Hjelpetekst under etiketten
`optionalTag`	`boolean`	Vis 'Valgfritt'-tag ved etiketten
`requiredTag`	`boolean`	Vis 'Må fylles ut'-tag ved etiketten
`enableImagePreview`	`boolean`	Aktiver forhåndsvisning av bilder i modal (kun for thumbnail-visning)
`extraOperations`	`Array<QueueItemExtension>`	Ekstra operasjoner pr fil (eksperimentelt). Hvis du trenger flere operasjoner enn kommentar, filnavn og slett, kan du implementere det som en egen komponent
`onFileUploadRequested`	`(fileItem: FileItem) => void`	Ved `uploadStrategy='custom'` blir denne funksjonen kalt når brukeren velger en eller flere filer. Dette lar webappen sette i gang opplasting i bakgrunnen.
`transfers`	`Array<FileTransfer>`	Ved `uploadStrategy='custom'` vil du fortelle komponenten om pågående overføringer her. Hver fil har en progress-verdi.
`onTransferCancelled`	`(fileItemId: string) => void`	Kalles når brukeren klikker 'Slett' eller 'Avbryt'. Webappen må dermed avbryte opplastingen av denne fila.