title: How to decode a base64 string properly in javascript
body: <p>I tried to convert a base64 string generated from pdf file using <a href="https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL" rel="nofollow noreferrer">FileReader.readAsDataURL()</a> to its original format.<br>In NodeJS I did it like this and it was able generated the pdf to its initial state.</p>
  
  <pre><code>filebuffer = "data:application/pdf;base64,JVBERi0xLjQKJSDi48/..........."
  let base64file = fileBuffer.split(';base64,').pop();
  fs.writeFileSync('download.pdf',base64file,{encoding:'base64'},function(err){
      if(err === null){
          console.log("file created");
          return;
      }
      else{
          console.log(err);
          return;
      }
  })
  </code></pre>
  
  <p>But i tried to do it in HTML + Javascript in <a href="https://stackoverflow.com/questions/59110683/how-to-convert-a-string-to-actual-file-that-was-generated-from-filereader-readas">this way</a>.But in this way , pdf was empty/no letter wasn't in it</p>
  
  <pre><code>let stringval = "data:application/pdf;base64,JVBERi0xLjQKJSDi48/..........."
  let encodedString = stringval.split(';base64,').pop();
  
  let data = atob(encodedString);
  let blob = new Blob([data]);
  
  // //if you need a literal File object
  let file = new File([blob], "filename");
  
  link.href = URL.createObjectURL(file);
  link.download = 'filename';
  </code></pre>
  
  <p>I was Capturing file and converting to base64 string in this way:</p>
  
  <pre><code>captureFile: function () {
  event.preventDefault();
  const file = event.target.files[0];
  $("#labelinput1").html(file.name);
  const reader = new window.FileReader();
  reader.readAsDataURL(file);
  reader.onloadend = () =&gt; {
    var x = reader.result.toString();
    App.buffer2 = x;
    console.log("buffer", App.buffer);
  };}
  </code></pre>
  
  <p>Then after clicking a button , I added the buffer to IPFS node </p>
  
  <pre><code>addfile: async function () {
  if (App.buffer2 === null) return;
  App.node = await window.Ipfs.create()
  App.node.add(App.buffer2, function (errx, resipfs) {
        if (errx === null) {
          console.log(resipfs[0].hash);
          App.buffer2 = null;
          return App.showInfo(resipfs[0].hash);
        }
        else {
          return App.showError(errx.message.toString() + errx.stack.toString());
        }
      });
  }
  </code></pre>
  
  <p>using the IPFS HASH i can get back the base64 encoded string , I retrieved this string in this way: </p>
  
  <pre><code>ipfsfiledownload: async function () {
  var filebuffer = await App.node.cat(hashtext);
  var stringval = filebuffer.toString();
  //convert this string to main file
  }
  </code></pre>
  
  <p>I used <a href="https://www.trufflesuite.com/boxes/pet-shop" rel="nofollow noreferrer">Truffle Petshop</a> and write those functions in top of it. Here is a IPFS hash <code>QmfSefUiwjV44hpfnHyUngGATyHm9M4vN3PzF1mpe59Nn1</code>.  you can try out this Hash value in nodejs with this code</p>
  
  <pre><code>const IPFS = require('ipfs');
  const fs = require('fs');
  const main = async() =&gt; {
      const node = await IPFS.create()
      var fileBuffer = await 
      node.cat('QmfSefUiwjV44hpfnHyUngGATyHm9M4vN3PzF1mpe59Nn1')
      fileBuffer = fileBuffer.toString()
      let base64file = fileBuffer.split(';base64,').pop();
      fs.writeFileSync('download.pdf',base64file, {encoding:'base64'},function(err){
          if(err === null){
              console.log("file created");
              return;
          }
          else{
              console.log(err);
              return;
          }
      })
  }
  
  main()
  </code></pre>
  
  <p>You can find the full code <a href="https://github.com/sabertooth9/dapp-docblock/blob/master/src/js/app.js" rel="nofollow noreferrer">here</a>.
  What I am doing wrong and how to solve it?</p>