typescript - Skicka filinnehåll till NGRX-effekt i Angular 7

Jag har följande HTML/Angular i min komponent:

<div class="block">
    <label id="lbl">File </label>
    <input #fileInput type='file'/>
    <button class="btn btn-sm"  (click)="_uploadFile()">Upload The JSON File</button>
</div>

TS-filen för komponenten har:

@Output() uploadFile = new EventEmitter();
    _uploadFile() {
    this.uploadFile.emit();
}

Modulens TS-fil:

    uploadFile() {
        this.store.dispatch(new PageActions.UploadFile());
    }

Åtgärdsfilen:

export class UploadFile implements Action {
    readonly type = PageActionTypes.UploadFile;
    constructor(public payload: File) { }
}

Effektfilen:

@Effect()
uploadFile$: Observable<Action> = this.actions$.pipe(
    ofType(PACtions.PageActionTypes.UploadFile),
    map( action => action.payload ),
    // ...
);

Jag försöker lista ut hur man får filernas innehåll (eller filen) från komponenten genom åtgärden till effekten för att använda FileReader. Filen som laddas upp kommer att vara en giltig JSON-fil och jag behöver få JSON från den filen.

Jag tror att jag behöver göra .emit() i komponenten för något, men är inte säker.

Svar #1

För att få innehållet i JSON-filen behöver du använda FileReader.

Här är en enkel implementering av det.

<div class="block">
  <label id="lbl">File </label>
  <input #fileInput type='file' (change)="onChange($event)"/>
  <button class="btn btn-sm"  (click)="uploadFile()">Upload The JSON File</button>
</div>

Och i din component.ts lyssnar du på change-händelsen som kommer att triggas när användaren laddar upp filen. Därifrån, efter att ha parsat JSON-värdena, kommer vi att lagra objektet i uploadedData-egenskapen.

Att klicka på knappen kommer att utlösa uploadFile-metoden, och därifrån kan du skicka åtgärden för att vidarebefordra värdena av uploadedData (som innehåller objektet från den uppladdade JSON-filen) för vidare manipulation i din redux/ngrx-store.

export class AppComponent  {
  uploadedData: any;

  onChange(event) {
    const reader = new FileReader();
    reader.onload = e => {
      const raw = (<FileReader>e.target).result as string;
      const res = JSON.parse(raw);
      this.uploadedData = res;
    }
    reader.readAsText(event.target.files[0]);
  }

  uploadFile() {
    console.log(this.uploadedData);
    // this.store.dispatch(new PageActions.UploadFile(this.uploadedData));
  }

}

Här är en demo.

Dessutom bör du inte använda File som typdefinition för payloaden, eftersom vi faktiskt har parsat filinnehållet. Du kan använda någon annan anpassad interface för att definiera typdefinitionerna för dina uppladdade data.

export class UploadFile implements Action {
  readonly type = PageActionTypes.UploadFile;
  constructor(public payload: any) { }
}