DSO Toolkit homepage

Group Files

Component preview opent in nieuw tabblad

Dit component ondersteund twee verschillende manieren voor het maken van een upload knop:

  • Een input[type="file"] met een label element
  • Een button element

Zie 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&#39;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>

            <dso-icon icon="status-warning"></dso-icon>

            <button type="button" aria-describedby="tekeningen-file-filename-1" class="btn btn-link dso-remove"><span>Verwijder document</span></button>
        </li>

    </ul>

    <dso-alert status="warning">
        <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>
    </dso-alert>

    <!-- 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">
            <dso-icon icon="plus"></dso-icon><span>Document toevoegen</span>
        </label>
    </div>

    <!-- Or to trigger the upload using a button element (not recommended) -->
    <!--
    <button type="button"
  class="btn btn-link"><dso-icon icon="plus"></dso-icon><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) %}
    <dso-alert status="warning">
      <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>
    </dso-alert>
  {% 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">
      <dso-icon icon="plus"></dso-icon><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