p-fileUpload：上传后如何读取文件

Question

I try to read a file uploaded with the component below from the prime-ng library.

My html component:

<h3 class="first">Upload an excel file</h3>
<p-fileUpload name="myfiles[]"
              chooseLabel="Choose a file"
              uploadLabel="Show data
              cancelLabel="Cancel"
              accept=".csv"
              maxFileSize="1000000"
              auto="auto"
              customUpload="true"
              (uploadHandler)="myUploader($event)">
  <ng-template pTemplate="toolbar">
    <p-button label="Show data" icon="fa fa-upload" iconPos="left" (onClick)="myUploaderEnd($event)"></p-button>
  </ng-template>
  <ng-template pTemplate="content">

  </ng-template>
</p-fileUpload>

<p *ngIf="datas.length > 1">{{datas[2].reference}}</p>
<p>{{debug}}</p>

My TypeScript component:

import { Component, OnInit } from '@angular/core';
import {Message} from "primeng/api";
import {Data} from "../../shared/data";
import {DataService} from "../../services/data.service";
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 = "";
  fileLines:string[] = [];
  datas:Datas[] = new Array<Datas>();
  debug: string = "";
  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+"----"+this.fileBuffer;
  }

  readFile(file: File) {

    var reader = new FileReader();
    reader.onload = () => {
      this.fileBuffer+=reader.result;
    };
    reader.readAsText(file);
    this.fileLines = this.fileBuffer.split("\n");
  }
  
}

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

I would like to read data from file at the first click and i dont explain why i need two clicks.

Thank you.

Answer 1

During debugging the reader.onload event is the last part of code called so...

  export class FileComponent {
  uploadedFiles: any[] = [];
  fileBuffer:string = "";
  fileLines:string[] = [];
  debug: string = "";
  file: File;
  reader: FileReader;

  constructor(private router: Router,private importService: ImportService ) {
    this.importService.setActiveIndex(0);
    this.reader = new FileReader();
    this.reader.onload = () => {
      this.fileBuffer=this.reader.result;
      this.fileLines = this.fileBuffer.split("\n");
      this.debug += ""+this.uploadedFiles[0].name+"----"+this.fileBuffer+"!!!!!!";
      this.importService.setActiveIndex(1);
      this.router.navigate(["/app/import/consulter"]);
    };

  }

  myUploader(event) {
    for(let file of event.files) {
      this.uploadedFiles.push(file);
    }
  }

  myUploaderEnd(event) {
    this.readFile(this.uploadedFiles[0]);
  }

  readFile(file: File) {
    this.reader.readAsText(file);
  }

Answer 2

This is how I'm reading the file in p-fileupload:

html file:

<p-fileUpload 
    [files]="externalFiles" 
    #uploader 
    [multiple]="false" 
    accept="image/*" 
    maxFileSize="1000000" 
    [showUploadButton]="false"
    [showCancelButton]="false" 
    (onSelect)="onSelectImage($event.files)" 
    (onRemove)="onRemoveImage($event)">
</p-fileUpload>

TS file:

public onSelectImage(evt: any) {
   this.uploadedFile = evt[0];
}

You should be able to get the uploaded file from evt[0]