How do I retrieve a binary data from mongodb after storing it?

Question

I have stored an image on mongodb, like so:

{
    thumb: Binary('very long string', 0);
}

Then I save this in localStorage and it looks like this:

{
    thumb: {
        data: [105, 86, 66, 79, 82, 119, 48, 75, 71, 103, 111, 65, 65, 65, 65, 78, 83, 85, 104, 69, 85,…]
        type: "Buffer"
    }
}

How do I use that info in my react component so that my image gets displayed on the screen?

It is related to localeStorage cause I saved the image data from mongo in localStorage. When I submit a post request that saves the image data to mongo, the response from the request gets saved to the localStorage, as you can see above. My issue is that I don't know how to use that data to display the image. — code_dude, Apr 23 '20 at 19:07

score 1 · Accepted Answer · answered Apr 23 '20 at 19:17

1

You can use this function to convert your data in base64 (the example is for React Native but you can apply the same logic to ReactJS):

https://github.com/facebook/react-native/blob/1e8f3b11027fe0a7514b4fc97d0798d3c64bc895/Libraries/Utilities/binaryToBase64.js

and then use the base64 data as shown here:

https://stackoverflow.com/a/8499716/8534482

answered Apr 23 '20 at 19:17

Emanuele Scarabattoli

4,103
1
12
21

Ma' man, it worked. Thank you so much. I have struggled with this for days. God bless. – code_dude Apr 23 '20 at 19:25
So the answer is correct? if yes mark it as correct. – Emanuele Scarabattoli Apr 23 '20 at 19:27

How do I retrieve a binary data from mongodb after storing it?

1 Answers1