title: Im using angular I want to include both drag drop and choosing files and display selected file in a grid
body: <p>I want to include both choosing file and drag drop of files.here’s the code of mine.
  Here is my upload.html:</p>
  <pre><code> ‹kendo-grid [data]=&quot;myFiles&quot;
   (remove )=&quot;removeHandler ($event)&quot;
   ‹ng-template                    kendoGridToolbarTemplate      position=&quot;bottom&quot; )
  
   ‹input type=&quot;file&quot;             [disabled]=&quot;readonlyMode Il      readonlyVersion&quot; (change)-   &quot;uploadFile($event)&quot; title=&quot;upload&quot;   value-&quot;Upload&quot;/ &gt;
   &lt;/ng-template›
  
    ‹kendo-grid-command-column     title=&quot;Remove&quot; [width]=&quot;220&quot;
    ‹ng-template kendoGridCellTemplate     field-&quot;id&quot; let-value&gt;
  
   ‹button kendoGridRemoveCommand›&lt;span    class=&quot;k-icon k-i-close k-icon-32&quot;   (click)-&quot;showconfirmpopup-true&quot; ›&lt;/span&gt;         &lt;/button&gt;
  ‹kendo-   dialog*ngIf=&quot;showconfirmpopup==true&quot;&gt;
  &lt;div&gt;Are you sure you want to remove     this attachment?k/divf
  ‹div&gt;
  «span›‹button kendoButton (click)-  &quot;delete(value.id)&quot; (click) -&quot;showconfirmpopup-false&quot;›Okay&lt;/button&gt;      &lt;/span&gt;
  «5pan&gt;‹button kendoButton (click)-   &quot;showconfirmpopup=false&quot; ›Cancel&lt;/button&gt;  &lt;/span&gt;
   &lt;/div&gt;
  &lt;/kendo-dialog›
  &lt;/ng-template›
  &lt;/kendo-grid-command-column&gt;
  «kendo-grid-column field-&quot;name&quot;   title-&quot;Name&quot;
  &gt;«/kendo-grid-column&gt;
  ‹kendo-grid-command-column title-&quot;Download&quot; field-&quot;file&quot; [width]=&quot;220'
  ‹ng-template kendoGridCellTemplate        ‹kendo-grid [data]=&quot;myFiles&quot;
  </code></pre>
  <p>(remove )=&quot;removeHandler ($event)&quot;
  ‹ng-template kendoGridToolbarTemplate position=&quot;bottom&quot; )</p>
  <pre><code>‹input type=&quot;file&quot;  [disabled]=&quot;readonlyMode Il readonlyVersion&quot; (change)-&quot;uploadFile($event)&quot; title=&quot;upload&quot;  value-&quot;Upload&quot;/ &gt;
  &lt;/ng-template›
  
  ‹kendo-grid-command-column title=&quot;Remove&quot; [width]=&quot;220&quot;
  ‹ng-template kendoGridCellTemplate field-&quot;id&quot; let-value&gt;
  
  ‹button kendoGridRemoveCommand›&lt;span class=&quot;k-icon k-i-close k-icon-32&quot; (click)-&quot;showconfirmpopup-true&quot; ›&lt;/span&gt;      &lt;/button&gt;
  ‹kendo-dialog*ngIf=&quot;showconfirmpopup==true&quot;&gt;
  &lt;div&gt;Are you sure you want to remove this attachment?k/divf
  ‹div&gt;
  «span›‹button kendoButton (click)-&quot;delete(value.id)&quot; (click) -&quot;showconfirmpopup-false&quot;›Okay&lt;/button&gt;   &lt;/span&gt;
  «5pan&gt;‹button kendoButton (click)-&quot;showconfirmpopup=false&quot; ›Cancel&lt;/button&gt;  &lt;/span&gt;
  &lt;/div&gt;
  &lt;/kendo-dialog›
  &lt;/ng-template›
  &lt;/kendo-grid-command-column&gt;
  «kendo-grid-column field-&quot;name&quot; title-&quot;Name&quot;
   &gt;«/kendo-grid-column&gt;
  ‹kendo-grid-command-column title-&quot;Download&quot; field-&quot;file&quot; [width]=&quot;220'
  ‹ng-template kendoGridCellTemplate let-value&gt;
  ‹button kendoGridRemoveCommand&gt;&lt;span class=&quot;k-icon k-i-download k-icon-32&quot; (click)-&quot;downloadImage (value.file)&quot;≥&lt;/span&gt;&lt;/button&gt;
  &lt;/ng-template&gt;
  &lt;/kendo-grid-command-column&gt;
  &lt;/kendo-grid&gt; let-value&gt;
  ‹button kendoGridRemoveCommand&gt;&lt;span class=&quot;k-icon k-i-download k-icon-32&quot; (click)-&quot;downloadImage (value.file)&quot;≥&lt;/span&gt;&lt;/button&gt;
  
  &lt;/ng-template&gt;
  &lt;/kendo-grid-command-column&gt;
  &lt;/kendo-grid&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/Fh4iL.jpg" rel="nofollow noreferrer">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</a></p>