When File Selected Change Label Contents instead the default text in the label

Question

So, I'm attempting to make my file upload input look a little bit better than the default buttons. All is going well, however, I can't seem to find a jQuery script which can do what I want it to do.

What I want to happen is, when a file isn't selected, I would like the label to display "Choisir le recto", but when a file is selected, I would like it to display the files name, i.e: "example.png" instead of "Choisir le recto".

$('input[type=file]').change(function() {
  var filename = $(this).val().split('\\').pop();
  var idname = $(this).attr('id');
  console.log($(this));
  console.log(filename);
  console.log(idname);
  $('span.' + idname).next().find('span').html(filename);
});

.btnsend {
  display: block;
  visibility: hidden;
  position: absolute;
}

.labelbtn {
  color: #fff;
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  background-color: #0057a0;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}

.labelbtn:hover {
  opacity: 0.8;
  background-color: #0072a0;
}

.sendall {
  margin-top: 30px;
}

<form method="POST" enctype="multipart/form-data">
  <input type="file" name="recto" id="recto" class="btnsend" />
  <label for="recto" class="labelbtn"><span> Choisir le Recto</span></label>
  <input type="file" name="verso" id="verso" class="btnsend" />
  <label for="verso" class="labelbtn"><span>Choisir le Verso</span></label>
  <input type="file" name="selfie" id="selfie" class="btnsend" />
  <label for="selfie" class="labelbtn"><span>Choisir le Selfie</span></label> <br>


  <input type="submit" name="submit" class="sendall">

Answer 1

The issue is due to the way you're attempting to find the relevant span in the DOM. You can just use the this keyword to refer to the input which raised the change event, then next() and find() from there:

$('input[type="file"]').on('change', function() {
  var filename = $(this).val().split('\\').pop();
  $(this).next().find('span').html(filename);
});

.btnsend {
  display: block;
  visibility: hidden;
  position: absolute;
}

.labelbtn {
  color: #fff;
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  background-color: #0057a0;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}

.labelbtn:hover {
  opacity: 0.8;
  background-color: #0072a0;
}

.sendall {
  margin-top: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<form method="POST" enctype="multipart/form-data">
  <input type="file" name="recto" id="recto" class="btnsend" />
  <label for="recto" class="labelbtn"><span>Choisir le Recto</span></label>
  
  <input type="file" name="verso" id="verso" class="btnsend" />
  <label for="verso" class="labelbtn"><span>Choisir le Verso</span></label>
  
  <input type="file" name="selfie" id="selfie" class="btnsend" />
  <label for="selfie" class="labelbtn"><span>Choisir le Selfie</span></label> <br>

  <input type="submit" name="submit" class="sendall" /> 
</form>