How to crop image using croppie js and upload in asp.net mvc

Cropping is already happening on the client side, and you should only send the result to the server side. There is no need to send cropping points to the server.

Define the Select and Upload button on html, and a div with id="main-cropper"

        <div>
            <div>
                <div id="main-cropper"></div>
                <a class="button actionSelect">
                    <input type="file" id="select" value="Choose Image" accept="image/*">
                </a>
                <button class="actionUpload">Upload</button>
            </div>
        </div>

on JS code, attach the croppie object to the dive, define the viewpoint a boundary, and finally send the request to the server to store the result as blob. On the server side, lets say there will be a Create controller with GetImage action waiting for the request. testFileName.png is assigned as file name, and you can modify it based on your scenario.

        var basic = $('#main-cropper').croppie({
            viewport: { width: 200, height: 300 },
            boundary: { width: 300, height: 400 },
            showZoomer: false
        });

        function readFile(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#main-cropper').croppie('bind', {
                        url: e.target.result
                    });
                }

                reader.readAsDataURL(input.files[0]);
            }
        }

        $('.actionSelect input').on('change', function () { readFile(this); });
        $('.actionUpload').on('click', function() {
            basic.croppie('result','blob').then(function(blob) {
                var formData = new FormData();
                formData.append('filename', 'testFileName.png');
                formData.append('blob', blob);
                var MyAppUrlSettings = {
                    MyUsefulUrl: '@Url.Action("GetImage","Create")'
                }

                var request = new XMLHttpRequest();
                request.open('POST', MyAppUrlSettings.MyUsefulUrl);
                request.send(formData);
            });
        });

on server, in Create controller:

    [HttpPost]
    public ActionResult GetImage(string filename, HttpPostedFileBase blob)
    {
        var fullPath = "~/Images/" + filename;
        blob.SaveAs(Server.MapPath(fullPath));
        return Json("ok");
    }

It also makes sense to generate uuid string, and set it as file name and store it in database.

I am posting a solution to upload cropping by Croppie.js to the server,

maybe it will help someone in the future.

js

// When you click for saving your crop
$("#upload-crop").on("click", function() {
  $uploadCrop.croppie('result', {
    type: 'base64',
    size: 'viewport',
    format: 'jpg', // or 'png' or 'webp'
  }).then(function (resp) {
    // Remove data:image/png;base64,
    var base64str = resp.substring(resp.indexOf(',') + 1);

    // If you want to show the crop result
    $('#img-result').attr('src', resp);
    // If you used a modal bootstrap
    $('#modal-crop').modal('hide');
    
    // Send to controller
    var formData = new FormData();
    formData.append('CropName', 'myCrop');
    formData.append('CropBase64', base64str);
    
    $.ajax({
      type: "POST",
      url: "/Controller/UploadCrop",
      processData: false,
      contentType: false,
      data: formData,
      success: function (result) {
          // Success
      },
      error: function () {
          // Error
      }
    });
  });
});

c#

[HttpPost]
public ActionResult UploadCrop(string CropName, string CropBase64) { 
    var fullPath = System.IO.Path.Combine(Server.MapPath("~/Uploads"), CropName + ".jpg"); // or ".png" or ".webp"
    System.IO.File.WriteAllBytes(fullPath, Convert.FromBase64String(CropBase64));
    return Content("uploaded");
}