JSFiddle - React, Tailwind, and code Playground

by Jordan Sayner

HTML

<label class="form__uploader">
    <span class="form__uploader-input" data-default="Choose file">Choose file</span>
    <input type="file">
</label>

CSS

// for demo
body{
    padding: 50px;
}
fieldset{
  padding: 30px;
}
// /for demo



.form__uploader {
  cursor: pointer;
}
.form__uploader input {
  display: none;
}
.form__uploader span {
    color: #fff;
    margin: 0 0 10px;
    padding: 5px 10px;
    text-decoration: none;
    background: #418edb;
    border-radius: 2px;
    font: normal 14px/1.412 Helvetica;
    cursor: pointer;
}
.form__uploader span:hover{
  background: #2683E1;
}
.form__uploader span.withFile:after{
        content:...

JavaScript

var inputs = document.querySelectorAll('input');

  inputs.forEach(function(input) {
    input.addEventListener('change', function() {
      var label = this.parentElement.querySelector('span');

      if (typeof this.files !== 'undefined') { // Handle modern browsers
        if (this.files.length === 0) {
          label.classList.remove('withFile');
          label.textContent = label.getAttribute('data-default');
        } else {
          var file = this.files[0];
          var name = file.name;
          var size = (file.size / 1048576).toFixed(2); // size in MB
          label.classList.add('withFile');
          label.textContent = name + ' (' + size + 'mb)';
        }
      } else { // Handle older browsers (like IE)
        var name = this.value.split("\\");
        label.classList.add('withFile');
        label.textContent = name[name.length - 1];
      }
    });
  });