Convert Angular Material File Input to base64 format

Question

I am using angular 1.7 with material design for my project. i am using angular material file input for this but it gives me result in file format. what i need is to convert that file format into base64 format. i have tried some external libraries but it doesn't work for me. can anyone post code or make a codepen/jsfiddle.

score 0 · Answer 1 · answered Jun 04 '17 at 08:14

0

You can try this solution (this is o copy of this post: How to convert file to base64 in JavaScript? ):

function getBase64(file) {
   var reader = new FileReader();
   reader.readAsDataURL(file);
   reader.onload = function () {
     console.log(reader.result);
   };
   reader.onerror = function (error) {
     console.log('Error: ', error);
   };
}

var file = /*Your file goes here*/
getBase64(file); // prints the base64 string

answered Jun 04 '17 at 08:14

Matthias Gwiozda

505
5
14

do you get a console output? the base64 - String is saved in the function in `reader.result` you have to return the value if you want to use it – Matthias Gwiozda Jun 04 '17 at 08:28
can you show me how you set the file - Variable `var file = /*Your file goes here*/` – Matthias Gwiozda Jun 04 '17 at 08:33
i selected the first file like var files = $scope.files[0]; and send this file to function getBase64(files); – ZearaeZ Jun 04 '17 at 08:36
what is the exception saying ? – Matthias Gwiozda Jun 04 '17 at 08:38
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/145791/discussion-between-matthias-gwiozda-and-zearaez). – Matthias Gwiozda Jun 04 '17 at 08:44
Can you make a codepen or jsfiddle for this solution so that i can see how it works properly? – ZearaeZ Jun 04 '17 at 08:56

Convert Angular Material File Input to base64 format

1 Answers1