Q:

file formatting symmetry validation

I have a case in which I am having 3 separate file upload single inputs. I have to make sure that uploaded file is not a duplicate file as well if the user has selected image format file(png,jpg, jpeg) then he/she must need to select all the three file input of image format(png, jpg, jpeg).
If the user has selected pdf file then he/she must need to upload files only in pdf format.
so either user can upload all images(png,jpg,jpeg) or PDF but not both.
I have used  
.replace(/^.*\./, "").toLowerCase();

rejex to get the file extensions of files and then I am using many if else condition to validate it but still it is not working correctly.
//html
  <ng-container>
            <span>
        <label class="label1">
            <div>
                <span>
                    <img class="image1 " src="assets/images/upload.png " alt="img " width="30 " height="30 " />
                </span>
            <span style="cursor:pointer;">{{salary1}}</span>
            <span>
                    <input type="file" (change)="selectFileS1($event) " accept=".jpg, .jpeg, .png, .pdf ">
                </span>
            </div>
            </label>
            </span>
            <span>
        <label class="label1">
            <img class="image2 " src="assets/images/upload.png " alt="img " width="30 " height="30 " />

            <span style="cursor:pointer;">{{salary2}}</span>
            <input type="file" (change)="selectFileS2($event) " accept=".jpg, .jpeg, .png, .pdf ">
            </label>
            </span>
            <span>
        <label class="label1 ">
            <img class="image3 " src="assets/images/upload.png " alt="img " width="30 " height="30 " />
            <span style="cursor:pointer;">{{salary3}}</span>
            <input type="file" (change)="selectFileS3($event) " accept=".jpg, .jpeg, .png, .pdf ">
            </label>
            </span>
            <br>
        </ng-container>

//ts
selectMonth1 = [];
selectMonth2 = [];
selectMonth3 = [];
salary1  = 'Month / Combined';
salary2  = 'Month2';
salary3  = 'Month3';

 selectFileS1(event) {
    this.selectMonth1 = Array.from(event.target.files);
    console.log(this.selectMonth1);

   if(!this.validationMethod()) {
  this.salary1 = this.selectMonth1[0].name;
}

  }

 selectFileS2(event) {
    this.selectMonth2 = Array.from(event.target.files);
   if(!this.validationMethod()) {
 this.salary2 = this.selectMonth2[0].name;
}

}

selectFileS3(event) {
    this.selectMonth3 = Array.from(event.target.files);
 if(!this.validationMethod()) {
   this.salary3 = this.selectMonth3[0].name;
}

}

  validationMethod() {
    if(this.selectMonth1[0].name !==this.selectMonth2[0].name ||this.selectMonth2[0].name!==this.selectMonth3[0].name || this.selectMonth1[0].name !==this.selectMonth3[0].name) {
        const fileExtensionOfMonth1 = this.selectMonth1[0].name
          .replace(/^.*\./, "")
          .toLowerCase();
        console.log(fileExtensionOfMonth1);
        const fileExtensionOfMonth2 = this.selectMonth2[0].name
          .replace(/^.*\./, "")
          .toLowerCase();
        console.log(fileExtensionOfMonth2);
        const fileExtensionOfMonth3 = this.selectMonth3[0].name
          .replace(/^.*\./, "")
          .toLowerCase();
        console.log(fileExtensionOfMonth3);
        if (
          fileExtensionOfMonth1 === "png" ||
          fileExtensionOfMonth1 === "jpg" ||
          (fileExtensionOfMonth1 === "jpeg" &&
            fileExtensionOfMonth2 === "png") ||
          fileExtensionOfMonth2 === "jpg" ||
          fileExtensionOfMonth2 === "jpeg"
        ) {
          if (fileExtensionOfMonth3 === "pdf") {
            this.selectMonth1.length = 0;
            this.selectMonth2.length = 0;
            this.selectMonth3.length = 0;
           this.toastr.info("","You can either upload images or pdfs but not a combination");
           return false;
          }
        } else if (
          fileExtensionOfMonth1 === "png" ||
          fileExtensionOfMonth1 === "jpg" ||
          (fileExtensionOfMonth1 === "jpeg" &&
            fileExtensionOfMonth3 === "png") ||
          fileExtensionOfMonth3 === "jpg" ||
          fileExtensionOfMonth3 === "jpeg"
        ) {
          if (fileExtensionOfMonth2 === "pdf") {
            this.selectMonth1.length = 0;
            this.selectMonth2.length = 0;
            this.selectMonth3.length = 0;
           this.toastr.info("","You can either upload images or pdfs but not a combination");
            return false;
          }
        } else if (
          fileExtensionOfMonth2 === "png" ||
          fileExtensionOfMonth2 === "jpg" ||
          (fileExtensionOfMonth2 === "jpeg" &&
            fileExtensionOfMonth3 === "png") ||
          fileExtensionOfMonth3 === "jpg" ||
          fileExtensionOfMonth3 === "jpeg"
        ) {
          if (fileExtensionOfMonth1 === "pdf") {
            this.selectMonth1.length = 0;
            this.selectMonth2.length = 0;
            this.selectMonth3.length = 0;
           this.toastr.info("","You can either upload images or pdfs but not a combination");
          }
           return false;
        } else if (fileExtensionOfMonth1 === "pdf") {
          if (
            fileExtensionOfMonth2 === "png" ||
            fileExtensionOfMonth2 === "jpg" ||
            (fileExtensionOfMonth2 === "jpeg" &&
              fileExtensionOfMonth3 === "png") ||
            fileExtensionOfMonth3 === "jpg" ||
            fileExtensionOfMonth3 === "jpeg"
          ) {
            this.selectMonth1.length = 0;
            this.selectMonth2.length = 0;
            this.selectMonth3.length = 0;
           this.toastr.info("","You can either upload images or pdfs but not a combination");
            return false;
          }
        } else if (fileExtensionOfMonth2 === "pdf") {
          if (
            fileExtensionOfMonth1 === "png" ||
            fileExtensionOfMonth1 === "jpg" ||
            (fileExtensionOfMonth1 === "jpeg" &&
              fileExtensionOfMonth3 === "png") ||
            fileExtensionOfMonth3 === "jpg" ||
            fileExtensionOfMonth3 === "jpeg"
          ) {
            this.selectMonth1.length = 0;
            this.selectMonth2.length = 0;
            this.selectMonth3.length = 0;
           this.toastr.info("","You can either upload images or pdfs but not a combination");
            return false;
          }
        } else if (fileExtensionOfMonth3 === "pdf") {
          if (
            fileExtensionOfMonth1 === "png" ||
            fileExtensionOfMonth1 === "jpg" ||
            (fileExtensionOfMonth1 === "jpeg" &&
              fileExtensionOfMonth2 === "png") ||
            fileExtensionOfMonth2 === "jpg" ||
            fileExtensionOfMonth2 === "jpeg"
          ) {
            this.selectMonth1.length = 0;
            this.selectMonth2.length = 0;
            this.selectMonth3.length = 0;
           this.toastr.info("","You can either upload images or pdfs but not a combination");
          }
           return false;
        }

    }

      }
                                                            }

A:

Make it simple. 
<input type="file" (change)="selectFile($event)" [accept]="allowedExtensions">

export class MyComponent {
  allowedExtensions = 'image/*, application/pdf';

  extensions = {
    images: ['jpeg', 'jpg', 'png'], //etc
  };

  constructor(...) {}

  selectFile(event: Event) {
    const input = event.target as HTMLInputElement;
    const FL = input.files;
    const file = FL[0];
    this.setExtensions(file.name.split('.').slice(-1));
    // ... Your factorized logic
  }

  setExtensions(extension: string) {
    if (this.extensions.images.includes(extension)) { this.allowedExtensions = this.extensions.map(ext => `.${ext}`).join(','); }
    else if (extension === 'pdf') { this.allowedExtensions = 'application/pdf' }
    else { this.allowedExtensions = 'image/*, application/pdf'; }
  }
}

This of course can be perfected, but that gives you the general idea of whta to do.

