Struktur
<lk-file-uploader>
...
</lk-file-uploader>
Attributter
Merknader: må*, bør, husk, ekstra.
| Attributt | Tillatte verdier | Default | Beskrivelse |
|---|---|---|---|
| guid* | string | "" | <input> sin id= og <label> sin for= |
| input-mame | string | "" | <input> sin name= |
| hidden-input-name | string | "attachments" | |
| label | string | "Last opp fil(er)" | Tekst for <label> |
| error-message | string | "Du må laste opp vedlegg" | |
| rename | string | "" | Filene fra getFiles()-metoden får nye filnavn, med nummerering hvis det er flere filer ("_1", "_2", osv.), og bevarer fil-extension (f.eks. ".pdf"). (Filnavnene i brukergrensesnittet og files-property blir ikke endret.) |
| accept | csv:string | "" | F.eks.: ".jpg,.jpeg". accept kan kombineres med preset-accept, men accept="*" vil overstyre preset-accept |
| preset-accept | csv:string | "*" | Se oversikt lenger ned |
| max-bytes max-kb max-mb |
number | "" | |
| allow-multiple-files | boolean | true | |
| required | boolean | false | |
| disabled | boolean | false | |
| small | boolean | false | |
| show-files | boolean | true | |
| ghost-files | JSON-array:string | "" | Brukes ifm. mellomlagring |
| dataHiddenValue | string | "" | Brukes ifm. mellomlagring |
Tillatte verdier
| preset-accept= | Effect |
|---|---|
| "*" | Kombiner alle effekter: |
| "image" | accept=".jpg, .jpeg, .png, .bmp, .jp2, .tif, .tiff" |
| "document" | accept=".pdf, .doc, .docx, .rtf, .ppt, .pptx, .xls, .xlsx, .csv, .odt, .odp, .ods, .odg" |
| "audio" | accept=".flac, audio/mpeg, audio/wave" |
| "video" | accept="video/mpeg, video/mp4" |
| "technical" | accept=".xml, .sos, .sosi, .gml, .ifc" |
Spalter
Spalter/slots brukes for dynamisk innhold/struktur inni komponenten. Ref. Stenciljs.com
| Slot= | Default | Beskrivelse |
|---|---|---|
| "help-text" | Maks filstørrelse; Tillatte filtyper | Blir plassert inni <label> |
Metoder
Merk at alle metoder er asynkrone. Ref. Stenciljs.com
| Metode | Parameter | Retur | Beskrivelse |
|---|---|---|---|
| validate checkValidity |
() | valid:boolean | |
| getFiles | () | Array<File> |
Eksempler
Denne komponenten er implementert som en webkomponent, og kan enkelt legges inn med en enkelt custom HTML-tag.
<form id="test-form" enctype="multipart/form-data" novalidate="" action="" method="post">
<lk-file-uploader guid="fileinput1" input-name="upload1" rename="test" small>
</lk-file-uploader>
<lk-file-uploader guid="fileinput2" input-name="upload2"
label="Last opp et bilde"
accept=".png,.jpg,.jpeg" allow-multiple-files="false">
</lk-file-uploader>
<lk-file-uploader guid="fileinput3" input-name="upload3"
label="Last opp et bilde eller dokument"
required
preset-accept="image,document" max-mb="2">
</lk-file-uploader>
<lk-file-uploader guid="fileinput4" input-name="upload4"
label="Last opp hva som helst"
required
accept="*">
</lk-file-uploader>
</form>