reactjs - Uploading an image to mongodb using Multer with Express and Axios -

i trying make small application allows admin user enter name, price , image of product can viewed on page. details sent mongo database performed via axios post front end. can send name , price no problem can seen on front end dynamically, however, unable send image mongo database i've been trying achieve quite time.

i using multer , axios try , sent file on application react app. think problem "req.file" within end of application. code below endpoint:

api.js

var express     = require('express'); var bodyparser  = require('body-parser'); var cors        = require('cors') var app         = express(); var mongodb     = require('mongodb'); var path        = require('path'); var fsextra     = require('fs-extra'); var fs          = require('fs') var util        = require('util') var multer      = require('multer') var upload      = multer( {dest:  __dirname + '/uploads'} ) var ejs         = require('ejs')  const mongoclient = require('mongodb').mongoclient;  app.use(express.static(path.resolve(__dirname, '../react', 'build'))); app.get('*',(req,res)=>{   res.sendfile(path.resolve(__dirname, '../react', 'build', 'index.html')); }); console.log(__dirname) app.use(cors()); app.use(bodyparser.urlencoded({ extended: true })); app.use(bodyparser.json()); app.use(express.static(path.join(__dirname, 'public'))); app.set('views', __dirname); app.engine('html', require('ejs').renderfile); app.set('view engine', 'html'); var db;  mongodb.mongoclient.connect('mongodb://<mydbdetails>', (err, database) => {   if (err) {     console.log(err)     process.exit(1);   }   db = database;   console.log('database connection ready')  }); var server= app.listen(process.env.port || 8082, function () {   var port = server.address().port;   console.log("app running on port", port); });    app.post('/api/submitimage', upload.single('inputform'), function(req,res){   var file = req.body.file     if (file == null) {     // if submit accidentally clicked no file selected...       //res.render('admin', { title:'please select picture file submit!'});       res.send({success: false, message: "dsfdsg"})       console.log('there no file present')       console.log(req.file,'file')   }   else{     // read img file tmp in-memory location    var newimg = fs.readfilesync(req.files.path);    console.log(newimg,'details of new image')    // encode file base64 string.    var encimg = newimg.tostring('base64');    console.log(encimg,'kdfjndodj')    // define new document    var newitem = {       description: req.body.description,       contenttype: req.file.mimetype,       size: req.files.size,       img: buffer(encimg, 'base64')     };     db.collection('products').insert(newitem, function(err, result){       if(err) {         console.log(err)       }       var newoid = new objectid(result.ops[0]._id);       fs.remove(req.file.path, function(err) {         if (err) { console.log(err) };         res.render('./src/components/admincontainer.js', {title:'thanks picture!'});       });     })   } }) 

the next code how trying send on using axios:

import axios 'axios';  class productsapi {    static submitproduct(name,prices,callback){        axios.post('http://localhost:8082/api/submitproduct', {name: name, prices: prices})         .then( response => {         callback(response)     })   }   static viewname(callback){     axios.post('http://localhost:8082/api/retrievename')       .then( response => {         return callback(response)     })   }   static viewprice(callback){     axios.post('http://localhost:8082/api/retrieveprice')       .then( response => {         return callback(response)     })   }   static viewproducts(callback){     axios.post('http://localhost:8082/api/retrieveproducts')       .then( response => {         return callback(response)     })   }   static submitimages(image,callback){     axios.post('http://localhost:8082/api/submitimage',{image: image})       .then( response => {         return callback(response)         console.log('response has been made,', image,'has been recieved axios')     })   } }   export default productsapi; 

the last file how trying send file database using react event handlers:

  import react, { component } 'react'   import '../app.css'   import appheader './appheader.js'   import productsapi '../api/axios.js'    const admincontainer = () => {     return(       <div>       <appheader />       <formcontainer />       </div>     )   }    class formcontainer extends component{     constructor(props){       super(props);       this.state={         file: '',         inputname: '',         inputprice: '',         image: ''       };       this.handlenamechange = this.handlenamechange.bind(this);       this.handlepricechange = this.handlepricechange.bind(this);       this.handlesubmit = this.handlesubmit.bind(this);       this.sendname = this.handlesubmit.bind(this);     }      handlenamechange(e){         console.log(e.target.value)       this.setstate({         name : e.target.value,       })     }     handlepricechange(e){         console.log(e.target.value)       this.setstate({         prices : e.target.value       })     }     sendname(e){       this.setstate({         inputname: e.target.value,         inputname:e.target.value       })     }      handlesubmit(e){       e.preventdefault();       console.log('attempting access axios...')     productsapi.submitproduct(this.state.name, this.state.prices, resp => {         console.log('response has been made', resp)         //if error message, add state , show error message on front end         this.setstate({           inputname:this.state.name,           inputprice:this.state.prices         },function(){           console.log(resp,'this resp')           console.log('axios has send ',this.state.name,' database')          });       })        console.log(this.state.prices,'this new price')       console.log(this.state.name,'this new name')      productsapi.submitimages(this.state.image, response => {         console.log('axios has been notified submit image...')         this.setstate({           image: this.state.image         },function(){           console.log('image submission axios response details follows: ', response)           console.log(this.state.image, ': has been sent db')         })     })   }      render(){       return(          <div>           <h2>add new product shop</h2>           <div classname='formwrapper'>             <div classname='center'>               <form name='inputform' enctype='multipart/form-data' method='post'>                 <label>                   name:                   <input value = {this.state.name} onchange={this.handlenamechange} type="text" placeholder='name' /><br />                   price:                   <input value = {this.state.prices} onchange={this.handlepricechange} type='text' /><br />                 </label>                 <label>                   choose image:                   <input classname='imginsert' name ='inputform' type='file'/>                 </label>                 <div>                 <img classname = 'previewimage' value={this.state.image}/>                 </div>                 <button classname='btn updatebtn' onclick={(e) => this.handlesubmit(e)}>submit</button>               </form>             </div>           </div>         </div>       )     }    }     export default admincontainer 

common errors getting when trying debug

typeerror: cannot read property 'path' of undefined."

and "file" being undefined.

when using multer save images need make sure image comes server form data. because multer requires multipart/form-data encoding not when submitting form ajax request unless if make happen. can using formdata object. here example of being used. hope helps.