<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>
Based on a HTML5 file upload:
https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications
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');
});
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 val.name + '<br />'; });
$('.example-output').html(fileNames);
}
</script>
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.