JSFiddle - React, Tailwind, and code Playground

by Christian Roque

HTML

<!---Upload 1----->
<label for="p-image-1" class="custom-file-upload"> Upload image </label>
<span id="file-image-1"></span>
<input type="file" id="p-image-1" class="product-file-upload" name="p-image-1" accept="image/jpeg">
<br/>
<br/>
<!---Upload 2----->
<label for="p-image-2" class="custom-file-upload"> Upload image </label>
<span id="file-image-2"></span>
<input type="file" id="p-image-2" class="product-file-upload" name="p-image-2" accept="image/jpeg">
<br/>
<br/>
<!---Upload 3----->
<label for="p-image-3" class="custom-file-upload"> Upload image </label>
<span id="file-image-3"></span>
<input type="file" id="p-image-3" class="product-file-upload" name="p-image-3" accept="image/jpeg">

CSS

.product-file-upload {
  display: none;
}

.custom-file-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
}

JavaScript

$("#p-image-1").on("change", function() {
  var fileName = "";
  fileName = $(this).val();
  $("#file-image-1").html(fileName);
});