How to deal with FileReader returns either ArrayBuffer, or String in TypeScript


March 2019


7 time


I have chased myself in a circle and now time to ask for help. I've got the following (Typescript) service that opens a file reader, and depending upon the file type, calls either readAsText(), or readAsArrayBuffer(). I have a wrapper class (MyDocument) for the text the fileReader will return, as well as some meta data about the doc. In the MyDocument Class, I define a field called docContent: string. This is where the trouble begins. Because of the conditional if statement (Bolded in the code) that picks readAsText or readAsArray buffer, the compiler doesn't like the assignment of the fileReader Results to docConent because it COULD be a string, or ArrayBuffer. So I modify the field to be: docContent: string | ArrayBuffer thinking how clever I am. BUT now that the field can be either a string, or ArrayBuffer, the compiler won't let me manipulate the docContents field (Like split('\n') because split does not belong to ArrayBuffer. I know there must be a more elegant solution to the problem but I'm too close to it to see clearly. Would appreciate any help.

    public readFile(files: FileList): MyDocument {
    this.myDocument = new MyDocument();

    if (files && files[0] && files[0].size > 0) {
        this.fileToRead = files[0];
        this.myDocument.fileName =;
        this.myDocument.fileSize = this.fileToRead.size;
        this.myDocument.fileType = this.fileToRead.type;
    else {
        const message = "Either no file selected, or file has zero size";


    if (this.fileToRead) {
        var fr = new FileReader();

        fr.onloadend = () => {
            if (this.myDocument.fileType == "text/plain") {
                this.myDocument.docContents = fr.result;
            } else {
                let extractedText = this.extractTextUsingSolr(fr.result);


        ***if (this.fileToRead.type == 'text/plain') {
        else {

        return this.myDocument;
    else {
        console.log('No file selected!');



0 answers