Angular: Return Observable / ES6 Promise from FileReader

Improving upon @karthikaruna's answer above, I'd add with Observables, it's easy to make a .pipe chain return what you want from a File object:

(please note that these types might not be 100% correct).

import { Injectable } from '@angular/core';
import { Observable, Subscriber } from 'rxjs';
import { map } from 'rxjs/operators';
import * as XLSX from 'xlsx';

@Injectable()
export class ExcelReaderService {

    public importFromExcel(ev): Observable<any[]> {
        return this.fileToString(ev.target.files[0])
            .pipe(
                // convert from file contents to Excel rows
                map((binary: string): any[] => {
                    // Converts the excel data in to json
                    const workbook = XLSX.read(binary, { type: 'binary', cellDates: true, cellStyles: true });
                    // only first sheet
                    const excelInJSON = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]]);
                    return excelInJSON;
                }),
            );
    } // end importFromExcel()

    private fileToString(file: File): Observable<string> {
        return Observable.create(
            (sub: Subscriber<string>): void => {
                const r = new FileReader;
                // if success
                r.onload = (ev: ProgressEvent): void => {
                    sub.next((ev.target as any).result);
                };
                // if failed
                r.onerror = (ev: FileReaderProgressEvent): void => {
                    sub.error(ev);
                };
                r.readAsText(file);
            }
        );
    } // end fileToString()

}

This is how I did it, in case anyone wants an Angular service that reads Excel files and responds with an observable of the content as JSON.

I'm using SheetJS for reading the file and outputting JSON.

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import * as XLSX from 'xlsx';

@Injectable()
export class ExcelReaderService {

  constructor() { }

  importFromExcel(ev): Observable<any> {
    let workbook;
    let excelInJSON;

    const fileReader = new FileReader();

    // init read
    fileReader.readAsArrayBuffer((<any>ev.target).files[0]);

    return Observable.create((observer: Subscriber<any[]>): void => {
      // if success
      fileReader.onload = ((ev: ProgressEvent): void => {
        let binary = "";
        let bytes = new Uint8Array((<any>ev.target).result);
        let length = bytes.byteLength;
        for (let i = 0; i < length; i++) {
          binary += String.fromCharCode(bytes[i]);
        }

        // Converts the excel data in to json
        workbook = XLSX.read(binary, { type: 'binary', cellDates: true, cellStyles: true });
        // only first sheet
        excelInJSON = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]]);

        observer.next(excelInJSON);
        observer.complete();
      } 

      // if failed
      fileReader.onerror = (error: FileReaderProgressEvent): void => {
        observer.error(error);
      }
    });
  }

}

From the component, just pass the event to this service as shown below and it will respond with the JSON.

this.excelReaderService.importFromExcel(ev)
  .subscribe((response: any[]): void => {
    // do something with the response
  });

As it's shown in similar case, in order to avoid deferred (anti)pattern FileReader load event should be promisified first:

  let fileReader = new FileReader();
  const fileReaderPromise = new Promise(resolve => fileReader.onload = resolve);

  if (xlsxflag)
    fileReader.readAsArrayBuffer((<any>ev.target).files[0]);
  else
    fileReader.readAsBinaryString((<any>ev.target).files[0]);

  return fileReaderPromise.then(e => {
    let excelInJSON;
    ...
    return excelInJSON;
  });

It can also be converted to an observable with fromEvent:

 const fileReader$ = Observable.fromEvent(fileReader, 'load')
 .map(e => ...)
 .first();

 if (xlsxflag)
    fileReader.readAsArrayBuffer((<any>ev.target).files[0]);
  else
    fileReader.readAsBinaryString((<any>ev.target).files[0]);
    ...

  return fileReader$;