title: uploading image via ajax from cropit plugin
body: <p>I am using the Jquery <a href="http://scottcheng.github.io/cropit/" rel="nofollow">Cropit</a> plugin to have the user upload and crop an image.  Once the image is cropped to their liking the click the "upload" button and it is supposed to save it to the server in a specified folder.  I am able to save the cropped image in my javascript to a variable using Cropit's export function.  I have output it to the window and verified that is working.  But when I make my ajax call to send it back to my controller to save to the server, I can't figure out how to get the image.  <code>Request.Files</code> is empty and <code>imageFile</code> is null.  I am using MVC and asp.net.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="image-cropper"&gt;
      &lt;div class="cropit-image-preview-container"&gt;
          &lt;div class="cropit-image-preview"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="slider-wrapper"&gt;
          &lt;span class="icon icon-image small-image"&gt;&lt;/span&gt;
          &lt;input class="cropit-image-zoom-input custom" type="range" min="0" max="1" step="0.01"&gt;
          &lt;span class="icon icon-image large-image"&gt;&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="btns"&gt;
              &lt;!-- The actual file input will be hidden --&gt;
              &lt;!-- And clicking on this button will open up select file dialog --&gt;
              &lt;input class="cropit-image-input custom" type="file" accept="image/*"&gt;
              &lt;input type="hidden" class="hidden-image-data" /&gt;
              &lt;div class="btn select-image-btn"&gt;
                  &lt;span class="icon icon-image"&gt;&lt;/span&gt;
                  Select new image
              &lt;/div&gt;
              &lt;div class="btn upload-btn"&gt;
                  &lt;span class="icon icon-box-save"&gt;&lt;/span&gt;
                  Upload cropped image
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>$('#image-cropper').cropit({
              imageBackground: true,
              onImageLoading: function () {
                  // these lines are needed to center the background image to match the main cropped image
                  $(".cropit-image-preview-container").css("width", "500px");
                  $(".cropit-image-background-container").css("left", "51px");
              }
          });
  
          // When user clicks select image button,
          // open select file dialog programmatically
          $('.select-image-btn').click(function () {
              $('.cropit-image-input').click();
          });
          $('.upload-btn').click(function () {
              var imageData = $('#image-cropper').cropit('export', {
                  type: 'image/jpeg'
              });
              $('.hidden-image-data').val(imageData);
              var formData = new FormData();
              formData.append("imageFile", imageData);
              var token = $('input[name="__RequestVerificationToken"]').val();
              var headers = {};
              headers['__RequestVerificationToken'] = token;
              $.ajax({
                  url: '@Url.Action("UploadImage", "Admin")',
                  //headers: headers,
                  data: formData,
                  type: "POST",
                  contentType: false,
                  processData: false,
                  success: function (response) {
                      console.log(response);
                  },
              });
          });
  </code></pre>
  
  <p>Controller action:</p>
  
  <pre><code>[HttpPost]
  //[ValidateAntiForgeryToken]
  public bool UploadImage(HttpPostedFileBase imageFile)
  {
      bool saved = false;
      foreach(string file in Request.Files)
      {
          var fileContent = Request.Files[file];
      }
      if (imageFile != null)
      {
          // Validate the uploaded image(optional)
          // Get the complete file path
          var fileSavePath = Path.Combine(System.Web.HttpContext.Current.Server.MapPath("~/Content/img/products"), imageFile.FileName);
  
          // Save the uploaded file to "UploadedFiles" folder
          imageFile.SaveAs(fileSavePath);
          if (System.IO.File.Exists(fileSavePath))
          {
              saved = true;
          }
      }
      return saved;
  }
  </code></pre>