Issue with 2 file upload button

user_7805668 0
Viewed 123

I have two upload button (Upload Photo) & (Upload Signature). The issue is on same time only one button is uploading file second button is not uploading file, when I change the input ID on that time both buttons not working, I have placed both html code and script code and I want uploaded file name with path, Please fix the issue.

// This script is for photo upload button

const realFileBtn = document.getElementById("real-file-upload");
const customBtn = document.getElementById("custom-button");
const customTxt = document.getElementById("custom-text");

customBtn.addEventListener("click", function() {
  realFileBtn.click();
});

realFileBtn.addEventListener("change", function() {
  if (realFileBtn.value) {
    customTxt.innerHTML = realFileBtn.value.match(
      /[\/\\]([\w\d\s\.\-\(\)]+)$/
    )[1];
  } else {
    customTxt.innerHTML = "No file chosen, yet.";
  }
});


// This script is for signature upload button

const realFileBtn = document.getElementById("real-file-upload");
const customBtn = document.getElementById("custom-button");
const customTxt = document.getElementById("custom-text");

customBtn.addEventListener("click", function() {
  realFileBtn.click();
});

realFileBtn.addEventListener("change", function() {
  if (realFileBtn.value) {
    customTxt.innerHTML = realFileBtn.value.match(
      /[\/\\]([\w\d\s\.\-\(\)]+)$/
    )[1];
  } else {
    customTxt.innerHTML = "No file chosen, yet.";
  }
});
<div class="col-md-4">
  <input type="file" id="real-file-upload" hidden="hidden" />
  <button type="button" id="custom-button">Upload Photo</button>
  <span id="custom-text">No file chosen, yet.</span>
</div>

<div class="col-md-4">
  <input type="file" id="real-file-signature" hidden="hidden" />
  <button type="button" id="custom-button">Upload Signature</button>
  <span id="custom-text">No file chosen, yet.</span>
</div>

html javascript
1 Answers

You need to delegate

  1. I changed id to class everywhere
  2. I wrapped the two sets in one container

const container = document.getElementById("container")
container.addEventListener("click", function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("custom-button")) tgt.closest("div").querySelector(".file-upload").click()
});

container.addEventListener("change", function(e) {
  const tgt = e.target;
  const parent = tgt.closest("div")
  const realFileBtn = parent.querySelector(".file-upload")
  const customTxt = parent.querySelector(".custom-text")
  if (realFileBtn.value) {
    customTxt.innerHTML = realFileBtn.value.match(
      /[\/\\]([\w\d\s\.\-\(\)]+)$/
    )[1];
  } else {
    customTxt.innerHTML = "No file chosen, yet.";
  }
});
.custom-button {
  padding: 10px;
  color: white;
  background-color: #009297;
  border: 1px solid #009297;
  border-radius: 5px;
  cursor: pointer;
}

.custom-button:hover {
  background-color: #00b28f;
}

.custom-text {
  margin-left: 10px;
  font-family: sans-serif;
  color: #aaa;
}
<div id="container">
  <div class="col-md-4">
    <input type="file" class="file-upload" hidden="hidden" />
    <button type="button" class="custom-button">Upload Photo</button>
    <span class="custom-text">No file chosen, yet.</span>
  </div>

  <div class="col-md-4">
    <input type="file" class="file-upload" hidden="hidden" />
    <button type="button" class="custom-button">Upload Signature</button>
    <span class="custom-text">No file chosen, yet.</span>
  </div>
</div>

user_2957830
Related