How can I save my image data from front end to Mongoose database using Node.js server

I would not recommend that for most projects (as Paul commented), but it's not complicated.

After you get the image file from the client, you read the image data (fs.readFile) and use a buffer to encode it to base64 and save into your DB, this way you will use less space to store the data. Then you decode the base64 data when you need the binaries.

fs.readFile('foo.png', function(err, data) { const base64img = new Buffer(data).toString('base64'); }); 

There are some npm modules that make this a bit simpler, such as base64-img.

/* Here is the solution */

/server.js

var express = require("express"); var multer = require('multer'); var path = require('path'); var passport = require('passport'); var mongoose = require('mongoose'); var bodyParser = require('body-parser'); var app = express(); app.appname="photogallery"; //config mongoose app.db = mongoose.createConnection('localhost/'+app.appname); app.db.on('error', console.error.bind(console, 'mongoose connection error: ')); app.db.once('open', function () { }); //config data models require('./models')(app, mongoose); //Routes and acl var router = express.Router(); require('./routes')(app, router, passport); /* Image Logic */ var file_url = ''; var storage = multer.diskStorage({ destination: function (req, file, callback) { callback(null, 'public/img/'); }, filename: function (req, file, callback) { callback(null, file.fieldname + '-' + Date.now()); file_url = file.fieldname + '-' + Date.now() + '.' + file.originalname.split('.')[file.originalname.split('.').length -1]; callback(null, file_url); } }); var upload = multer({ storage : storage}).single('userPhoto'); app.use(express.static(path.join(__dirname, '/public/'))); app.post('/api/photo',function(req,res){ upload(req,res,function(err) { if(err) { return res.end("Error uploading file."); } //res.end("File is uploaded"); //console.log("file_url", file_url); res.json({error_code:0,err_desc:null, file_url:'img/'+file_url}); }); }); //config express app.set('secret','thisshouldnotbeinplaintext'); app.use(bodyParser.urlencoded({ extended: false })); app.use(bodyParser.json()); app.use(passport.initialize()); app.use(router); app.listen(5050,function(){ console.log("Working on port 5050"); }); 

/api/requests.js

 'use strict'; var jwt = require('jsonwebtoken'); var passport = require('passport'); exports.init = function(pp) { passport = pp; return exports; }; exports.root = function(req, res) { res.send("Running"); }; /* Save Image Data Function */ exports.addData = function(req, res) { var addData = req.app.db.model('Data'); var data = { img_title : req.body.img_title, img_url : "http://localhost:5050/"+req.body.img_url } var query = addData(data); query.save(function (err, data) { if (err) { console.log(err.toString()); } else { console.log('Image saved Successfully'); res.json(data); } }); }; /* Get Image Data Function */ exports.getPhoto = function(req, res) { var getPhoto = req.app.db.model("Data"); var query = getPhoto.find(function(err, data){ if(err) { console.log("Not Found"); } else { res.json({'data': data}); } }); }; 

/schema/Data.js

'use strict'; module.exports = function(app, mongoose) { var dataSchema = new mongoose.Schema({ img_title : { type: String, default: '' }, img_url : { type: String, default: '' } }); app.db.model('Data', dataSchema); }; 

/models.js

'use strict'; module.exports = function(app, mongoose) { //Mongoose Schemas require('./schema/Data')(app, mongoose); } 

/routes.js

'use strict'; module.exports = function(app, router, passport) { var requests = require('./api/requests').init(passport); router.get('/', requests.root); router.post('/api/addPhoto/v1', requests.addData); router.get('/api/getPhoto/v1', requests.getPhoto); }; 

/public/index.html

<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">&times;</button> <h4 class="modal-title">Please Upload Image</h4> </div> <form id="uploadForm" enctype="multipart/form-data" action="/api/photo" method="post"> <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="userPhoto" 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" value="Upload Image" name="submit">Save</button> </div> <span id = "status"></span> </form> </div> </div> </div> 

/public/javascript/image.js

/* How to save image data from Frontend to mongoose using api call */

$(document).ready(function() { $('#uploadForm').submit(function() { $("#status").empty().text("File is uploading..."); var imageTitle = $("#imagetitle").val(); $(this).ajaxSubmit({ error: function(xhr) { status('Error: ' + xhr.status); }, success: function(response) { var localFile = response.file_url; $.ajax({ url: "/api/addPhoto/v1", data: { img_title: imageTitle, img_url: localFile }, method: 'post', dataType: 'json', success: function(data) { var html = ""; html+= "<div class='col-md-3 col-md-offset-1'>"; html+= "<div class='img-box imgClass'>"; html+= "<img src='"+data.img_url+"'>"; html+= "</div> </div>"; $('.myimage').append(html); $('#myModal').modal('hide'); }, error: function(xhr, status) { alert("Sorry, there was a problem!"); } }); } }); return false; }); }); $(function(){ $.get("/api/getPhoto/v1", function(response) { //console.log(response.data.length); var html = ""; for(var i = 0; i< response.data.length ; i++){ html+= "<div class='col-md-3 col-md-offset-1'>"; html+= "<div class='img-box imgClass'>"; html+= "<img src='"+response.data[i].img_url+"'>"; html+= "</div> </div>" } $('.myimage').html(html); }); });