title: Upload JSON file using Angular 6
body: <p>I'm trying to load a JSON file from the user using this method:</p>
  
  <pre><code>&lt;input
    style="display: none"
    type="file" (change)="onFileChanged($event)"
    #fileInput&gt;
  &lt;button (click)="fileInput.click()"&gt;Select File&lt;/button&gt;
  &lt;button (click)="onUpload()"&gt;Upload!&lt;/button&gt;
  </code></pre>
  
  <p>and this is the code in the component ts file:</p>
  
  <pre><code>export class MyFileUploadComponent {
    selectedFile: File
  
    onFileChanged(event) {
      this.selectedFile = event.target.files[0];
      console.log(this.selectedFile);
      console.log('content: ' + JSON.stringify(this.selectedFile));
    }
  
    onUpload() {
    // upload code goes here
    }
  }
  </code></pre>
  
  <p>the line <code>console.log(this.selectedFile);</code> does provide me with the file meta data which is:</p>
  
  <pre><code>lastModified: 1551625969247
  lastModifiedDate: Sun Mar 03 2019 17:12:49 GMT+0200 (Israel Standard Time) {}
  name: "manuscripts.json"
  size: 6008
  type: "application/json"
  webkitRelativePath: ""
  __proto__: File
  </code></pre>
  
  <p>But when I'm trying to print it's content using <code>JSON.stringify</code> I get: <code>{}</code> (empty file).</p>
  
  <p>What's the cause?</p>
  
  <p>Thanks.</p>