const productPhotoBox = document.querySelector(".product-photo-box");
const readUrl = document.querySelector("#readUrl");
const cameraIconImage = document.querySelector(".camera-icon-image");
const addPhotoTitle = document.querySelector(".add-photo-title");

productPhotoBox.onclick = () => {
  readUrl.click();
};
document.getElementById("readUrl").addEventListener("change", function () {
  if (this.files[0]) {
    var picture = new FileReader();
    picture.readAsDataURL(this.files[0]);
    picture.addEventListener("load", function (event) {
      cameraIconImage.style.display = "none";
      addPhotoTitle.style.display = "none";
      productPhotoBox.classList.add("active");
      document
        .getElementById("uploadedImage")
        .setAttribute("src", event.target.result);
      document.getElementById("uploadedImage").style.display = "block";
    });
  }
});
