我要使用Angular，我想包括拖放和选择文件，并在网格中显示选定的文件

Question

我想包括选择文件和拖放文件。这是我的代码。 这是我的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"

删除）=“ removehandler（$ event）” ×ng-template kendogridtoolbartemplate位置=“底部”）

‹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>

这是选择文件或拖动文件的图片文件将显示在网格中，我们可以在其中删除或下载文件