Remove Subsquent Array Items After Array Length Exceeds 10 Items (i.e. remove all of those after the-CodePudding

I have an fileuploader that has preview images for the files to be uploaded. There are frontend and backend validations that prevent more than 10 files being submitted in one upload.

What I would like to do is have it so when more than 10 files are attached, the preview images for anything over the 10th image are removed from the image previews (there are error messages currently outputted too). I have separate functionality regarding the actual FileList of files form the input element, but should be able to get the solution to work for both.

Below is a minimal code representation of the problem. If required I can show the full file uploader code, but there is quite a lot of code unrelated to this issue which may be confusing.

// Generate a preview <img> for each selected file
// the submitData.files array is generated from a change event listener on a file input elment

[...submitData.files].forEach(showFiles);
});


function showFiles(file) {

    let previewImage = new Image();
    previewImage.className = "img upload-preview-image";
    previewImage.src = URL.createObjectURL(file);

    // use decode() method that waits for individual preview images to be added when running validations

    previewImage.decode().then((response) => {

        // validations happen here for each image as part of the showFiles() function called in the forEach loop above

        let imgList = document.querySelectorAll('.upload-preview-image'), // redeclare under new var name inside promise

        if (imgList.length > 10) {

            /*** somehow remove all images from the imgList array after the 10th image,
            either by deleting them or exiting this function when the 10th item is added ***/

        }


    }).catch((encodingError) => {
        // Do something with the error.
    });

}

CodePudding user response：

If you only want to process the first 10 files in the input, then you can slice them off the submitData.files array:

[...submitData.files].slice(0, 10).forEach(showFiles)

CodePudding user response：

To remove all but the first 10 of the selected nodes in imgList (non-live NodeList) from the page you can simply loop through the list and call .remove() on the appropriate items.

let imgList = document.querySelectorAll('.upload-preview-image')
const img_max = 10

for (const [i, el] of [...imgList].entries()) {
  if (i >= img_max) {
    console.log(`remove imgList[${i}] : ${el.innerText}`)
    el.remove()
  } else {
    console.log(`keep imgList[${i}] : ${el.innerText}`)
  }
}

// refresh the static nodelist
imgList = document.querySelectorAll('.upload-preview-image')
console.log(imgList.length)

<ol>
  <li >
    image 1
  </li>
  <li >
    image 2
  </li>
  <li >
    image 3
  </li>
  <li >
    image 4
  </li>
  <li >
    image 5
  </li>
  <li >
    image 6
  </li>
  <li >
    image 7
  </li>
  <li >
    image 8
  </li>
  <li >
    image 9
  </li>
  <li >
    image A
  </li>
  <li >
    image B
  </li>
  <li >
    image C
  </li>
  <li >
    image D
  </li>
  <li >
    image E
  </li>
  <li >
    image F
  </li>
</ol>

Or you can loop through only the ones you need removed:

let imgList = document.querySelectorAll('.upload-preview-image')
const img_max = 10

for (const [i, el] of [...imgList].slice(img_max).entries()) {
  console.log(`remove ${el.innerText}`)
  el.remove()
}

// refresh the static nodelist
imgList = document.querySelectorAll('.upload-preview-image')
console.log(imgList.length)

<ol>
  <li >
    image 1
  </li>
  <li >
    image 2
  </li>
  <li >
    image 3
  </li>
  <li >
    image 4
  </li>
  <li >
    image 5
  </li>
  <li >
    image 6
  </li>
  <li >
    image 7
  </li>
  <li >
    image 8
  </li>
  <li >
    image 9
  </li>
  <li >
    image A
  </li>
  <li >
    image B
  </li>
  <li >
    image C
  </li>
  <li >
    image D
  </li>
  <li >
    image E
  </li>
  <li >
    image F
  </li>
</ol>