Question 44625 in Html Question posted in
Some basic documentation can be found here.

Display a view of a base64 text file in React – Html

I have a base64 of a .txt file and I want to display it in React. The file looks like this:

ID:948201
name:"someText"
description:".txt"
base64File:"QU5URSBQVVBBQ0lDIEtSQUFBQUFBQUFBQUFMSg=="

Can I display the text of the document, which is "ANTE PUPACIC KRAAAAAAAAAAALJ", somehow on the browser?

Tags:

3

Answers


  1. 0

    I have no idea in which format you may want to convert your file, I hope following link may help you :
    https://forums.meteor.com/t/base64-convert-back-to-file/34188

    Login or Signup to reply.
  2. 0

    Yes, you can turn the base64 to a File and then use FileReader API to read the File as a text.

    function dataURLtoFile(dataurl, filename) {

  var arr = dataurl.split(','),
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n);

  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }

  return new File([u8arr], filename, {
    type: mime
  });
}


//Usage example:
var file = dataURLtoFile('data:text/plain;base64,QU5URSBQVVBBQ0lDIEtSQUFBQUFBQUFBQUFMSg==', 'hello.txt');
var fr = new FileReader();
fr.readAsText(file);
fr.onload = function() {
  console.log(fr.result);
};

    References.

    Turn base64 to file

    Use FileReader API to read the file text.

    Login or Signup to reply.
  3. 0

    you can decode base64 using atob():

    <div id="text"></div>

<script>
  let data = {
    "ID":948201,
    "name":"someText",
    "description":".txt",
    "base64File":"QU5URSBQVVBBQ0lDIEtSQUFBQUFBQUFBQUFMSg=="
  }

  let decodedText = atob(data.base64File);
  document.getElementById("text").innerText = decodedText;
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search