Group Files

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">
                Schetsen_en_foto’s_1.pdf
            </div>
            <div class="dso-confidential dso-selectable">
                <input type="checkbox" id="input-confirm-0" name="" value="" />
                <label for="input-confirm-0">
                    Vertrouwelijk
                </label>
            </div>

            <button type="button" class="btn btn-link dso-remove"><span>Verwijder document</span></button>
        </li>

        <li>
            <div class="dso-filename">
                Bijlagen_hoveniersbedrijf_de_heggeschaar_hoveniers.jpg
            </div>
            <div class="dso-confidential dso-selectable">
                <input type="checkbox" id="input-confirm-1" name="" value="" checked />
                <label for="input-confirm-1">
                    Vertrouwelijk
                </label>
            </div>
            <svg class="di di-status-warning">
                <use href="../../dso-icons.svg#status-warning" />
            </svg>
            <button type="button" 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="file-upload" />
        <label class="btn btn-link" for="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>

<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', {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="file-upload" />
    <label class="btn btn-link" for="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>

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