My backend Route: `var storage = multer.diskStorage({ filename: function(req, file, callback) { callback(null, Date.now() + file.originalname); } }); var imageFilter = function (req, file, cb) { // accept image files only if (!file.originalname.match(/.(jpg|jpeg|png|gif)$/i)) { return cb(new Error('Only image files are allowed!'), false); } cb(null, true); }; var upload = multer({ storage: storage, fileFilter: imageFilter}) var cloudinary = require('cloudinary'); cloudinary.config({ cloud_name: '', api_key: '', api_secret: '' }); app.post('/selleraddproduct/:id', upload.single('picture'), (req, res) => { console.log(req.file); console.log(req.files); cloudinary.v2.uploader.upload(req.file.path, function(result) { // add cloudinary url for the image to the campground object under image property req.body.productdata.picture = result.secure_url; }); }) Front End code:state = { name: '', description: '', price: 0, picture: null, quantity: 0, discount: 0 } onChangeimage = (event) => { console.log(event.target.files[0]) this.setState({ picture: event.target.files[0] }) } onSubmit = (event) => { event.preventDefault(); console.log(this.props); console.log(this.state.picture); var productdata = { name: this.state.name, description: this.state.description, price: this.state.price, picture: this.state.picture, quantity: this.state.quantity, discount: this.state.discount } axios.post('http://localhost:4000/selleraddproduct/' + this.props.match.params.id, {productdata}) .then((res) => { console.log(res); }) } Form looks like this: <div className="form-group"> <label htmlFor="inputpicture3" className="col-sm-2 control-label">upload Image</label> <div className="col-sm-8"> <input type="file" id="inputpicture3" onChange={this.onChangeimage} accept="image/*" placeholder="Image"/> </div> </div> Error Image at the backend:  ... View more