Pass file contents to NGRX effect in Angular 7

I have the following html/angular in my component:

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

The TS file for the component has:

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

The module TS file:

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

The action file:

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

The effects file:

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

I am trying to figure out how to get the files contents (or file) from the component through the action to the effect to use FileReader. The file being uploaded will be a valid JSON file and I need to get the JSON from that file.

I think I need to do .emit() in the component for something but not sure.

from Pass file contents to NGRX effect in Angular 7