File inputs are used to select one or more files from a users device storage.
To render a file input, apply the class a-input to an input type="file" and
add a label next to it.
<input type="file" class="a-input" id="file01">
<label for="file01">No file chosen</label>
File inputs supports a full spectrum of sizes: -sm, -md,
-lg, -xl.
The default size is -md.
<input type="file" class="a-input -sm" id="file01">
<label for="file01">No file chosen</label>
<input type="file" class="a-input -md" id="file01">
<label for="file01">No file chosen</label>
<input type="file" class="a-input -lg" id="file01">
<label for="file01">No file chosen</label>
<input type="file" class="a-input -xl" id="file01">
<label for="file01">No file chosen</label>
This component requires JavaScript to update the label content once a file or files have been selected.
var inputFiles = document.querySelectorAll('input[type="file"].a-input');
Array.prototype.forEach.call(inputFiles, function(input) {
var label = input.nextElementSibling;
input.addEventListener('change', function(e) {
var fileName = '';
if (this.files && this.files.length > 1) {
fileName = this.files.length + ' files selected';
} else {
fileName = e.target.value.split('\\').pop();
}
if (fileName) {
label.innerHTML = fileName;
}
});
});