title: List the selected files in template table angular 2
body: <p>I am new to angular 2. Trying to list the file name in template table selected from the browser. Below is my code</p>
  
  <hr>
  
  <p><strong>Template.html</strong></p>
  
  <pre><code>&lt;input type="file" id="uploadFile" style="display: none" (change)='onClickUploadDocument($event)' multiple&gt;
  &lt;label for="uploadFile"  class="btn btn-primary"&gt;Upload Documents&lt;/label&gt;
  &lt;table cellpadding="4" class="grid" &gt;
  &lt;thead&gt;&lt;tr&gt;&lt;th&gt;&lt;/th&gt;&lt;th&gt;Document Name&lt;/th&gt;&lt;th&gt;Document ID&lt;/th&gt;&lt;th&gt;Document Type&lt;/th&gt;&lt;th&gt;Source&lt;/th&gt;&lt;th&gt;Notes&lt;/th&gt;&lt;th&gt;Action&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;
  &lt;tbody&gt;
      &lt;tr *ngFor="let file of files"&gt;
      &lt;td&gt;&lt;input type="checkbox" checked="checked"&gt;&lt;/td&gt;
      &lt;td &gt;{{file.name}}&lt;/td&gt;
      &lt;td&gt;DC2352&lt;/td&gt;
  &lt;td&gt;&lt;input type="text" class="form-control"&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="text" class="form-control"&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="text" class="form-control"&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-ok" aria-hidden="true"&gt;&lt;/span&gt;&lt;/a&gt; 
              &lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-remove" aria-hidden="true"&gt;&lt;/span&gt;&lt;/a&gt; 
              &lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-pencil" aria-hidden="true"&gt;&lt;/span&gt;&lt;/a&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>Component.ts</strong></p>
  
  <pre><code>import {Component, OnInit, OnChanges} from '@angular/core';
  import {NgClass} from '@angular/common';
  import {ROUTER_DIRECTIVES} from '@angular/router-deprecated';
  
  @Component({
      selector: 'documentManagement',
      templateUrl: 'app/dashboard/features/documents/documentManagement/documentManagementTemplate.html',
      directives: [ROUTER_DIRECTIVES, NgClass]
  })
  
  export class DocumentManagementComponent implements OnInit, OnChanges {
  
      files: any[];
  
      ngOnInit(): void {}
  
      ngOnChanges(): void {}
  
      onClickUploadDocument(event){
          console.log("clicked");
          var file = event.target.files;
  
          console.log(file);
          for (var i = 0; i &lt; file.length; i++) {
              var fileInfo = file[i];
              console.log(fileInfo);
              this.files = fileInfo;
          } 
  
      }
  }
  </code></pre>
  
  <hr>
  
  <p>I am getting following error if I try to apply *ngFor</p>
  
  <p><strong>Error</strong></p>
  
  <pre><code>Error: Cannot find a differ supporting object '[object File]' of type 'Jellyfish.jpg'. NgFor only supports binding to Iterables such as Arrays.
          at new BaseException (exceptions.ts:14)
          at NgFor.Object.defineProperty.set [as ngForOf] (ng_for.ts:48)
          at DebugAppView._View_DocumentManagementComponent0.detectChangesInternal (DocumentManagementComponent.template.js:386)
          at DebugAppView.AppView.detectChanges (view.ts:243)
          at DebugAppView.detectChanges (view.ts:345)
          at DebugAppView.AppView.detectViewChildrenChanges (view.ts:267)
          at DebugAppView._View_DocumentControlPanelComponent3.detectChangesInternal (DocumentControlPanelComponent.template.js:467)
          at DebugAppView.AppView.detectChanges (view.ts:243)
          at DebugAppView.detectChanges (view.ts:345)
          at DebugAppView.AppView.detectContentChildrenChanges (view.ts:261)
  </code></pre>
  
  <hr>
  
  <p>Can someone tell what is the mistake and a solution for this? THANKS</p>