title: How to crop and upload image in ejs and Node.JS?
body: <blockquote>
    <p>I'm using JQuery to crop an image.</p>
  </blockquote>
  
  <pre><code>  &lt;link href="/public/css/jquery.Jcrop.min.css" rel="stylesheet" type="text/css" /&gt;
  
          &lt;!-- add scripts --&gt;
         &lt;script src="http://code.jquery.com/jquery-1.9.0.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/jquery-migrate-1.0.0.js"&gt;&lt;/script&gt;
          &lt;script src="/public/js/jquery.Jcrop.min.js"&gt;&lt;/script&gt;
          &lt;script src="/public/js/script.js"&gt;&lt;/script&gt;
  
      &lt;form id="upload_form" enctype="multipart/form-data" method="post" action="upload.php" onsubmit="return checkForm()"&gt;
                      &lt;!-- hidden crop params --&gt;
                      &lt;input type="hidden" id="x1" name="x1" /&gt;
                      &lt;input type="hidden" id="y1" name="y1" /&gt;
                      &lt;input type="hidden" id="x2" name="x2" /&gt;
                      &lt;input type="hidden" id="y2" name="y2" /&gt;
  
                      &lt;h2&gt;Step1: Please select image file&lt;/h2&gt;
                      &lt;div&gt;&lt;input type="file" name="image_file" id="image_file" onchange="fileSelectHandler()" /&gt;&lt;/div&gt;
  
                      &lt;div class="error"&gt;&lt;/div&gt;
  
                      &lt;div class="step2"&gt;
                          &lt;h2&gt;Step2: Please select a crop region&lt;/h2&gt;
                          &lt;img id="preview" /&gt;
  
                          &lt;div class="info"&gt;
                              &lt;label&gt;File size&lt;/label&gt; &lt;input type="text" id="filesize" name="filesize" /&gt;
                              &lt;label&gt;Type&lt;/label&gt; &lt;input type="text" id="filetype" name="filetype" /&gt;
                              &lt;label&gt;Image dimension&lt;/label&gt; &lt;input type="text" id="filedim" name="filedim" /&gt;
                              &lt;label&gt;W&lt;/label&gt; &lt;input type="text" id="w" name="w" /&gt;
                              &lt;label&gt;H&lt;/label&gt; &lt;input type="text" id="h" name="h" /&gt;
                          &lt;/div&gt;
  
                          &lt;input type="submit" value="Upload" onclick="return checkForm()"/&gt;
                      &lt;/div&gt;
  </code></pre>
  
  <blockquote>
    <p>For the above code I have an x, y co-ordinations, width and height of
    crop image and in the backend I am using the multer module in Node.JS. In
    that I don't know how can I pass x and y coordinates to that multer
    code. In my main file app.js I declare the module like</p>
  </blockquote>
  
  <pre><code>var FormData = require('form-data');
  var multer  = require('multer');
  var upload = multer({ dest: 'uploads/' });
  </code></pre>
  
  <p>and  in the controller i used like this</p>
  
  <pre><code>BASE.APP.post('/profile', BASE.upload.single('avatar'), function (req, res, next) {
    // req.file is the `avatar` file
    // req.body will hold the text fields, if there were any
  
      //console.log(req.file);
  
      BASE.FS.readFile(req.file.path, function read(err, data) {
      if (err) {
          throw err;
      }
  </code></pre>
  
  <blockquote>
    <p>In this way the file is uploaded but not the cropped one. </p>
  </blockquote>