How to convert Base64 String to javascript file object like as from file input form

Question

I want to convert Base64String extracted from file ex   AAAAA        to a javascript file object   The javascript file object what I mean is like this code    HTML    lt input type  file  id  selectFile   gt     JS       selectFile   on  change   function e      var file   e target files 0      console log file       file  variable is a javascript file object  So I want to convert a base64 string to the javascript file object like that   I just want to get file object by decoding base64 string  encoded by other app from a file  without html file input form   Thank you

User · Answer

I had a very similar requirement  importing a base64 encoded image from an external xml import file   After using xml2json-light library to convert to a json object  I was able to leverage insight from cuixiping s answer above to convert the incoming b64 encoded image to a file object   const imgName   incomingImage  FileName    const imgExt   imgName split      pop    let mimeType    image png   if  imgExt toLowerCase        png         mimeType    image jpeg     const imgB64   incomingImage    ttribute    const bstr   atob imgB64   let n   bstr length  const u8arr   new Uint8Array n   while  n--      u8arr n    bstr charCodeAt n     const file   new File  u8arr   imgName   type  mimeType      My incoming json object had two properties after conversion by xml2json-light  FileName and   ttribute  which was b64 image data contained in the body of the incoming element   I needed to generate the mime-type based on the incoming FileName extension  Once I had all the pieces extracted referenced from the json object  it was a simple task  using cuixiping s supplied code reference  to generate the new File object which was completely compatible with my existing classes that expected a file object generated from the browser  element   Hope this helps connects the dots for others

User · Answer

Heads up   JAVASCRIPT   lt script gt     function readMtlAtClient            mtlFileContent               var mtlFile   document getElementById  mtlFileInput   files 0          var readerMTL   new FileReader               Closure to capture the file information         readerMTL onload    function reader               return function                    mtlFileContent   reader result                 mtlFileContent   mtlFileContent replace  data  base64                        mtlFileContent   window atob mtlFileContent                            readerMTL           readerMTL readAsDataURL mtlFile         lt  script gt    HTML       lt input class  FullWidth  type  file  name  mtlFileInput  value    id  mtlFileInput   onchange  readMtlAtClient    accept   mtl   gt    Then mtlFileContent  has your text as a decoded string

User · Answer

This is the latest async await pattern solution   export async function dataUrlToFile dataUrl  string  fileName  string   Promise lt File gt         const res  Response   await fetch dataUrl       const blob  Blob   await res blob        return new File  blob   fileName    type   image png

User · Answer

const url    data image png base6       fetch url     then res   gt  res blob       then blob   gt        const file   new File  blob    File name    type   image png            Base64 String -  Blob -  File

User · Answer

Way 1  only works for dataURL  not for other types of url    x000D   x000D   function dataURLtoFile dataurl  filename    x000D    x000D          var arr   dataurl split       x000D              mime   arr 0  match            1   x000D              bstr   atob arr 1     x000D              n   bstr length   x000D              u8arr   new Uint8Array n   x000D               x000D          while n--   x000D              u8arr n    bstr charCodeAt n   x000D            x000D           x000D          return new File  u8arr   filename   type mime    x000D        x000D       x000D        Usage example  x000D      var file   dataURLtoFile  data text plain base64 aGVsbG8gd29ybGQ    hello txt    x000D      console log file   x000D   x000D   x000D    Way 2  works for any type of url   http url  dataURL  blobURL  etc       x000D   x000D     return a promise that resolves with a File instance x000D      function urltoFile url  filename  mimeType   x000D          return  fetch url  x000D               then function res  return res arrayBuffer      x000D               then function buf  return new File  buf   filename  type mimeType      x000D             x000D        x000D       x000D        Usage example  x000D      urltoFile  data text plain base64 aGVsbG8gd29ybGQ     hello txt   text plain   x000D       then function file   console log file      x000D   x000D   x000D

[javascript] How to convert Base64 String to javascript file object like as from file input form?

Examples related to javascript

Examples related to html

Examples related to forms

Examples related to file

Examples related to base64