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>

  

    {{ description }}
  

  
    
    {% for file in files %}
      {% render '@file-item', {filename: file.filename, pos: loop.index0, confidential: file.confidential} %}
    {% endfor %}
  

  {% if files | map('confidential') | includes(true) %}
    {% render '@alert', {modifier: 'warning', message:'
      

        
U vraagt of wij een document vertrouwelijk willen behandelen. Hiervoor moet u twee dingen doen:

        
    
          
  1. Voeg ook een publiceerbaar document zonder vertrouwelijke informatie toe.
    2. 
          
  2. Geef per document de reden op als toelichting op het verzoek in de laatste stap van uw aanvraag.
    3. 
        

        
Er zal worden beoordeeld of uw vraag terecht is. U krijgt hiervan bericht.

      

    '} %}
  {% endif %}

  
  

    
    
  


  
  

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