<p>

<div class="uikit-fileupload">
  <input id="{{ include.id }}" type="file" role="button" multiple/>
  <label class="uikit-btn" for="{{ include.id }}"><span>{{ include.label }}</span></label>
</div>

</p>

<script>

function formatBytes(bytes,decimals) {
   if (bytes == 0) return '0 Bytes';
   var k = 1000,
       dm = decimals || 2,
       sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
       i = Math.floor(Math.log(bytes) / Math.log(k));
   return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}

function saveFileData(files) {
  var fileData = Array.prototype.map.call(files, function(file) {
    var [name, ext] = file.name.split('.');

    return {
      name: name,
      ext: ext,
      size: formatBytes(file.size)
    };
  });

  localStorage.setItem('form.files', JSON.stringify(fileData));
}

Array.prototype.forEach.call(document.querySelectorAll('.uikit-fileupload input'), function(input) {
  var label   = input.nextElementSibling;
  var labelVal = label.innerHTML;

  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.querySelector('span').innerHTML = fileName;
    else
      label.innerHTML = labelVal;

    label.classList.add("uikit-btn--tertiary")

    saveFileData(this.files);
    document.getElementById('nextButton').classList.remove("uikit-btn--tertiary");
  });
});

</script>