4

I'm developing an app using Node.js as back end and react as my fronted. Right now I created a route which upload a file and store it as a buffer type in mongodb. My question is how can I use this data when I receive it in my react app to convert it as a source prop in an html image tag? When I look at the mongodb compass the file property looks like this:(very long strings)

enter image description here When I look at the object itself when I get it as a response is looks like this:(array of numbers); enter image description here

I tried to use 

  <img
      src={`data:${props.images[0].mimetype};base64,${props.images[0].file.data}`}
    />

but it did not work..

enter image description here

really appreciate if some could have an answer!

mongoose model:

   images: [
    {
    file: { type: Buffer },
     filename: { type: String },
    mimetype: { type: String }
   }
  ]

node.js

 var multer = require('multer');

 var upload = multer({
 limits: {
  fileSize: 1000000
}
});

 app.post('/upload', upload.single('file'), async (req, res) => {
 try {
 const file = {
  file: req.file.buffer,
  filename: req.file.originalname,
  mimetype: req.file.mimetype
};
// console.log(req.file.buffer.toString('base64'));
const product = new Product({ ...req.body });
product.images = [file];
await product.save();
res.status(201).send({ success: true, product });
...

app.get('/api/products/:id', async (req, res) => {
try {
const product = await Product.findById({ _id: req.params.id }).populate(
  'brand'
);

if (!product) {
  throw new Error('Cannot find the requested product');
}
res.send({ product });
....
rio
  • 757
  • 5
  • 19
  • 32
  • A little off topic but may I suggest that maybe you should store the image on a cloud storage like ms azure or aws s3 and only store the url in the database? I guess this might save you this and other troubles. – Shmili Breuer Aug 28 '19 at 20:51
  • I could also save it in a folder in the node js but I want every image to live inside the object it belongs to(that is a products model) so this way I can find each product image easy.. – rio Aug 28 '19 at 20:58
  • I got it, just a suggestion save the image to the cloud and in the products model have `images: [{url: String}]` but again it's just a suggestion. – Shmili Breuer Aug 28 '19 at 21:03
  • that could be a solutions but I still would like to know how to make that stuff work.. – rio Aug 28 '19 at 21:06
  • That long array of numbers is probably [ArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) (or you need to [create one from it](https://stackoverflow.com/questions/34089569/create-arraybuffer-from-array-holding-integers-and-back-again/34090414)). Then [convert it to base64](https://stackoverflow.com/questions/9267899/arraybuffer-to-base64-encoded-string) – laggingreflex Aug 28 '19 at 22:49

2 Answers2

9

Convert it to base64string like this

  <img
      src={`data:${props.images[0].mimetype};base64,${Buffer.from(props.images[0].file.data).toString('base64')}`}
    />
Jasper Bernales
  • 1,601
  • 1
  • 11
  • 16
0

Save dataUrl as string in database with field type mediumtext and on retrieve set source as follow:

src='${data[i].data_url ? data[i].data_url : ''}'

It works for me.

ASANIAN
  • 372
  • 2
  • 8