angular convert file input to base64

Question

I am trying to parse a file input to base64 in my angular project.

In my template I have:

<input type="file" (change)="handleUpload($event)">

and then my function is this:

handleUpload(event) {
    const file = event.target.files[0];
    const reader = new FileReader();
    reader.readAsDataURL(event);
    reader.onload = () => {
        console.log(reader.result);
    };
}

which gives me this error:

ERROR TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.
    at _global.(anonymous function).(anonymous function) [as readAsDataURL] (webpack-internal:///./node_modules/zone.js/dist/zone.js:1323:60)
    at AccountFormComponent.handleUpload (account-form.component.ts:212)
    at Object.eval [as handleEvent] (AccountFormComponent.html:344)
    at handleEvent (core.js:13547)
    at callWithDebugContext (core.js:15056)
    at Object.debugHandleEvent [as handleEvent] (core.js:14643)
    at dispatchEvent (core.js:9962)
    at eval (core.js:10587)
    at HTMLInputElement.eval (platform-browser.js:2628)
    at ZoneDelegate.invokeTask (zone.js:421)

your are passing the event to the method not the file

Ricardo
– Ricardo

2018-03-18 17:12:53 +00:00
Commented Mar 18, 2018 at 17:12 — Ricardo
– Ricardo, Commented Mar 18, 2018 at 17:12
dumb dumb me...

Sandra Willford
– Sandra Willford

2018-03-18 17:13:50 +00:00
Commented Mar 18, 2018 at 17:13 — Sandra Willford
– Sandra Willford, Commented Mar 18, 2018 at 17:13

Ricardo · Accepted Answer · 2020-10-16 17:41:06Z

51

you are passing the event to the method and not the file.

your method should look like this:

handleUpload(event) {
    const file = event.target.files[0];
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => {
        console.log(reader.result);
    };
}

edited Oct 16, 2020 at 17:41

user8109196

answered Mar 18, 2018 at 17:20

Ricardo

2,48722 silver badges35 bronze badges

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

Collectives™ on Stack Overflow

angular convert file input to base64

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related