You are viewing version 3 of the library, the latest version is
<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

Multiple Upload

Based on a HTML5 file upload:


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.

    $("#file-button-1").unbind('click').click(function () {

    var 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 + '<br />'; });


  • 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