Filopplastinger lk-file-uploader
File-input element.

Komponenter

 depentant-attrs lk-anchor-group lk-badge lk-banner lk-bil lk-breadcrumbs lk-button lk-button-link lk-card lk-carousel lk-checkbox lk-checkbox-group lk-cloner lk-details lk-divider lk-dual-listbox lk-error-summary lk-file-uploader lk-filter lk-icon lk-input-block lk-modal lk-page-header lk-pagination lk-radio-group lk-search lk-select-block lk-spinner lk-tag lk-textarea-block lk-to-top Portalheader Portalsøk Seksjonsintro Side footer Skip-link Søkeresultater Tabeller Mindre brukte Aksjonsheader Aksjonsknapp Ansattsøkeresultater Arrangementsliste Artikkelliste Beskrivelsesliste Brukerinfo Coverbilde Fanenavigering Fremhevet artikkel Kalenderhendelser Knappevelger Kontaktseksjon Ledige stillinger lk-cloud-map lk-cover-image lk-feedback lk-figure lk-map lk-message Magasinsidetopp no-opener no-referral Overskrift med ikon Uthevet blokk Uthevet liste Eksperimentell lk-feedback-form lk-file-upload lk-iframe lk-suggestion Avviklet Alarmsignal Ankerlenker Badge Banner Brødsmuler Definere ikoner Ekstern lenke iframe Ikonliste Interaktive skjema elementer Knappegruppe Knapper lk-beep-test lk-flood-status lk-google-maps lk-google-maps-tile lk-help-text lk-rating lk-read-text lk-select-util lk-show-details lk-show-more lk-site-footer lk-site-header lk-tab-panel Melding Sidetopp Skjemaelementer Sosiale medier Tidslinje Varselboks
webcomponent
Navn Type Verdi
string
string
string
boolean
string
string
Slot Skru av/på slot

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
"checkbox" Checkbox som deaktiverer komponenten
"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.


Vis kode 
<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)

Vis kode 
<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>