Uploading an image cropped using a cropper.js plugin
<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>