How to convert file to base64 in JavaScript

Question

UPD TypeScript version is also available in answers Now I m getting File object by this line  file   document querySelector   files  gt  input type  quot file quot     files 0   I need to send this file via json in base 64  What should I do to convert it to base64 string

User · Answer

const fileInput   document querySelector  input     fileInput addEventListener  change    e    gt        get a reference to the file const file   e target files 0       encode the file using the FileReader API const reader   new FileReader    reader onloadend        gt            use a regex to remove data url part     const base64String   reader result          replace  data                 replace                      log to console        logs wL2dvYWwgbW9yZ        console log base64String      reader readAsDataURL file

User · Answer

If you re after a promise-based solution  this is  Dmitri s code adapted for that   function getBase64 file      return new Promise  resolve  reject    gt        const reader   new FileReader        reader readAsDataURL file       reader onload        gt  resolve reader result       reader onerror   error   gt  reject error            var file   document querySelector   files  gt  input type  file     files 0   getBase64 file  then    data   gt  console log data

User · Answer

Modern ES6 way  async await   const toBase64   file   gt  new Promise  resolve  reject    gt        const reader   new FileReader        reader readAsDataURL file       reader onload        gt  resolve reader result       reader onerror   error   gt  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   gt  Error e       if result instanceof Error          console log  Error     result message         return

User · Answer

I have used this simple method and it s worked successfully  function  uploadImage e      var file   e target files 0       let reader   new FileReader        reader onload    e    gt        let image   e target result      console log image            reader readAsDataURL file

User · Answer

onInputChange evt        var tgt   evt target    window event srcElement      files   tgt files      if  FileReader  amp  amp  files  amp  amp  files length            var fr   new FileReader            fr onload   function                  var base64   fr result              debugger                    fr readAsDataURL files 0

User · Answer

Building up on Dmitri Pavlutin and joshua paling answers  here s an extended version that extracts the base64 content  removes the metadata at the beginning  and also ensures padding is done correctly   function getBase64 file      return new Promise  resolve  reject    gt        const reader   new FileReader        reader readAsDataURL file       reader onload        gt          let encoded   reader result toString   replace   data                     if   encoded length   4   gt  0            encoded        repeat 4 -  encoded length   4                  resolve encoded              reader onerror   error   gt  reject error

User · Answer

JavaScript btoa   function can be used to convert data into base64 encoded string

User · Answer

TypeScript version const file2Base64    file File  Promise lt string gt    gt        return new Promise lt string gt    resolve reject   gt             const reader   new FileReader             reader readAsDataURL file            reader onload        gt  resolve reader result toString              reader onerror   error   gt  reject error

User · Answer

Here are a couple functions I wrote to get a file in a json format which can be passed around easily         takes an array of JavaScript File objects     function getFiles files            return Promise all files map file   gt  getFile file                  take a single JavaScript File object     function getFile file            var reader   new FileReader            return new Promise  resolve  reject    gt                reader onerror        gt    reader abort    reject new Error  Error parsing file                  reader onload   function                         This will result in an array that will be recognized by C  NET WebApi as a byte                   let bytes   Array from new Uint8Array this result                       if you want the base64encoded file you would use the below line                  let base64StringFile   btoa bytes map  item    gt  String fromCharCode item   join                          Resolve the promise with your custom file structure                 resolve                        bytes  bytes                      base64StringFile  base64StringFile                      fileName  file name                       fileType  file type                                               reader readAsArrayBuffer file                            using the functions with your file       file   document querySelector   files  gt  input type  file     files 0      getFile file  then  customJsonFile    gt               customJsonFile is your newly constructed file           console log customJsonFile                  if you are in an environment where async await is supported      files   document querySelector   files  gt  input type  file     files     let customJsonFiles   await getFiles files         customJsonFiles is an array of your custom files     console log customJsonFiles

User · Answer

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  gt  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

[javascript] How to convert file to base64 in JavaScript?

Examples related to javascript

Examples related to base64