file input validation for images or pdf

Question

I am having 3 separate input filelds which are replaceable. I have given input field name to identify input fields, then I am calling the validation method which is to make sure that input fields does not contain duplicate files and all the three file upload fields should be either images or pdf but can not be both.

While this code is working as intended for the first time but then again if I try to replace the already existed files with new one then it won't work correctly. it will stop taking further inputs.

   <ng-container>
            <span>
<label class="label1 " >
    <div >
    <span><img class="image1 " src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQsS20QLprBvJJNK0msxZmdu6hwqOmSiz1Mp58QLD4W0JKCSXuT" alt="img " width="30 " height="30 " /></span>
            <span style="cursor:pointer;">{{salary1}}</span>
            <span><input type="file" (change)="selectFile($event)" name="salary1" accept=".jpg, .jpeg, .png, .pdf "></span>
            </div>
            </label>
            </span>
             <br>
              <br>
            <span>

        <label class="label1">
        <img class="image2 " src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQsS20QLprBvJJNK0msxZmdu6hwqOmSiz1Mp58QLD4W0JKCSXuT " alt="img " width="30 " height="30 " />

            <span style="cursor:pointer;">{{salary2}}</span>
            <input type="file" (change)="selectFile($event)" name="salary2"  accept=".jpg, .jpeg, .png, .pdf ">
            </label>
            </span>
             <br>
              <br>
            <span>
<label class="label1 ">
        <img class="image3 " src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQsS20QLprBvJJNK0msxZmdu6hwqOmSiz1Mp58QLD4W0JKCSXuT " alt="img " width="30 " height="30 " />

            <span style="cursor:pointer;">{{salary3}}</span>
            <input type="file" (change)="selectFile($event)" name="salary3"  accept=".jpg, .jpeg, .png, .pdf ">
            </label>
            </span>
             <br>
              <br>
            <br>
            <span>
<button >Save</button>
</span>

        </ng-container>

//ts

  salary1 = "Month 1 / Combined";
     salary2 = "Month 2";
     salary3 = "Month 3";
     salary2Disable = true;
     salary3Disable = true;
     storedFiles = [];

     selectFile(event) {
         console.log(event.target.files)
         console.log(event.target.name)
         let files = [].slice.call(event.target.files);
         files.forEach((file) => {
             let found = false;
             for (let i = 0; i < this.storedFiles.length; i++) {
                 if (file.name == this.storedFiles[i].name) {
                     found = true;
                     break;
                 }
             }
             if (!found) {
                 this.storedFiles.push(file);
                 this.salaryValidation();

             }
         });
         if (event.target.name == 'salary1') {
             console.log(this.storedFiles)
             this.salary1 = this.storedFiles[0].name;
             if (this.salary1) {
                 console.log(this.salary1);
                 this.salary2Disable = false;
             }

         } else {
             console.log('nothing bro');
         }

         if (event.target.name == 'salary2') {
             this.salary2 = this.storedFiles[1].name;
             if (this.salary2) {
                 this.salary3Disable = false;
             }

         } else {
             console.log('nothing bro');
         }

         if (event.target.name == 'salary3') {
             this.salary3 = this.storedFiles[2].name;

         } else {
             console.log('nothing bro');
         }
     }

     salaryValidation() {
         const images = /(\.jpg|\.png|\.jpeg)$/i;
         for (let i = 0; i < this.storedFiles.length; i++) {
             if (this.storedFiles.every(file => /\.pdf$/i.test(file.name))) {
                 console.log("all are pdf bro ");

             } else if (this.storedFiles.every(file => images.test(file.name))) {
                 console.log("all are images bro");

             } else {
                 this.storedFiles.splice(
                     this.storedFiles.indexOf(this.storedFiles[i].name),
                     1
                 );
                 alert('You can either upload images or pdf but not both');
                 return false;
             }

         }
     }

editor link

Answer 1

I'm no Javascript expert, but this article makes me think you should define the files variable using let instead of const.

EDIT

const actually means that once the variable is assigned it cannot be assigned again and an attempt to do so will throw an error.

let variables are scoped in the braces {} so the variable will go out of scope once it leaves selectFile().

Answer 2

You can try something like this for file type validation:

Basic example

TS:

 selectFile(event) {
    this.fileData = event.target.files[0]
    if (this.fileData.type == 'image/jpeg' || this.fileData.type == 'application/pdf') {
    } else {
      alert("file type should be image of pdf")
    }

  }