This approach worked for me:

function readFileDataAsBase64(e) {
    const file = e.target.files[0];

    return new Promise((resolve, reject) => {
        const reader = new FileReader();

        reader.onload = (event) => {
            resolve(event.target.result);
        };

        reader.onerror = (err) => {
            reject(err);
        };

        reader.readAsDataURL(file);
    });
}

You can call reader.readAsBinaryString() if you wish to use binary string. More here: https://developer.mozilla.org/en-US/docs/Web/API/FileReader

That looks like you've got a string which represents the body of your file.

You just have to make a new buffer with it.

var fileBuffer = Buffer.from(file)

If your encoding is NOT utf8 you can specify an alternate encoding as a second optional argument.

var fileBuffer = Buffer.from(file, 'base64')

If the file is actually on disk, this is even easier, since, by default, the fs.readFile operation returns a buffer.

fs.readFile(file, function(err, buffer){})

If you're in a real old version of node Buffer.from doesn't exist and you have to use a very memory-unsafe new constructor. Please consider upgrading your node instance to support Buffer.from

const nodeJSBuffer = {
   "type": "Buffer",
   "data": [137,80,78,71,13,10,26]
}

const buffer = Buffer.from(nodeJSBuffer);
const blob = new Blob([buffer]);
                           
const url = window.URL.createObjectURL(blob);
const a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
a.href = url;
a.download = "filename.pdf";
a.click();
window.URL.revokeObjectURL(url);

For input type file onChange, you dont have value in e.target.value but in an array in e.target.files. You can access the blob in single upload e.target.files[0]. The object will be of File type whose blob you can access and work with.

 onChange={(e) => setImage(e.target.files[0])}

this should fix the issue.

First, you need to convert your Buffer to base64 string

const base64String = btoa(String.fromCharCode(...new Uint8Array(arrayBuffer)));

Second, you need to use your string as src attribute for img tag

<img src={`data:image/png;base64,${base64String}`} alt=""/>

I assume you are using react, so I recommend saving base64String in the component state and using it.

const Buffer = require('buffer').Buffer;

const buff = Buffer.from('something cool');
console.log(buff);
console.log(buff.toString());

Call .toString() on the Buffer object, this will convert it into a string value.

<Buffer 73 6f 6d 65 74 68 69 6e 67 20 63 6f 6f 6c>
something cool

• https://nodejs.org/api/buffer.html

how can i display a buffer data as Pdf Document in my react app?

With something like this: https://www.npmjs.com/package/react-pdf

I also came across another question that's similar to yours and is using the react-pdf library, I thought it may be useful: https://stackoverflow.com/a/45604439/2932298.