replace() in cropper js

Question

My project is about saving the cropped image and show it in the view.

in my form when i cropped the image it works, but when i want to change the image so i crop it again and save. it create two rows with same image. and when i change the image 3 times it create 3 rows with the same image and so on.

there is method called replace() that i have to use but i dont know how to use it.

this is my code

 window.addEventListener('DOMContentLoaded', function () {
        var avatar = document.getElementById('avatar');
        var image = document.getElementById('image');
        var input = document.getElementById('input');
        var $progress = $('.progress');
        var $progressBar = $('.progress-bar');
        var $alert = $('.alert');
        var $modal = $('#modal');
        var cropper;


        var title = $('#title');
        var description = $('#description');
        var arabic_title = $('#arabic_title');
        var arabic_description = $('#arabic_description');

        $('[data-toggle="tooltip"]').tooltip();

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

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

                if (FileReader) {
                    reader = new FileReader();
                    reader.onload = function (e) {
                        done(reader.result);
                        console.log('ok2');
                    };
                    reader.readAsDataURL(file);
                    console.log('ok3');


                }
            }


        });


        $modal.on('shown.bs.modal', function () {
            cropper = new Cropper(image, {
                aspectRatio: 1.7,
                viewMode: 3,
            });

        }).on('hidden.bs.modal', function () {
            cropper.destroy();
            cropper = null;
        });

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

            $modal.modal('hide');

            if (cropper) {
                canvas = cropper.getCroppedCanvas({
                    width: 400,
                    height: 400,
                });

                initialAvatarURL = avatar.src;
                avatar.src = canvas.toDataURL();

                $progress.show();
                $alert.removeClass('alert-success alert-warning');

                document.getElementById('save').addEventListener('click', function () {

                    canvas.toBlob(function (blob) {
                        var formData = new FormData();

                        formData.append('avatar', blob);
                        formData.append('title', title.val());
                        formData.append('description', description.val());
                        formData.append('arabic_title', arabic_title.val());
                        formData.append('arabic_description', arabic_description.val());



                        if (title.val() !== '' && description.val() !== '' && arabic_title.val() !== '' && arabic_description.val() !== '') {


                        for (let pair of formData.entries()) {
                            console.log(pair[0] + ', ' + pair[1]);

                        }
                            $.ajaxSetup({
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                }
                            });

                            $.ajax("{{url('admin/services')}}", {
                                method: 'POST',
                                data: formData,
                                processData: false,
                                contentType: false,

                                xhr: function () {
                                    var xhr = new XMLHttpRequest();

                                    xhr.upload.onprogress = function (e) {
                                        var percent = '0';
                                        var percentage = '0%';

                                        if (e.lengthComputable) {
                                            percent = Math.round((e.loaded / e.total) * 100);
                                            percentage = percent + '%';
                                            $progressBar.width(percentage).attr('aria-valuenow', percent).text(percentage);
                                        }
                                    };

                                    return xhr;
                                },

                                success: function (data) {
                                    $alert.show().addClass('alert-success').text('Upload success');
                                    console.log(data);

                                },

                                error: function (error) {
                                    avatar.src = initialAvatarURL;
                                    $alert.show().addClass('alert-warning').text('Upload error');
                                    console.log(error);
                                },

                                complete: function () {
                                    $progress.hide();
                                },
                            });
                        }


                    });


                });
            }
        });
    });

Answer 1

$service = 'No service';
    if (isset($_FILES['img'])) {

            $service = Service::create(['title'=>$request->title,
                'description'=>$request->description,
            'photo'=>$request->img]);

        }
        return $service;

Try this.

Answer 2

Your Form Should Be

<form action="files/upload" method="post" enctype="multipart/form-data">
        <input type="file" name="photo"/>
</form

Your Controller Should Be like

if ($request->hasFile('photo')) {
    // move file upload here
}