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= |
accept | csv:string | "" | F.eks.: ".jpg,.jpeg". accept kan kombineres med preset-accept , men accept="*" vil overstyre preset-accept |
allow-multiple-files | boolean | true | |
dataHiddenValue | string | "" | Brukes ifm. mellomlagring |
detailsLabel | string | "" | Lager en lk-details med string verdien |
disabled | boolean | false | |
error-message | string | "Du må laste opp vedlegg" | |
ghost-files | JSON-array:string | "" | Brukes ifm. mellomlagring |
hidden-input-name | string | "attachments" | |
label | string | "Last opp fil(er)" | Tekst for <label> |
max-bytes max-kb max-mb |
number | "" | |
preset-accept | csv:string | "*" | Se oversikt lenger ned |
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.) |
required | boolean | false | |
show-files | boolean | true | |
compact | boolean | false | Gives a more compact version |
boolean | false | Deprecated Use compact instead |
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> |
"header" | Filopplastnings tittel | |
"details" | Beskrivelse under tittel | |
"label" | Last opp fil(er) | Beskrivelse inni filopplastningsboks |
"error-message" | Feilmelding |
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" compact>
</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 et bilde eller dokument"
required
preset-accept="audio,video"
max-mb="4"
header="<Header>">
</lk-file-uploader>
</br>
</br>
<lk-file-uploader guid="fileinput5" input-name="upload5"
label="Last opp hva som helst"
required
checkbox
details-label="<Description label>">
<div slot="header">
<h3><Last opp></h3>
<p><Description></p>
</div>
<div slot="details">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Impedit modi non, numquam labore voluptas accusantium officiis possimus ad tempora maiores ullam dolorem vitae, odio rerum itaque voluptate necessitatibus suscipit esse.
</div>
</lk-file-uploader>
</br>
</br>
<lk-file-uploader guid="fileinput6"
input-name="upload6"
label="Last opp hva som helst"
preset-accept="audio,video"
description="<Description>"
max-mb="4"
details-label="<Description label>"
class="margin-bottom--large">
</lk-file-uploader>
</form>
Utility klasser
file-upload--large
default (uten klasse)
<h2 id="util">Utility klasser</h2>
<h3>file-upload--large</h3>
<lk-file-uploader
guid="fileinput7"
input-name="upload7"
details-label="<Description label>"
class="file-upload--large">
</lk-file-uploader>
<h3>default (uten klasse)</h3>
<lk-file-uploader
guid="fileinput8"
input-name="upload8"
details-label="<Description label>">
</lk-file-uploader>