Limit number of image uploads JavaScript

Question

I want to limit the number of image uploads so that the user can include a maximum of 4 images. It does not seem to work just adding a simple if (files.length > 4) statement. I want to prevent user from uploading more than allowed number of files. How is it possible to achieve this and what would be the logic of such solution using JavaScript?

    let inputFile = document.getElementById("addImg1");
    let rowOfPhotos = document.getElementById("row-of-product-photos");

    inputFile.addEventListener("change", function (e) {
      let files = e.target.files;
      let output = rowOfPhotos;

      for (let i = 0; i < files.length; i++) {
        let file = files[i];

        if (file) {
          const reader = new FileReader();
          reader.addEventListener("load", function (e) {
            console.log(this);

            let imageFile = e.target;

            let divDocument = document.createElement("div");
            let divDocumentClose = document.createElement("div");
            let image = document.createElement("img");

            divDocument.setAttribute("class", "id-document");
            divDocumentClose.setAttribute("class", "id-document-close");

            image.setAttribute("class", "image-preview");
            image.setAttribute("style", "width: inherit; height: inherit; border-radius: 20px;");
            image.setAttribute("src", imageFile.result);

            divDocument.appendChild(divDocumentClose);
            divDocument.appendChild(image);
            rowOfPhotos.appendChild(divDocument);
          });

          reader.readAsDataURL(file);
        } else {
          image.style.display = null;
        }
      }
    });
    document.querySelectorAll(".id-document-close").forEach(item => {
      item.addEventListener("click", e => {
        this.parentElement.style.display = "none";
      });
    });

.id-document{
  width: 90px;
  height: 90px;
  background: url(webimage/mario.jpg) no-repeat center center;
  background-size: cover;
  box-sizing: border-box;
  border-radius: 20px;
  position: relative;
  display: inline-block;
  cursor: pointer;
  margin-right: 3%;
}

.id-document-close{
  height: 25px;
  width: 25px;
  position: absolute;
  right: -8px;
  top: -6px;
  border-radius: 100px;
  background: url(icons/close-white.svg) no-repeat center center;
  background-size: 11px;
  background-color: #282b2e;
  cursor: pointer;
}

        <div class="verification-main-input-div">
          <p class="verification-main-text">Add a photo with your item (optional)</p>
          <div id="row-of-product-photos" class="row-of-id-photos">
            <div class="two1" id="addImgLabel1">
              <label for="addImg1" class="input-label inputLabelCss">
                <div class="photosvg">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    class="feather feather-camera camera-icon">
                    <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path>
                    <circle cx="12" cy="13" r="4"></circle>
                  </svg>
                </div>
              </label> <!-- ngIf: images.length<maxImagesForProduct -->
              <input id="addImg1" type="file" accept=".png, .jpg, .jpeg" style="display:none" multiple="">
            </div>
          </div>
        </div>

Answer 1

You can store the number of uploaded files in a variable and check if the number of newly uploaded files combined with the previous uploaded ones exceeds the maximum. Increment the variable each time more files are successfully added and decrease it by one each time an image is closed.

let numOfFiles = 0;
inputFile.addEventListener("change", function (e) {
      let files = e.target.files;
      let output = rowOfPhotos;
      if(numOfFiles + files.length > 4){
        alert("You can only upload at most 4 files!");
        return;
      }
      numOfFiles += files.length;
      //...
      divDocumentClose.addEventListener("click", e => {
              divDocument.style.display = "none";
              numOfFiles--;
      });
      //...
});

Demo:

    let inputFile = document.getElementById("addImg1");
    let rowOfPhotos = document.getElementById("row-of-product-photos");
        let numOfFiles = 0;
    inputFile.addEventListener("change", function (e) {
      let files = e.target.files;
      let output = rowOfPhotos;
            if(numOfFiles + files.length > 4){
        alert("You can only upload at most 4 files!");
        return;
      }
      numOfFiles += files.length;
      for (let i = 0; i < files.length; i++) {
        let file = files[i];

        if (file) {
          const reader = new FileReader();
          reader.addEventListener("load", function (e) {

            let imageFile = e.target;

            let divDocument = document.createElement("div");
            let divDocumentClose = document.createElement("div");
            let image = document.createElement("img");

            divDocument.setAttribute("class", "id-document");
            divDocumentClose.setAttribute("class", "id-document-close");

            image.setAttribute("class", "image-preview");
            image.setAttribute("style", "width: inherit; height: inherit; border-radius: 20px;");
            image.setAttribute("src", imageFile.result);

            divDocument.appendChild(divDocumentClose);
            divDocument.appendChild(image);
            divDocumentClose.addEventListener("click", e => {
              divDocument.style.display = "none";
              numOfFiles--;
            });
            rowOfPhotos.appendChild(divDocument);
          });

          reader.readAsDataURL(file);
        } else {
          image.style.display = null;
        }
      }
    });

.id-document{
  width: 90px;
  height: 90px;
  background: url(webimage/mario.jpg) no-repeat center center;
  background-size: cover;
  box-sizing: border-box;
  border-radius: 20px;
  position: relative;
  display: inline-block;
  cursor: pointer;
  margin-right: 3%;
}

.id-document-close{
  height: 25px;
  width: 25px;
  position: absolute;
  right: -8px;
  top: -6px;
  border-radius: 100px;
  background: url(icons/close-white.svg) no-repeat center center;
  background-size: 11px;
  background-color: #282b2e;
  cursor: pointer;
}

        <div class="verification-main-input-div">
          <p class="verification-main-text">Add a photo with your item (optional)</p>
          <div id="row-of-product-photos" class="row-of-id-photos">
            <div class="two1" id="addImgLabel1">
              <label for="addImg1" class="input-label inputLabelCss">
                <div class="photosvg">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    class="feather feather-camera camera-icon">
                    <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path>
                    <circle cx="12" cy="13" r="4"></circle>
                  </svg>
                </div>
              </label> <!-- ngIf: images.length<maxImagesForProduct -->
              <input id="addImg1" type="file" accept=".png, .jpg, .jpeg" style="display:none" multiple="">
            </div>
          </div>
        </div>