cropper js in laravel

my project is about to crop image then upload it to database and show it in controller. i saw a project about that but it upload the image to server

i tried for several days but i couldn't figure it out.

i use cropper js for that.

the image is shown in the view but i don't know how to pass it to my controller

        window.addEventListener('DOMContentLoaded', function () {
            var avatar = document.getElementById('avatar');
            var image = document.getElementById('image');
            var input = document.getElementById('input');
            var newavatar = document.getElementById('newavatar');
            var $modal = $('#modal');



            input.addEventListener('change', function (e) {
                var files = e.target.files;
                var done = function (url) {
                    input.value = '';
                    image.src = url;
                    $modal.modal('show');

                };
                var reader;
                var file;

                if (files && files.length > 0) {
                    file = files[0];

                    if (URL) {
                        done(URL.createObjectURL(file));
                    } else if (FileReader) {
                        reader = new FileReader();
                        reader.onload = function (e) {
                            done(reader.result);
                        };
                        reader.readAsDataURL(this.files[0]);
                    }
                }

            });
//important for cropping
            $modal.on('shown.bs.modal', function () {
                cropper = new Cropper(image, {
                    aspectRatio: 1,
                    viewMode: 3,
                });
            }).on('hidden.bs.modal', function () {
                cropper.destroy();
                cropper = null;
            });

            document.getElementById('crop').addEventListener('click', function () {
                var canvas;

                $modal.modal('hide');

                if (cropper) {
                    canvas = cropper.getCroppedCanvas({
                        width: 160,
                        height: 160,
                    });
                    newavatar.src = canvas.toDataURL();
                    canvas.toBlob(function (blob) {
                        var formData = new FormData();

                        formData.append('newavatar', blob);
                        $.ajax( {
                            method: 'POST',
                            data: formData,
                            processData: false,
                            contentType: false,
                        });
                    });
                    }
            });

        });

any one please help with this problem

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/2N7BWcv
via IFTTT