How to create multiple custom input files on one page-CodePudding

Scenario says: There should be several input files on one page. And in each of the input files, they can drag or select the file to place their desired file on the page. The problem is that when a file is selected or dragged, it does not appear in the file-return class. Thank you in advance for your cooperation.

var fileInput= document.querySelectorAll( ".upload--input" ),  
    button= document.querySelectorAll( ".upload--label" ),
    the_return= document.querySelectorAll(".file-return");
            
for (let i= 0; i< button.length; i  ) {
     button[i].addEventListener( "keydown", function( event ) {  
       if ( event.keyCode == 13 || event.keyCode == 32 ) {  
           this.previousElementSibling.focus();
          }  
       }); 
     }

for (let i= 0; i< button.length; i  ) {
    button[i].addEventListener( "click", function( event ) {
      this.previousElementSibling.focus();
      return false;
    });             
}

for (let i= 0; i < fileInput.length; i  ) {
     fileInput[i].addEventListener( "change", function( event ) {  
       the_return.innerHTML = this.value;  
     });            
}

.upload--input__custom{
    border: 1px dashed black;
    height: 200px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.upload--container {
    position: relative;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.upload--container p{
    color: blue;
    margin-bottom: .75rem;
    font-size: 17px;
}

.upload--label {
    width: fit-content !important;
    display: block;
    padding: 12px 20px;
    background: yellow;
    color: #fff !important;
    font-size: 1em;
    transition: all 0.4s;
    cursor: pointer;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
}

.upload--label::after{
    content: unset !important;
}

.upload--input {
    opacity:0;
    width: 100% !important;
    height: 100%;
    padding: 14px 0;
    cursor: pointer;
    width: fit-content;
    position: absolute;
    left:0;
    top: 0;
    z-index: 1000;
}
  
.file-return {
    margin: 0;
    width: 70%;
    height: 30px;
    background-color: burlywood;
}
.file-return:not(:empty) {
    margin: 1em 0;
    text-align: center;
}
.file-return {
    font-style: italic;
    font-size: 0.9em;
    font-weight: bold;
}

.file-return:not(:empty):before {
    content: "Selected file: ";
    font-style: normal;
    font-weight: normal;
}

<div class="upload--input__custom">
     <div class="upload--container"> 
          <p>Drop files here or</p> 
          <input class="upload--input" id="my-file" type="file">
          <label tabindex="0" for="my-file" class="upload--label">Select Files</label>
          <p class="file-return"></p>
     </div>
</div>



<div class="upload--input__custom">
     <div class="upload--container"> 
          <p>Drop files here or</p> 
          <input class="upload--input" id="my-file" type="file">
          <label tabindex="0" for="my-file" class="upload--label">Select Files</label>
          <p class="file-return"></p>
     </div>
</div>

CodePudding user response：

On "change" event, instead of using this.value, you can ritrieve file information via this.files. It's an array, if you show on console like this

console.log("all files",this.files);

you'll see all values.

To retrieve first file's name only: this.files[0].name

console.log("first file",this.files[0].name);

I don't understand the_return.innerHTML command, you have multiple p with same class, you should use id instead of class.

CodePudding user response：

It is enough to put (this.nextElementSibling.nextElementSibling.innerHTML= this.value; ) instead of (the_return.innerHTML = this.value;)

for (let i = 0; i < fileInput.length; i  ) {
     fileInput[i].addEventListener( "change", function( event ) { 
     // the_return.innerHTML = this.value; 
         this.nextElementSibling.nextElementSibling.innerHTML= this.value; 
     });            
}