angular - p-fileUpload: hur man läser fil efter uppladdning

Jag försöker läsa en fil som laddats upp med komponenten nedan från prime-ng-biblioteket.

Min html-komponent:

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

Min TypeScript-komponent :

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");
  }
  
}

Första gången jag klickar på knappen som anropar funktionen: myUploaderEnd har jag inga data, värdet på fileBuffer är null. Andra gången jag klickar på samma knapp har jag värde i variabeln ...

Jag skulle vilja läsa data från filen vid första klicket och jag förklarar inte varför jag behöver två klick.

Tack.

Svar #1

Under felsökning är reader.onload-händelsen den sista delen av koden som kallas, så ...

  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);
  }

Svar #2

Så här läser jag filen i p-fileupload:

html-fil:

<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-fil:

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

Du bör kunna få den uppladdade filen från evt[0]

Relaterade artiklar