How to convert file to base64 in JavaScript?

javascript base64
Vassily picture Vassily · Mar 29, 2016 · Viewed 360k times · Source

Now I'm getting File object by this line: 

file = document.querySelector('#files > input[type="file"]').files[0]

I need to send this file via json in base 64. What should I do to convert it to base64 string?

Answer

Dmitri Pavlutin picture Dmitri Pavlutin · Mar 29, 2016

Try the solution using the FileReader class:

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 = document.querySelector('#files > input[type="file"]').files[0];
getBase64(file); // prints the base64 string

Notice that .files[0] is a File type, which is a sublcass of Blob. Thus it can be used with FileReader.
See the complete working example.

Related questions

How can you encode a string to Base64 in JavaScript?

I have a PHP script that can encode a PNG image to a Base64 string. I'd like to do the same thing using JavaScript. I know how to open files, but I'm not sure how to do the encoding. I'm …

Read More
How can I convert an image into Base64 string using JavaScript?

I need to convert my image to a Base64 string so that I can send my image to a server. Is there any JavaScript file for this? Else, how can I convert it?

Read More
Base64 encoding and decoding in client-side Javascript

Are there any methods in JavaScript that could be used to encode and decode a string using base64 encoding?

Read More