Anpassad filuppladdningsknapp

Jag tänkte visa hur enkelt det är att ersätta filuppladdningsfältet  <input type="file">  med din egendesignade knapp.

HTML

<input type="file" id="file">
<button id="btn-trigger-file-input">Bläddra...</button>
<span id="chosen-file">Här visas vald fil</span>

CSS

#file {
 position: absolute;
 top: -9999px;
 left: -9999px;
 opacity: 0;
}
#btn-trigger-file-input {
 border: 1px solid #ccc;
 background: #e5e5e5;
 padding: 8px;
 cursor: pointer;
}

Javascript

(function() {
  let fileInput = document.querySelector('#file');
  let button = document.querySelector('#btn-trigger-file-input');
  let chosenFile = document.querySelector('#chosen-file');
 
  button.addEventListener('click', function(e) {
    fileInput.click();
  });
 
  fileInput.addEventListener('change', function(e) {
    chosenFile.innerHTML = e.target.files[0].name;
  });
})()

Se resultatet live här https://jsfiddle.net/grsvsoz3/