Dit component ondersteund twee verschillende manieren voor het maken van een upload knop:
input[type="file"]
met een label
elementbutton
elementZie de comments in de HTML. Het gebruik van een input[type="file"]
is semantisch correcter en voorkomt mogelijke clickjacking warnings in Firefox. Het afhandelen van de upload kan aan onchange
worden gehangen.
https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/
<div class="form-group dso-files">
<div class="dso-description dso-rich-content">
Geef een tekening van de nieuwe situatie in 1:100. Een situatietekening geeft een schets van de bestaande en de nieuwe situatie met daarop duidelijk de maatvoering en de schaalaanduiding (1:100).
</div>
<ul class="dso-filelist">
<li>
<div class="dso-filename" id="tekeningen-file-filename-0">
Schetsen_en_foto’s_1.pdf
</div>
<div class="dso-confidential dso-selectable">
<input type="checkbox" id="tekeningen-input-confirm-0" name="" value="" aria-describedby="tekeningen-file-filename-0" />
<label for="tekeningen-input-confirm-0">
Vertrouwelijk
</label>
</div>
<button type="button" aria-describedby="tekeningen-file-filename-0" class="btn btn-link dso-remove"><span>Verwijder document</span></button>
</li>
<li>
<div class="dso-filename" id="tekeningen-file-filename-1">
Bijlagen_hoveniersbedrijf_de_heggeschaar_hoveniers.jpg
</div>
<div class="dso-confidential dso-selectable">
<input type="checkbox" id="tekeningen-input-confirm-1" name="" value="" checked aria-describedby="tekeningen-file-filename-1" />
<label for="tekeningen-input-confirm-1">
Vertrouwelijk
</label>
</div>
<svg class="di di-status-warning">
<use href="../../dso-icons.svg#status-warning" />
</svg>
<button type="button" aria-describedby="tekeningen-file-filename-1" class="btn btn-link dso-remove"><span>Verwijder document</span></button>
</li>
</ul>
<div class="alert alert-warning" role="alert">
<div class="dso-rich-content">
<p>U vraagt of wij een document vertrouwelijk willen behandelen. Hiervoor moet u twee dingen doen:</p>
<ol>
<li>Voeg ook een publiceerbaar document zonder vertrouwelijke informatie toe.</li>
<li>Geef per document de reden op als toelichting op het verzoek in de laatste stap van uw aanvraag.</li>
</ol>
<p>Er zal worden beoordeeld of uw vraag terecht is. U krijgt hiervan bericht.</p>
</div>
</div>
<!-- To use an input type="file" element -->
<div class="dso-file-upload">
<input type="file" id="tekeningen-file-upload" />
<label class="btn btn-link" for="tekeningen-file-upload">
<svg class="di di-plus">
<use href="../../dso-icons.svg#plus" />
</svg><span>Document toevoegen</span>
</label>
</div>
<!-- Or to trigger the upload using a button element (not recommended) -->
<!--
<button type="button"
class="btn btn-link"><svg class="di di-plus">
<use href="../../dso-icons.svg#plus" />
</svg><span >Document toevoegen</span></button>
-->
</div>
{% set localId = generateLocalId(prefix, id) %}
<div {{ className('form-group', 'dso-files', [required, 'dso-required']) }}>
<div class="dso-description dso-rich-content">
{{ description }}
</div>
<ul class="dso-filelist">
{% for file in files %}
{% render '@file-item', {id: localId, filename: file.filename, pos: loop.index0, confidential: file.confidential} %}
{% endfor %}
</ul>
{% if files | map('confidential') | includes(true) %}
{% render '@alert', {modifier: 'warning', message:'
<div class="dso-rich-content">
<p>U vraagt of wij een document vertrouwelijk willen behandelen. Hiervoor moet u twee dingen doen:</p>
<ol>
<li>Voeg ook een publiceerbaar document zonder vertrouwelijke informatie toe.</li>
<li>Geef per document de reden op als toelichting op het verzoek in de laatste stap van uw aanvraag.</li>
</ol>
<p>Er zal worden beoordeeld of uw vraag terecht is. U krijgt hiervan bericht.</p>
</div>
'} %}
{% endif %}
<!-- To use an input type="file" element -->
<div class="dso-file-upload">
<input type="file" id="{{ localId }}-file-upload" />
<label class="btn btn-link" for="{{ localId }}-file-upload">
{% render '@icon' , {icon: 'plus'} -%}<span>Document toevoegen</span>
</label>
</div>
<!-- Or to trigger the upload using a button element (not recommended) -->
<!--
{% render '@button', {label: 'Document toevoegen', modifier: 'link', type: 'button', icon: 'plus'} %}
-->
</div>
id: tekeningen
description: >-
Geef een tekening van de nieuwe situatie in 1:100. Een situatietekening geeft
een schets van de bestaande en de nieuwe situatie met daarop duidelijk de
maatvoering en de schaalaanduiding (1:100).
files:
- filename: Schetsen_en_foto’s_1.pdf
- filename: Bijlagen_hoveniersbedrijf_de_heggeschaar_hoveniers.jpg
confidential: true