javascript - issue with multiple custom choose file

Question

this is my code i want more than 1 custom choose file upload in place of this label

<form>
<input type="file" id="file-upload" multiple required />
<image for="file-upload">Upload file</>
<div id="file-upload-filename"></div>

input[type="file"] { z-index: -1; position: absolute; opacity: 0; }

   input:focus + label {
  outline: 2px solid;
   }
  <script>
  var input = document.getElementById( 'file-upload' );
  var infoArea = document.getElementById( 'file-upload-filename' );

  input.addEventListener( 'change', showFileName );

  function showFileName( event ) {


   var input = event.srcElement;

   var fileName = input.files[0].name;

   infoArea.textContent = 'File name: ' + fileName;
          }

question from:https://stackoverflow.com/questions/66062032/issue-with-multiple-custom-choose-file

Answer 1

There's actually no problem of HTML or JS, u have a -1 z-index, that's because the input wasn't showing up, just change the z-index value to 1

Also, you only take one file, make a for to take all files

var input = document.getElementById('file-upload');
var infoArea = document.getElementById('file-upload-filename');

input.addEventListener('change', showFileName);

function showFileName(event) {
  var input = event.srcElement;
  infoArea.innerHTML = "";
  for (let index = 0; index<input.files.length; index++) {
    const element = input.files[index]
    var fileName = element.name;
    infoArea.innerHTML += '<p>File name: ' + fileName+"</p>";
  }
}

input[type="file"] { 
   z-index: 1;
   position: absolute;
   opacity: 0;
}

input:focus + label {
  outline: 2px solid;
}

<form>
  <input type="file" id="file-upload" multiple required />
  <label for="file-upload">Upload file</label>
</form>
<div id="file-upload-filename"></div>