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.

Test komponenten

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
Eksempel pÄ vedlegg fileuploadEksempel pÄ bilde fileupload

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
Eksempel pÄ vedlegg fileuploadEksempel pÄ bilde fileupload

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.

Merk: Hvis dere bruker en streng CSP i produksjon og Þnsker lokal bilde-forhÄndsvisning (thumbnail), mÄ img-src tillate blob:. Hold dette avgrenset til img-src (ikke script-src).

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.

Filopplasting med fremdriftsindikatorFilopplasting uten fremdriftsindikator

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 feilmelding.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.
File upload pÄ mobil

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)
File upload anatomi.

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

Controlled eller uncontrolled?

Komponenten kan brukes pÄ begge mÄter. Begge implementasjoner oppfÞrer seg likt: sett value (+ en endringshÄndterer) for controlled, eller defaultValue for uncontrolled. Hvis bÄde value og defaultValue er satt vinner value, og begge implementasjoner logger en advarsel.

Mode Viktige props Hva det gir
Uncontrolled defaultValue Enkel oppstart med intern state i komponenten.
Controlled value + files-changed handler Full kontroll i parent/store/backend-flyt.
Situasjon Anbefaling Hvorfor
Enkelt skjema, lokal filhÄndtering Uncontrolled Minst mulig kode og wiring.
Stegskjema, global state eller autosave Controlled Parent kan styre reset, restore og synkronisering.
Egen opplastingslogikk (uploadStrategy="custom") Controlled (anbefalt) Parent mÄ styre filstatus og eventuelle transfer-data.

Controlled-modus alene slÄr ikke pÄ framdriftsindikatoren. Tre ting mÄ vÊre pÄ plass for Ä vise progress per fil:

  1. uploadStrategy="custom" — appen hĂ„ndterer selve opplastingen.
  2. Appen mater transfer-status tilbake via transfers-propen.
  3. Queue-en rendrer framdrift ut fra disse verdiene (skjer automatisk nÄr de to over er satt).

Opplastingsstrategi

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 kan plugges inn via extraOperations. Hver operasjon er et QueueItemOperation-objekt med en stabil id, en title og valgfrie onClick / renderInlineUI / renderExtendedUI / renderContent / renderHidden. Alle callbacks fĂ„r et felles context-objekt ({ file, disabled, isActive, activate, close, getAttribute, setAttribute, inputName }), som bĂ„de React og Lit deler.

Hvis opplasting av filer er pÄkrevd fÞr man trykker pÄ en eventuell submit-knapp, bruk required prop-en. Er uploadStrategy="form" settes dette pÄ native <input type="file">, slik at nettleserens vanlige skjemavalidering brukes. Bruker man derimot uploadStrategy="custom" valideres kravet ved submit, og en feilmelding vil vises med PktAlert-komponenten.

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

Egenskaper

PktFileUpload

Props

Prop:
name
Type:
string
Beskrivelse:
Navn for innsending
Prop:
label?
Type:
string
Beskrivelse:
Etikett/tittel over komponenten
Prop:
helptext?
Type:
string | ReactNode
Beskrivelse:
Hjelpetekst under etiketten
Prop:
helptextDropdown?
Type:
string
Beskrivelse:
Hjelpetekst som vises i en lukket boks man kan Äpne
Prop:
helptextDropdownButton?
Type:
string
Standardverdi:
"Les mer"
Beskrivelse:
Knappetekst for utvidet hjelpetekst
Prop:
required?
Type:
boolean
Standardverdi:
false
Beskrivelse:
GjÞr feltet obligatorisk. I uploadStrategy='form' brukes native validering pÄ file input. I uploadStrategy='custom' valideres kravet ved submit og komponenten viser feilmelding hvis ingen filer er valgt.
Prop:
value?
Type:
FileItemList
Beskrivelse:
Liste over filer i komponenten. Bruk denne for controlled-modus.
Prop:
defaultValue?
Type:
FileItem[]
Beskrivelse:
Default-verdi nÄr komponenten brukes 'uncontrolled'. Ingen grunn til at denne ikke skal vÊre tom array []
Prop:
onFilesChanged?
Type:
(files: FileItem[]) => void
Beskrivelse:
Kalles nÄr fil(er) legges til, fjernes eller oppdateres
Prop:
uploadStrategy?
Type:
"form" | "custom"
Standardverdi:
"form"
Beskrivelse:
Velg mellom skjemaopplasting (filene sendes nÄr skjemaet sendes inn) og bakgrunnsopplasting (webappen hÄndterer opplasting via onFileUploadRequested og oppdaterer transfers).
Prop:
multiple?
Type:
boolean
Standardverdi:
false
Beskrivelse:
Tillat opplasting av flere filer
Prop:
itemRenderer?
Type:
"filename" | "thumbnail"
Standardverdi:
"filename"
Beskrivelse:
Hvordan filer skal vises i opplastings-kÞen. Enten filnavn eller som thumbnails. Du kan ogsÄ (eksperimentelt) lage din egen komponent.
Prop:
optionalTag?
Type:
boolean
Beskrivelse:
Vis 'Valgfritt'-tag ved etiketten
Prop:
optionalText?
Type:
string
Standardverdi:
"Valgfritt"
Beskrivelse:
Tekst som vises i valgfritt-merkingen
Prop:
requiredTag?
Type:
boolean
Beskrivelse:
Vis 'MĂ„ fylles ut'-tag ved etiketten
Prop:
requiredText?
Type:
string
Standardverdi:
"MĂ„ fylles ut"
Beskrivelse:
Tekst som vises i pÄkrevd-merkingen
Prop:
tagText?
Type:
string
Beskrivelse:
Tekst som vises i en tag ved siden av label
Prop:
disabled?
Type:
boolean
Standardverdi:
false
Beskrivelse:
Deaktiverer hele komponenten - ingen interaksjon mulig
Prop:
errorMessage?
Type:
string
Standardverdi:
"Det oppstod en feil ved opplastingen av fil(ene)."
Beskrivelse:
Feilmelding for Ă„ vise under komponenten (ekstern/programmatisk feil)
Prop:
hasError?
Type:
boolean
Standardverdi:
false
Beskrivelse:
Om komponenten har en feiltilstand
Prop:
allowedFormats?
Type:
string[]
Beskrivelse:
Liste over tillatte filformater. F.eks. ['pdf', 'jpg', 'png'] eller ['image/*', 'application/pdf']
Prop:
formatErrorMessage?
Type:
string
Beskrivelse:
Tilpasset feilmelding ved ugyldig filtype.
Prop:
maxFileSize?
Type:
string | number
Beskrivelse:
Maksimal filstĂžrrelse. F.eks. '5MB', '500KB', '1GB' eller antall bytes
Prop:
onFileValidation?
Type:
(file: File) => string | null
Beskrivelse:
KjĂžrer etter innebygd format/stĂžrrelse-validering. Returner feilmeldingsstreng hvis ugyldig, null hvis gyldig.
Prop:
sizeErrorMessage?
Type:
string
Beskrivelse:
Tilpasset feilmelding ved for stor fil.
Prop:
addCommentsEnabled?
Type:
boolean
Standardverdi:
false
Beskrivelse:
La brukeren skrive en kommentar pr fil. Kommentarene postes i felter med navn {fileupload-navn}-comment
Prop:
enableImagePreview?
Type:
boolean
Standardverdi:
false
Beskrivelse:
Aktiver forhÄndsvisning av bilder i modal (kun for thumbnail-visning)
Prop:
extraOperations?
Type:
Array<QueueItemOperation>
Beskrivelse:
Ekstra operasjoner pr fil (eksperimentelt). Hver operasjon er et objekt med stabil id, title og valgfrie onClick/renderInlineUI/renderExtendedUI/renderContent/renderHidden. Callbacks fÄr et context-objekt med file, disabled, isActive, activate, close, getAttribute og setAttribute.
Prop:
fullwidth?
Type:
boolean
Standardverdi:
false
Beskrivelse:
Om komponenten skal ta full bredde av foreldreelementet
Prop:
onFileUploadRequested?
Type:
(fileItem: FileItem) => void
Beskrivelse:
Ved uploadStrategy='custom' blir denne funksjonen kalt nÄr brukeren velger en eller flere filer. Dette lar webappen sette i gang opplasting i bakgrunnen.
Prop:
onTransferCancelled?
Type:
(fileItemId: string) => void
Beskrivelse:
Kalles nÄr brukeren klikker 'Slett' eller 'Avbryt'. Webappen mÄ dermed avbryte opplastingen av denne fila.
Prop:
renameFilesEnabled?
Type:
boolean
Standardverdi:
false
Beskrivelse:
La brukeren angi et navn pr fil. Filnavnene postes i felter med navn {fileupload-navn}-targetFilename
Prop:
transfers?
Type:
Array<FileTransfer>
Beskrivelse:
Ved uploadStrategy='custom' vil du fortelle komponenten om pÄgÄende overfÞringer her. Hver fil har en progress-verdi.
Prop:
truncateTail?
Type:
number
Beskrivelse:
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.

FileItem

En valgt fil i kĂžen. FileItemList er en array av FileItem. Brukes som parameter i callbacks som onFileUploadRequested og i FileItemList (value / defaultValue).

Prop:
fileId?
Type:
string
Beskrivelse:
Unik id for filen i komponenten.
Prop:
file?
Type:
File
Beskrivelse:
Fil-objektet fra nettleseren.
Prop:
attributes?
Type:
Record<string, unknown>
Beskrivelse:
Metadata per fil (f.eks. targetFilename for visningsnavn).

FileTransfer

Status for én pÄgÄende opplasting nÄr uploadStrategy="custom".

Prop:
fileId?
Type:
string
Beskrivelse:
Kobler til FileItem.fileId.
Prop:
progress?
Type:
number | 'done' | 'error' | 'canceled' | 'queued'
Beskrivelse:
Fremdrift (0..1) eller tilstand.
Prop:
errorMessage?
Type:
string
Beskrivelse:
Feilmelding ved error.
Prop:
showProgress?
Type:
boolean
Beskrivelse:
Vis determinate progress vs. «Laster opp ».