Reverse FileReader - Reassamble file from string

Question

I get the file to a string:

const r = new FileReader()
r.readAsText(file, 'UTF-8')
r.onload = (evt) => {
     this.file = evt.target.result
};

After upload a Zip, Text or Image file my string looks like: data:text/plain;base64,VTJGc.....

How can i reverse the readAsText and get a downloadable file?

Have a look at this post: [JavaScript: save base64 string as file](https://stackoverflow.com/questions/16996319/javascript-save-base64-string-as-file). (Your string is encoded in base64.) — code, Feb 22 '22 at 00:59

code · Accepted Answer · 2022-02-22T01:26:56.160

The "string" you got is a Base64 URL (which you can copy and paste into a new browser tab and view the contents), and it actually simplified downloading the file, so please don't reverse the process.

One way is to create a link element in your HTML and click on it:
_{The example won't work because it's in an embed that has limited permissions.}

function download(b64, name) {
  const a = document.createElement("a");
  a.href = b64;
  a.download = name;
  document.body.appendChild(a);
  a.click();
}

download("data:text;base64,SGVsbG8sIHdvcmxkIQ==", "helloworld.txt");

If you really want to reverse the process, you can easily decode Base64 with atob():

const decode = str =>
  atob(str.replace(/^data:\w+;base64,/, "")); // remove `data:text;base64,`


console.log(decode("data:text;base64,SGVsbG8sIHdvcmxkIQ=="));

Reverse FileReader - Reassamble file from string

1 Answers1