How to convert a String to actual file that was generated from FileReader.readAsDataURL()

Question

I have generated a string of a file using this:

const reader = new window.FileReader();
reader.readAsDataURL(file);
reader.onloadend = () => {
  var x = reader.result.toString();
  console.log("File String :: ", x);
};

How to convert this string to actual file like if the previous file was a PDF then this string will converted to a pdf file

reader.result.toString() gives me a string like this "data:application/pdf;base64,JVBERi0xLjQKJSDi48/..........."

I want to convert it back to pdf

FileReader.readAsDataURL()

What do you mean by "the actual file"? Or more importantly, what is the problem you are trying to solve? — Taplar
– Taplar, Commented Nov 29, 2019 at 20:35
I Want to convert this string to the main file format. Like if the file was in pdf then converting it back to a pdf file — sabertooth
– sabertooth, Commented Nov 29, 2019 at 20:51
stackoverflow.com/questions/246801/… The api for readAsDataURL references that the result of the method will be the contents of the file in base64. So it appears what you are asking is how to convert back from base64. — Taplar
– Taplar, Commented Nov 29, 2019 at 20:54
Like after converting it to string it gives me a string like this : data:application/pdf;base64,JVBERi0xLjQKJSDi48/........... I want to convert it back to pdf — sabertooth
– sabertooth, Commented Nov 29, 2019 at 20:54
This is not a duplicate, while the marked question deals with encoding/decoding base64 strings it does not answer op's question of how to get a file object from it. — Patrick Evans
– Patrick Evans, Commented Nov 29, 2019 at 21:20

Patrick Evans · Accepted Answer · 2019-11-29 21:18:32Z

2

If you have a base64 string use atob to decode it and then use the Blob() constructor to get a Blob object (super constructor to File)

//strip off the data uri prefix
let encodedString = dataUrlString.replace('data:application/pdf;base64,','')
let data = atob(encodedString);
let blob = new Blob([data],{'type':'optional mime type here'});

//if you need a literal File object
let file = new File(blob,"filename.pdf",{type:"optional mime type"});

edited Nov 29, 2019 at 21:18

answered Nov 29, 2019 at 21:00

Patrick Evans

42.8k6 gold badges81 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to convert a String to actual file that was generated from FileReader.readAsDataURL()

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related