Javascript Code Multiple File Input No Duplicates

Javascript Code to Have Multiple File Input Elements on a Web Page and Ensure non of the Files Selected is Duplicate

Home Short:

The Javascript code in the textbox is a very easy and readable way to have multiple file input elements on your web page and ensure non of selected files is duplicate.

// change to the appropriate classname for your image input
  // controls and images that will display images as selected
 const filephoto = document.querySelectorAll(".filephoto"),
       imageupload = document.querySelectorAll(".imageupload");
       
  // create array that is the lenght of number of image/file uploads we have
  // each element of this array will hold the image files name + size and will
  // be checked every time a new image file is selected
 var arrTempImgHolders = Array(filephoto.length).fill(undefined);

filephoto.forEach(function (fp, index) {
   fp.addEventListener('change', function() {
   
        // in case no files even though change event fired
       if(!fp.files.length){
            return false;
       }
       
        // get the first file which will be the image selected
       let file = fp.files[0];
        
        // create a string that joins the files name with files size
        // this will ensure the image is unique and not duplicate
       let imgNameSize = (file.name + file.size);
       
             // uncomment line below to see string of [file.name + file.size]
             //console.log(imgNameSize);
       
        // means the current file select is duplicate because
        // this images name + size is in array [arrTempImgHolders] 
       if(arrTempImgHolders.indexOf(imgNameSize) > -1){
       
            // clear duplicate file from file upload control and html image
           fp.value = "";
           imageupload[index].src = "";
           alert("Duplicate image selected");
           
           
       }else{ // non duplicate image selected so display it
       
            // store this non duplicate image file 
            // name + size to our array [arrTempImgHolders]
           arrTempImgHolders[index] = imgNameSize;
            // convert file object to image blob url to display the image
           imageupload[index].src = URL.createObjectURL(file);

}
      
            // uncomment line below to see contents of [arrTempImgHolders]
            // console.log(arrTempImgHolders);
       
            // uncomment lines below to see contents of [filephoto]
            /*
              filephoto.forEach((fp) => {
                 console.log(fp.files);    
              }); 
            */
       
       
   }); // fp.addEventListener
 });   // filephoto.forEach

source code home