CODEWITHSUNDEEP
javascriptangulartypescriptfilereader
kacase
kacase

Reputation: 2899

Upload a File and Read Data with FileReader in Angular 2

I am trying to create an upload form in Angular 2 ts (2.2.1), that allows the upload of e.g. a CSV file, but instead of the file being sent straight to a http service I want the file first to be validated in the browser.

So far I can already upload a file and print it in the console with this code:

  1. Html input for file upload

    <input type="file" (change)="changeListener($event)" #input />

  2. In my angular component I have set up the eventListner and the File reader. 

    export class UploadComponent {

    public fileString;

    constructor() {
        this.fileString;
    }

    changeListener($event): void {
            this.readThis($event.target);
        }

    readThis(inputValue: any): void {
        var file: File = inputValue.files[0];
        var myReader: FileReader = new FileReader();
        var fileType = inputValue.parentElement.id;
        myReader.onloadend = function (e) {
            //myReader.result is a String of the uploaded file
            console.log(myReader.result);

            //fileString = myReader.result would not work, 
            //because it is not in the scope of the callback
        }

        myReader.readAsText(file);
    }
}

This code works perfectly fine so far.

However I have not found a way to store the data from the reader in a way that allows me to access it with my angular component.

The myReader.onloadend() callback function does not have access to the component's variables. Is there some way to inject those variables?

How can I get the read data into the fileString variable in my component?

Upvotes: 14

Views: 60992

Answers (3)

slaesh
slaesh

Reputation: 16917

Do it like this:

myReader.onloadend = (e) => {
   console.log(myReader.result);
   this.fileString = myReader.result as string;
};

So you can access your variables.

For a more detailed explanation: https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Upvotes: 34

achref akrouti
achref akrouti

Reputation: 655

it work, try like this...

this.uploader.uploadAll = () => {
        console.log(this.uploader.queue.length)
        let fileCount: number = this.uploader.queue.length;
        if (fileCount > 0) {
            this.uploader.queue.forEach((val, i) => {
                var reader = new FileReader();
                reader.onloadend = (e) => {
                    var result = reader.result;
                    console.log(i + '/' + result)
                    this.file64.push(result)
                };
                reader.readAsDataURL(val._file);
            }
            );
        }
    }

Upvotes: 0

emrhzc
emrhzc

Reputation: 1480

mxii's answer implicitly casts to string, which didn't work for me, maybe with the newer versions of angular it's not allowed anymore.

what did work for me was; 

JSON.parse(fileReader.result as string)

Upvotes: 0

Related Questions