Fileupload

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:

@deprecated Bruk strings={{ forms: { readMore: '…' } }} eller setPktStrings().

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:

@deprecated Bruk strings={{ forms: { optional: '…' } }} eller setPktStrings().

Prop:

requiredTag?

Type:

boolean

Beskrivelse:

Vis 'Må fylles ut'-tag ved etiketten

Prop:

requiredText?

Type:

string

Standardverdi:

"Må fylles ut"

Beskrivelse:

@deprecated Bruk strings={{ forms: { required: '…' } }} eller setPktStrings().

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:

onFileValidate?

Type:

(detail: FileValidateDetail) => void

Beskrivelse:

Low-level escape hatch — Lit-paritet med file-validate. Kalles etter innebygd validering; sett detail.errorMessage for å avvise filen.

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.

Events

Event:

files-changed

Type:

—

Beskrivelse:

Elements: kalles når fil(er) legges til, fjernes eller oppdateres. detail inneholder fil-liste og årsak. React-paritet: onFilesChanged.

Event:

file-validate

Type:

—

Beskrivelse:

Elements: validerings-hook etter innebygd format/størrelse-sjekk. Lytt på eventet og sett detail.errorMessage for å avvise filen. React-paritet: onFileValidate.

Event:

file-upload-requested

Type:

—

Beskrivelse:

Elements: kalles ved uploadStrategy='custom' når brukeren velger fil(er). detail er en FileItem. React-paritet: onFileUploadRequested.

Event:

transfer-cancelled

Type:

—

Beskrivelse:

Elements: kalles når brukeren klikker 'Slett' eller 'Avbryt'. Webappen bør avbryte pågående opplasting for detail.fileId. React-paritet: onTransferCancelled.

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).

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…».