When dealing with three separate file upload inputs, the challenge is to ensure that the uploaded files are not duplicates. Additionally, if the user selects image format files (such as png, jpg, jpeg), they must select all three inputs in image format. On the other hand, if a PDF file is chosen, only PDF format files should be uploaded.
Therefore, the user can upload either all images (png, jpg, jpeg) or PDFs, but not a combination of both.
The approach involves using the ".replace(/^.*\./, "").toLowerCase();" regex to extract file extensions and applying various if-else conditions for validation.
//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() {
// Validation logic goes here
}