Foliotek / Croppie

A Javascript Image Cropper
http://foliotek.github.io/Croppie
MIT License
2.56k stars 885 forks source link

Imaging sending null to server after submit. #701

Open purukc opened 4 years ago

purukc commented 4 years ago
    $(document).ready(function () {
        var $uploadCrop;

        function readFile(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $uploadCrop.croppie('bind', {
                        url: e.target.result
                    });
                    $('.upload-demo').addClass('ready');
                }
                reader.readAsDataURL(input.files[0]);
            }
        }

        $uploadCrop = $('#upload-demo').croppie({
            viewport: {
                width: 200,
                height: 200,
                type: 'circle'
            },
            boundary: {
                width: 300,
                height: 300
            }
        });

        $('#upload').on('change', function () {
            readFile(this);
            $(".crop").show();

        });
        $('.actionDone').on('click', function () {
            alert("test");
            $uploadCrop.croppie('result', {
                type: 'canvas',
                size: 'original'
            }).then(function (resp) {
                $('#imagebase64').val(resp);

                $('#form').submit();
            });
        });
        $('.actionDone').on('click', function (ev) {
            $uploadCrop.croppie('result', 'canvas').then(function (resp) {
                popupResult({
                    src: resp
                });
            });
        });

        function popupResult(result) {
            var html;
            if (result.html) {
                html = result.html;
            }
            if (result.src) {
                html = '<img src="' + result.src + '" />';
            }
            $("#result").html(html);
        }

    });

    <form action="/Uploader/UploadAvatar" id="form" method="post">
        <input type="file" id="upload" value="Choose a file">
        <div id="upload-demo"></div>
        <input type="hidden" id="imagebase64" name="imagebase64">
        <button class="actionDone">Done</button>
    </form>
    <div id="result"></div>

it goes to controller but as null value [HttpPost] public async Task UploadAvatar(IFormFile imagebase64) {