title: Uploading an image cropped using a cropper.js plugin
body: <p>I have used <a href="https://github.com/fengyuanchen/cropper" rel="noreferrer">cropper.js</a> plugin in my application to crop images. I am able to crop the images. Now I am trying to upload the images instead of downloading them.
  I have updated the the modal window that shows the cropped image as follows:</p>
  
  <pre><code>&lt;!-- Show the cropped image in modal --&gt;
  &lt;div class="modal fade docs-cropped" id="getCroppedCanvasModal" aria-hidden="true" aria-labelledby="getCroppedCanvasTitle" role="dialog" tabindex="-1"&gt;
    &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
          &lt;h4 class="modal-title" id="getCroppedCanvasTitle"&gt;Cropped&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;&lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-default" data-dismiss="modal" style = "float: left;"&gt;Close&lt;/button&gt;
         &lt;form class="form-inline" id="croperImgForm" role="form" method="post" action="${rc.getContextPath()}/module/simplewebcontent/save-image" enctype="multipart/form-data"&gt;
          &lt;label class="checkbox-inline"&gt;
          &lt;input type="checkbox" id="inlineCheckbox1" value="option1"&gt; Save Image
          &lt;/label&gt;
          &lt;label class="checkbox-inline"&gt;
            &lt;input type="checkbox" id="inlineCheckbox2" value="option2"&gt;Save Thumbnail
          &lt;/label&gt;
          &lt;button type="submit" class="btn btn-primary" id="svImg" style = "margin-left: 10px;"&gt;Save&lt;/button&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;&lt;!-- /.modal --&gt;
  </code></pre>
  
  <p>Here I have added a form in the bottom with option to Save the image. I am trying to use the following script to save the form:</p>
  
  <pre><code>$("#svImg").click( function()
      {
      alert('button clicked');
      $("#croperImgForm").submit(function(e)
      {
          var postData = $(this).serializeArray();
          var formURL = $(this).attr("action");
          $.ajax(
          {
          url : formURL,
          type: "POST",
          data : postData,
          dataType : "html",
          success:function(htmlData) 
          {
  
          },
          error: function( xhr, status, errorThrown ) {
              console.log( "Error: " + errorThrown );
              console.log( "Status: " + status );
              console.dir( xhr );
          },
      });
  
          e.preventDefault(); 
          e.unbind();
      });
  });
  </code></pre>
  
  <p>Now I found from the docs that I should use the following code to save the image:</p>
  
  <pre><code>// Upload cropped image to server if the browser supports `canvas.toBlob`
  $().cropper('getCroppedCanvas').toBlob(function (blob) {
    var formData = new FormData();
  
    formData.append('croppedImage', blob);
  
    $.ajax('/path/to/upload', {
      method: "POST",
      data: formData,
      processData: false,
      contentType: false,
      success: function () {
        console.log('Upload success');
      },
      error: function () {
        console.log('Upload error');
      }
    });
  });
  </code></pre>
  
  <p>But I am not sure how to use this code as a part of the form submission which I am trying to implement as an ajax call.</p>
  
  <p>Also I use Spring mvc, so what would be the parameters in the controller method in case of this image upload. </p>