File inputs

In order to use a file input just use an input type="file" with the class a-input and add a label next to it.

<input type="file" class="a-input" id="file01">
<label for="file01">No file chosen</label>

We have two modifiers in relation to the size of the component.

• -small
• -large

small size

large size

Example

<input type="file" class="a-input -small" id="file01">
<label for="file01">No file chosen</label>

JavaScript

This component needs JavaScript in order to update the label content once a file or files are selected.

The next piece of JavaScript is an example of how it should work.

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;
    }
  });
});