title: how to upload image from frontend to backend
body: <p>I have a button called <strong>Upload Image</strong>.On click that button,a modal is opening. There is two different field called <strong>Image Title, Input File</strong>. On submit the <strong>Save</strong> button. It will go to the <strong>image.js</strong> file. I am not able to understand how to save these image to my database. someone please help me.</p>
  
  <p><strong>Frontend Code</strong></p>
  
  <p>/modal.html</p>
  
  <pre><code>         &lt;div class="container"&gt;
                &lt;div class="row"&gt;
                    &lt;div class="col-md-12"&gt;
                        &lt;div class="uploadPhotoGallery"&gt;
                            &lt;button type="button" data-toggle="modal" data-target="#myModal" id="uploadButton"&gt;Upload Image&lt;/button&gt;
                        &lt;/div&gt;                     
                    &lt;/div&gt;
                &lt;/div&gt;
           &lt;/div&gt;
  &lt;div class="modal fade" id="myModal" role="dialog"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;!-- Modal content--&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
                  &lt;h4 class="modal-title"&gt;Please Upload Image&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;input type="text" class="form-control" id="imagetitle" placeholder="Image Title"&gt;
                  &lt;/div&gt;
                   &lt;div class="form-group"&gt;
                       &lt;input type="file" class="form-control" id="input-image" name="input-image" accept="image/*"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Cancle&lt;/button&gt;
                  &lt;button type="submit" class="btn btn-default" id="myFormSubmit"&gt;Save&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
   &lt;script src="javascript/image.js"&gt;&lt;/script&gt; 
  </code></pre>
  
  <p>/image.js</p>
  
  <pre><code>$(function() {
      $('#myFormSubmit').click(function (e) {
         //How to send Image from here to backend
     });
  });
  </code></pre>
  
  <p><strong>Node.js Backend Code</strong></p>
  
  <p>/request.js</p>
  
  <pre><code>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});
                }
             });
          });
      });
  </code></pre>
  
  <p>/route.js</p>
  
  <pre><code>router.post('/api/adds', requests.addads);
  </code></pre>
  
  <p>/schema/ads.js</p>
  
  <pre><code>exports = module.exports = function(app, mongoose) {
       var addsSchema = new mongoose.Schema({
         imageTitle     : { type: String, default: '' },    
         img            : { type: String, default: '' }
  
      });
      app.db.model('Adds', addsSchema);
    };
  </code></pre>