Filopplastinger File-input element.
Navn Type Verdi
string
string
string
boolean
string string boolean

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
compact boolean false Gives a more compact version
dataHiddenValue string "" Brukes ifm. mellomlagring
description string "" Beskrivelse teksen under header
disabled boolean false
error-message string "Du må laste opp vedlegg"
ghost-files JSON-array:string "" Brukes ifm. mellomlagring
header string "" Label teksten over fileuploaderen
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
small boolean false Avviklet Bruk compact istedenfor
detailsLabel string "" Fjernet Lager en lk-details med string verdien

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
"header" Filopplastnings tittel
"label" Last opp fil(er) Beskrivelse inni filopplastningsboks
"error-message" Feilmelding
"help-text" Maks filstørrelse; Tillatte filtyper @deprecated help-text ikke lengre i bruk 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



<Last opp>

<Description>

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. 


<form id="test-form" enctype="multipart/form-data" novalidate="" action="" method="post">
  
  <lk-file-uploader guid="fileinput2" input-name="upload2" 
                    label="Last opp et bilde"
                    accept=".png,.jpg,.jpeg"
                    compact
                    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
                    max-mb="4"
                    header="&lt;Header&gt;">
  </lk-file-uploader>
  
  </br>
  </br>

  <lk-file-uploader guid="fileinput5" input-name="upload5" 
                    label="Last opp hva som helst"
                    required
                    checkbox>

                      <div slot="header">
                        <h3>&lt;Last opp&gt;</h3>
                        <p>&lt;Description&gt;</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="&lt;Description&gt;"
                    max-mb="4"
                    details-label="&lt;Description label&gt;"
                    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="&lt;Description label&gt;"
    class="file-upload--large">
</lk-file-uploader>

<h3>default (uten klasse)</h3>
<lk-file-uploader
    guid="fileinput8"
    input-name="upload8"
    details-label="&lt;Description label&gt;">
</lk-file-uploader>