Drag and drop only image upload - html

Question

Not the file, I want just drag the image with drag and drop.
I thought I would do it according to the extension of the picture but
I have no idea how to do it
example:
*ngIf="list.file.name.split('.').pop() == 'png'"
Can you tell me if there's another way? can you tell us how?
html code:
<div method="post" >
<div (drop)="ondrop($event)" (dragover)="ondragover($event)" (dragend)="ondragend($event)" id="holder1">
<div class="scrollbar style-1">
<div id="fileDragName" class="input-div-image">
<input name="dragAndDrop" (change)="handleFileSelect($event)" id="filesMain" type="file" required="required" multiple="multiple" />
<h3 class="yazi"> Drag and drop or <h3 class="turuncu-renk"> selected file </h3>
</h3>
<li *ngFor="let list of deneme; let i = index">
<div >
{{list.file.name.split('.').slice(0, -1).join('.')}}
</div>
<div id="progress" class="progress-style" >
<p-progressBar *ngIf="list.progressDurumu" [value]="list.percantage"></p-progressBar>
</div>
</div>
</li>
</div>
</div>
</div>
</div>
.ts code:
ondragover(ev) {
const holder = document.getElementById('holder1');
holder.className = 'hover'
return false;
}
ondragend(ev) {
const holder = document.getElementById('holder1');
holder.className = ''
return false;
}
ondrop(e) {
const holder = document.getElementById('holder1');
holder.className = ''
e.preventDefault();
this.readfiles(e.dataTransfer.files);
this.imageUpload();
}
readfiles(files) {
this.files = files;
}
handleFileSelect(evt) {
this.files = evt.target.files;
this.imageUpload();
}
imageUpload() {
setTimeout(() => {
this.progress.percentage = 0;
this.sonuc = this.files;
for (let i = 0; i < this.sonuc.length; i++) {
this.deneme.push({file: this.sonuc[i] , percantage: 0 , output: null });
this.currentFileUpload = this.sonuc[i];
const reader = new FileReader();
reader.onload = (event: any) => {
this.deneme[this.deneme.length - this.sonuc.length + i].output = event.target.result;
};
reader.readAsDataURL(this.sonuc[i]);
this.userService.imageCreate(this.currentFileUpload).subscribe(event => {
if (event.type === HttpEventType.UploadProgress ) {
this.deneme[this.deneme.length - this.sonuc.length + i].percantage = Math.round(event.loaded / event.total * 100 );
} else if (event instanceof HttpResponse ) {
setTimeout(() => {
this.deneme[this.deneme.length - this.sonuc.length + i].progressDurumu = false;
console.log('Upload images!');
}, 500); }
});
}
}, 51);
}