how to upload image from frontend to backend

Question

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">&times;</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);
  };

score 0 · Answer 1 · answered Feb 11 '17 at 12:16

You will need multer on your nodeJS backend.

Front end:

$('#myFormSubmit').click(function (e) {
    var formdata = new FormData()
    formdata.append('photo',$('#input-image').files[0])
    $.ajax({
        method : 'POST',
        processData : false,
        contentType : false,
        url : '/imageupload',
        data : formdata,
        success : function(o){
            //callback here on success
        },
        error : function(e){
            //callback here on error
        }
    })
});

back end (assuming app is listening):

var multer = require('multer')
var upload = multer({dest : 'uploads/'}).single('photo') 
//make sure you have access to write files
//make sure 'photo' matches up with the field entered at the front end e.g. formdata.append('photo', ...)

app.post('/imageupload',upload,function(req,res){
    //req.file will now be available as a json object, save to mongodb, re: filename, path etc
    res.send('rabbit')
})

how to upload image from frontend to backend

1 Answers1