How to convert file to base64 in JavaScript?

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.

Modern ES6 way (async/await)

const toBase64 = file => new Promise((resolve, reject) => {    const reader = new FileReader();    reader.readAsDataURL(file);    reader.onload = () => resolve(reader.result);    reader.onerror = error => reject(error);});async function Main() {   const file = document.querySelector('#myfile').files[0];   console.log(await toBase64(file));}Main();

UPD:

If you want to catch errors

async function Main() {   const file = document.querySelector('#myfile').files[0];   const result = await toBase64(file).catch(e => Error(e));   if(result instanceof Error) {      console.log('Error: ', result.message);      return;   }   //...}

If you're after a promise-based solution, this is @Dmitri's code adapted for that:

function getBase64(file) {  return new Promise((resolve, reject) => {    const reader = new FileReader();    reader.readAsDataURL(file);    reader.onload = () => resolve(reader.result);    reader.onerror = error => reject(error);  });}var file = document.querySelector('#files > input[type="file"]').files[0];getBase64(file).then(  data => console.log(data));