Upload a File and Read Data with FileReader in Angular 2

Question

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:

Html input for file upload

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

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?

The answer(stackoverflow.com/a/40843316/1908296) correct and exact needs for question But I want notify about this answer will give the result of file Reader as binary string not the original string value. — ahmed hamdy
– ahmed hamdy, Commented Mar 23, 2020 at 20:03
check this question stackoverflow.com/q/47151035/1908296, if need load the the original CSV file content — ahmed hamdy
– ahmed hamdy, Commented Mar 23, 2020 at 20:06

slaesh · Accepted Answer · 2021-02-05 09:03:09Z

34

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

edited Feb 5, 2021 at 9:03

answered Nov 28, 2016 at 11:33

slaesh

17k6 gold badges53 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Mustafa Over a year ago

the perfect answer

bluppfisk Over a year ago

according to my linter, however, the result attribute of a FileReader done loading may be an ArrayBuffer OR a string. You should probably prepare for that.

Vinee Over a year ago

can you also tell how can i call function from onload function.

AnorZaken Over a year ago

@bluppfisk Yes and no. What output you get in result is determined by which readAs... method you called. Reading the docs for each read-method tells you which it is. So it is 100% safe to cast to string (or ArrayBuffer) assuming you know which read-method was used - and in practice this is usually known. Specifically result will be an ArrayBuffer if you called readAsArrayBuffer.

Kieran Ryan Over a year ago

This was what I was looking for.. thanks slaesh :-) was grabbing holes in my haircut attempting to persist result from this.fileReader.addEventListener('load', this.handleEvent); - even looked at ngZones for assistance - pah!

|

emrhzc · Accepted Answer · 2019-08-20 11:56:36Z

0

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)

answered Aug 20, 2019 at 11:56

emrhzc

1,49012 silver badges20 bronze badges

Comments

achref akrouti · Accepted Answer · 2020-09-21 10:14:14Z

0

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);
            }
            );
        }
    }

answered Sep 21, 2020 at 10:14

achref akrouti

6551 gold badge7 silver badges21 bronze badges

Collectives™ on Stack Overflow

Upload a File and Read Data with FileReader in Angular 2

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related