Im using angular I want to include both drag drop and choosing files and display selected file in a grid

Question

I want to include both choosing file and drag drop of files.here’s the code of mine. Here is my upload.html:

 ‹kendo-grid [data]="myFiles"
 (remove )="removeHandler ($event)"
 ‹ng-template                    kendoGridToolbarTemplate      position="bottom" )

 ‹input type="file"             [disabled]="readonlyMode Il      readonlyVersion" (change)-   "uploadFile($event)" title="upload"   value-"Upload"/ >
 </ng-template›

  ‹kendo-grid-command-column     title="Remove" [width]="220"
  ‹ng-template kendoGridCellTemplate     field-"id" let-value>

 ‹button kendoGridRemoveCommand›<span    class="k-icon k-i-close k-icon-32"   (click)-"showconfirmpopup-true" ›</span>         </button>
‹kendo-   dialog*ngIf="showconfirmpopup==true">
<div>Are you sure you want to remove     this attachment?k/divf
‹div>
«span›‹button kendoButton (click)-  "delete(value.id)" (click) -"showconfirmpopup-false"›Okay</button>      </span>
«5pan>‹button kendoButton (click)-   "showconfirmpopup=false" ›Cancel</button>  </span>
 </div>
</kendo-dialog›
</ng-template›
</kendo-grid-command-column>
«kendo-grid-column field-"name"   title-"Name"
>«/kendo-grid-column>
‹kendo-grid-command-column title-"Download" field-"file" [width]="220'
‹ng-template kendoGridCellTemplate        ‹kendo-grid [data]="myFiles"

(remove )="removeHandler ($event)" ‹ng-template kendoGridToolbarTemplate position="bottom" )

‹input type="file"  [disabled]="readonlyMode Il readonlyVersion" (change)-"uploadFile($event)" title="upload"  value-"Upload"/ >
</ng-template›

‹kendo-grid-command-column title="Remove" [width]="220"
‹ng-template kendoGridCellTemplate field-"id" let-value>

‹button kendoGridRemoveCommand›<span class="k-icon k-i-close k-icon-32" (click)-"showconfirmpopup-true" ›</span>      </button>
‹kendo-dialog*ngIf="showconfirmpopup==true">
<div>Are you sure you want to remove this attachment?k/divf
‹div>
«span›‹button kendoButton (click)-"delete(value.id)" (click) -"showconfirmpopup-false"›Okay</button>   </span>
«5pan>‹button kendoButton (click)-"showconfirmpopup=false" ›Cancel</button>  </span>
</div>
</kendo-dialog›
</ng-template›
</kendo-grid-command-column>
«kendo-grid-column field-"name" title-"Name"
 >«/kendo-grid-column>
‹kendo-grid-command-column title-"Download" field-"file" [width]="220'
‹ng-template kendoGridCellTemplate let-value>
‹button kendoGridRemoveCommand><span class="k-icon k-i-download k-icon-32" (click)-"downloadImage (value.file)"≥</span></button>
</ng-template>
</kendo-grid-command-column>
</kendo-grid> let-value>
‹button kendoGridRemoveCommand><span class="k-icon k-i-download k-icon-32" (click)-"downloadImage (value.file)"≥</span></button>

</ng-template>
</kendo-grid-command-column>
</kendo-grid>

here is the picture of ui after choosing file or drag drop of file it will be shown in the grid where we can remove or download the file