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

I use coppie js in asp.net core 6 but when sned models item blob is null send to my controller but a few data send it is ok?? plz help me that why can not send more data to controller?

enter image description here

    $('#btnupload').on('click', function ()
{
    event.preventDefault();
            var btn = $(this);
            var $form = btn.closest("form");


      basic.croppie('result', 'blob').then(function (blob)
    {
        var myform=$('#frmData')[0];
        var formData = new FormData(myform);
        formData.append('filename', 'FileName.jpeg');
        formData.append('blob', blob);
        var myAppUrlSettings =
        {
            MyUsefulUrl: '@Url.Action("Create", "ItemCategory")'
        }



        var request = new XMLHttpRequest();
        request.open('POST', myAppUrlSettings.MyUsefulUrl);
        request.send(formData);
        request.onreadystatechange = function () { // Call a function when the state changes.
            if (this.readyState === XMLHttpRequest.DONE && this.status === 200)
            {
                var response = JSON.parse(request.responseText);

                if (response.message == "OK")
                {
                     
                }

            }
        }
    });


});

Answer

I don’t know how your controller is implemented, I have a code example here, you may refer to it:

First I create a target folder for Images under wwwwroot:

Controller code:

  public class ImageController : Controller
    {
        private IHostingEnvironment Environment;

        public ImageController(IHostingEnvironment _environment)
        {
            Environment = _environment;
        }

        [HttpGet]
        public IActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public IActionResult Save()
        {
            string base64 = Request.Form["imgCropped"];
            byte[] bytes = Convert.FromBase64String(base64.Split(',')[1]);

            string filePath = Path.Combine(this.Environment.WebRootPath, "Images", "Cropped.png");
            using (FileStream stream = new FileStream(filePath, FileMode.Create))
            {
                stream.Write(bytes, 0, bytes.Length);
                stream.Flush();
            }
            return RedirectToAction("Index");
        }
    }

View：

@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <form method="post" enctype="multipart/form-data" asp-controller="Image" asp-action="Save">
        <input type="file" id="FileUpload1" />
        <br />
        <br />
        <table border="0" cellpadding="0" cellspacing="5">
            <tr>
                <td>
                    <img id="Image1" src="" alt="" style="display: none" />
                </td>
                <td>
                    <canvas id="canvas" height="5" width="5"></canvas>
                </td>
            </tr>
        </table>
        <br />
        <input type="button" id="btnCrop" value="Crop" style="display: none" />
        <input type="submit" id="btnUpload" value="Upload" style="display: none" />
        <input type="hidden" name="imgX1" id="imgX1" />
        <input type="hidden" name="imgY1" id="imgY1" />
        <input type="hidden" name="imgWidth" id="imgWidth" />
        <input type="hidden" name="imgHeight" id="imgHeight" />
        <input type="hidden" name="imgCropped" id="imgCropped" />
    </form>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.9/js/jquery.Jcrop.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#FileUpload1').change(function () {
                $('#Image1').hide();
                var reader = new FileReader();
                reader.onload = function (e) {
                    $('#Image1').show();
                    $('#Image1').attr("src", e.target.result);
                    $('#Image1').Jcrop({
                        onChange: SetCoordinates,
                        onSelect: SetCoordinates
                    });
                }
                reader.readAsDataURL($(this)[0].files[0]);
            });

            $('#btnCrop').click(function () {
                var x1 = $('#imgX1').val();
                var y1 = $('#imgY1').val();
                var width = $('#imgWidth').val();
                var height = $('#imgHeight').val();
                var canvas = $("#canvas")[0];
                var context = canvas.getContext('2d');
                var img = new Image();
                img.onload = function () {
                    canvas.height = height;
                    canvas.width = width;
                    context.drawImage(img, x1, y1, width, height, 0, 0, width, height);
                    $('#imgCropped').val(canvas.toDataURL());
                    $('#btnUpload').show();
                };
                img.src = $('#Image1').attr("src");
            });
        });
        function SetCoordinates(c) {
            $('#imgX1').val(c.x);
            $('#imgY1').val(c.y);
            $('#imgWidth').val(c.w);
            $('#imgHeight').val(c.h);
            $('#btnCrop').show();
        };
    </script>
</body>
</html>

Result:

Advertisement

Answer