<form class="file-form" action="#">
    <div class="multiple-upload">
        <div class="example-output"></div>
        <input id="file-upload-1" name="file-upload-1" type="file" multiple aria-labelledby="file-button-1">
        <button id="file-button-1" type="button" class="btn btn-secondary">
            Bijlagen toevoegen
        </button>
    </div>
</form>

Multiple Upload

Based on a HTML5 file upload:
https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications

Using

To start using this component, some JavaScript is needed to initialize it.
Underneath is an example on how to achieve this and should be placed in the Additional component(s) script section as documented in How to use.

<script>
    $("#file-button-1").unbind('click').click(function () {
        $("#file-upload-1").trigger('click');
    });

    const inputElement = document.getElementById("file-upload-1");
    inputElement.addEventListener("change", handleFiles, false);
    function handleFiles() {
        console.log('File List:', this.files);
        var fileNames = $.map(this.files, function(val) { return val.name + '<br />'; });
        $('.example-output').html(fileNames);
    }
</script>

Notes

  • By adding an accept attribute to the input element such as: accept="image/jpeg, image/jpg, .pdf", you can help indicate to the browser the allowed file types, although this may not necessarily replace your own validation.
  • You should handle the file upload using your own script in a way specific to your own application