Перетащите только изображение загрузки

Question

Не файл, я хочу просто перетащить изображение с помощью перетаскивания. Я думал, что сделаю это в соответствии с расширением картины, но Я понятия не имею, как это сделать

пример:

*ngIf="list.file.name.split('.').pop() == 'png'" 

Можете ли вы сказать мне, если есть другой способ? можешь рассказать как?

HTML-код:

<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 код:

    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);
    }