title: How to store image using nodejs,express,mongodb and react
body: <p>I'm trying to store an image using node and mongodb.I'm using react in frontend.I tried using multer but it gives error saying "TypeError: path must be a string or Buffer".Is there any other way to store image using node and mongodb</p>
  
  <pre><code> //server.js
  
   const multer = require("multer");
  
   const storage = multer.diskStorage({
   destination: function (req, res, cb) {
           cb(null, 'uploads/')
        }
   });
  
   const upload = multer({
       storage: storage
   });
  
   router.route('/imageCard/add').post(upload.single('file'), function                     (req, res) 
   {
       let imageDetails=new ImageCard();
       imageDetails.name=req.body.name;
       imageDetails.imgSource= fs.readFileSync(req.body.imgSource);
       imageDetails.price=req.body.price;
       imageDetails.size=req.body.size;
       imageDetails.save().then(details=&gt;
        {
            res.status(200).json('Added');
        }).catch(err=&gt;{
       result.status(400).send('Failed to Add');
       })
  
   });
  
   //(model )
   import mongoose from 'mongoose';
   const Schema = mongoose.Schema;
  
   let imageCard=new Schema({
  
       name:{
           type:String
       },
       imgSource:{
  
           type:Buffer
       },
       size:{
           type:String
       },
       price:{
           type:String
       }
   });
  
   export default mongoose.model('ImageCard', imageCard);
  
   //react file
   onChange(e) {   
      this.state.file = e.target.files[0];  
   }
  
   onsubmit() {
      console.log('on submit');
      const newDoc = {
          name: document.getElementById('name').value,
          price: document.getElementById('price').value,
          size: document.getElementById('size').value,
  
          imgSource:this.state.file
      }
      console.log(newDoc.imgSource);
                axios.post(`http://localhost:4000/imageCard/add`,newDoc).then(res=&gt;{
          console.log(res.data);
      }).catch(err=&gt;{
          console.log(err);
      });
  
  }
  </code></pre>
  
  <p>If I use Below code then it gives this error : TypeError: Cannot read property 'path' of undefined</p>
  
  <pre><code>imageDetails.imgSource= fs.readFileSync(req.file.path);
  </code></pre>
  
  <p>I am not receiving imgSource values in server.js file ,it shows null values.</p>