I have a button called Upload Image.On click that button,a modal is opening. There is two different field called Image Title, Input File. On submit the Save button. It will go to the image.js file. I am not able to understand how to save these image to my database. someone please help me.
Frontend Code
/modal.html
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="uploadPhotoGallery"> <button type="button" data-toggle="modal" data-target="#myModal" id="uploadButton">Upload Image</button> </div> </div> </div> </div> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Please Upload Image</h4> </div> <div class="modal-body"> <div class="form-group"> <input type="text" class="form-control" id="imagetitle" placeholder="Image Title"> </div> <div class="form-group"> <input type="file" class="form-control" id="input-image" name="input-image" accept="image/*"> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cancle</button> <button type="submit" class="btn btn-default" id="myFormSubmit">Save</button> </div> </div> </div> </div> <script src="javascript/image.js"></script> /image.js
$(function() { $('#myFormSubmit').click(function (e) { //How to send Image from here to backend }); }); Node.js Backend Code
/request.js
exports.addads = function(req, res) { var addads = req.app.db.model('Adds'); var data = { imageTitle : req.body.imageTitle, img : "http://localhost:4040/"+req.body.img, }; var query = addads(data); query.save(function(err,data) { if(err) { console.log(err.toString()); } else { // console.log('Adds Added Successfully'); res.json({ success: true }); update_routers(req); } }); }; //Image Logic var file_url = ''; var storage = multer.diskStorage({ //multers disk storage settings //console.log("sdfas"); destination: function (req, file, cb) { cb(null, 'public/img/'); }, filename: function (req, file, cb) { var datetimestamp = Date.now(); file_url = file.fieldname + '-' + datetimestamp + '.' + file.originalname.split('.')[file.originalname.split('.').length -1] cb(null, file_url); } }); var upload = multer({ //multer settings storage: storage }).single('file'); /** API path that will upload the files */ app.post('/uploadImage', function(req, res) { // console.log("req*****", req.fields); upload(req,res,function(err){ if(err){ res.json({error_code:1,err_desc:err}); return; } console.log("file_url", file_url); exec('convert '+ "public/img/" + file_url + " -resize 100x100 " + "public/img/" + file_url, function (err, out) { if (err) { console.log("error", err); } else { console.log("success"); res.json({error_code:0,err_desc:null, file_url: 'img/'+file_url}); } }); }); }); /route.js
router.post('/api/adds', requests.addads); /schema/ads.js
exports = module.exports = function(app, mongoose) { var addsSchema = new mongoose.Schema({ imageTitle : { type: String, default: '' }, img : { type: String, default: '' } }); app.db.model('Adds', addsSchema); }; 
