Crop uploaded image for update data.

[sauravkc]

I'm using croppie to upload image via ajax. It is working fine and everything is good. Now i want users to resize their old image. The image is loaded in croppie instant form it's url. But during ajax submit, croped image returns blank png file.

Image from url:

if(model_image)
    {
        $uploadCrop.croppie('bind', {
            url: model_image
        }).then(function(){
            console.log('Image upload complete');
        });
    }

Image from user file upload:

$('#upload').on('change', function () {

        var reader = new FileReader();
        $uploadCrop.croppie('destroy');
        initializeCroppie();
        reader.onload = function (e) {
            $uploadCrop.croppie('bind', {
                url: e.target.result
            }).then(function(){
                console.log('Image upload complete');
            });
        }
        reader.readAsDataURL(this.files[0]);
    });

Ajax code:

$('#upload-image').on('click', function (ev) {
        $uploadCrop.croppie('result', {
        }).then(function (resp) {
            $.ajax({
                url: "{{ url('admin/ajax/cv-image-upload') }}",
                type: "PUT",
                data: {"image":resp},
                beforeSend: $.LoadingOverlay("show"),
                success: function (data) {
                    console.log(data);
                    $('#modal-croppie').modal('toggle');
                    if(data.code == 200) {
                        html = '<img src="' + data.image + '" height="250" width="250" />';
                        $('#image').val(data.image);
                    }
                    else {
                        html = '<p style="color: red">Image Upload Fail. Pleast try again</p>'
                    }
                    $("#croppie-img").html(html);
                    $.LoadingOverlay("hide");

                },
                fail: function (data) {
                    $.LoadingOverlay("hide");
                }
            });
        });
    });

Ajax isn't sending a valid base64 code

[artemnesterenko]

Probably, you have set enableExif and enableOrientation options without installing a requirement exif.js. Try to comment out these options, if you use them.