title: p-fileUpload : how to read file after upload
body: <p>I try to read a file uploaded with the component below from the prime-ng library.</p>
  <p>My html component :</p>
  <pre><code>&lt;h3 class=&quot;first&quot;&gt;Upload an excel file&lt;/h3&gt;
  &lt;p-fileUpload name=&quot;myfiles[]&quot;
                chooseLabel=&quot;Choose a file&quot;
                uploadLabel=&quot;Show data
                cancelLabel=&quot;Cancel&quot;
                accept=&quot;.csv&quot;
                maxFileSize=&quot;1000000&quot;
                auto=&quot;auto&quot;
                customUpload=&quot;true&quot;
                (uploadHandler)=&quot;myUploader($event)&quot;&gt;
    &lt;ng-template pTemplate=&quot;toolbar&quot;&gt;
      &lt;p-button label=&quot;Show data&quot; icon=&quot;fa fa-upload&quot; iconPos=&quot;left&quot; (onClick)=&quot;myUploaderEnd($event)&quot;&gt;&lt;/p-button&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate=&quot;content&quot;&gt;
  
    &lt;/ng-template&gt;
  &lt;/p-fileUpload&gt;
  
  &lt;p *ngIf=&quot;datas.length &gt; 1&quot;&gt;{{datas[2].reference}}&lt;/p&gt;
  &lt;p&gt;{{debug}}&lt;/p&gt;
  </code></pre>
  <p>My TypeScript component :</p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import {Message} from &quot;primeng/api&quot;;
  import {Data} from &quot;../../shared/data&quot;;
  import {DataService} from &quot;../../services/data.service&quot;;
  import {Routes, RouterModule, Router} from '@angular/router';
  
  @Component({
    selector: '....',
    templateUrl: './file-upload-data.component.html',
    styleUrls: ['./file-upload-data.component.css']
  })
  export class FileComponent implements OnInit {
    dataService: DataService = new DataService();
    uploadedFiles: any[] = [];
    fileBuffer:string = &quot;&quot;;
    fileLines:string[] = [];
    datas:Datas[] = new Array&lt;Datas&gt;();
    debug: string = &quot;&quot;;
    file: File;
  
    constructor(private router: Router) { }
  
    ngOnInit() {
    }
  
  
    myUploader(event) {
      for(let file of event.files) {
        this.uploadedFiles.push(file);
      }
    }
  
    myUploaderEnd(event) {
      this.readFile(this.uploadedFiles[0]);
      //this.datas= this.dataService.populateDatas(this.fileLines);
      this.debug = this.uploadedFiles[0].name+&quot;----&quot;+this.fileBuffer;
    }
  
    readFile(file: File) {
  
      var reader = new FileReader();
      reader.onload = () =&gt; {
        this.fileBuffer+=reader.result;
      };
      reader.readAsText(file);
      this.fileLines = this.fileBuffer.split(&quot;\n&quot;);
    }
    
  }
  </code></pre>
  <p>The first time i click on the button which call the the function : myUploaderEnd i dont have any data , the value of fileBuffer is null.
  The second time i click on the same button i have value in the variable ...</p>
  <p>I would like to read data from file at the first click and i dont explain why i need two clicks.</p>
  <p>Thank you.</p>