Cropper JS Duplicates on reupload of image

Question

when i upload a new image using cropper js it duplicates the cropper like so:

Here is my code on how i handle the whole uploading and reuploading:

$(window).ready(function() {
    function cropImage($image, input, trigger, preview, output, options) {
        input.change(function() {
            var oFReader = new FileReader();

            oFReader.readAsDataURL(this.files[0]);

            oFReader.onload = function (oFREvent) {
                let cropper = null;

                // Cropper instance
                cropper = new Cropper(
                    $image[0], 
                    options
                );
                
                // Destroy Cropper Instance
                cropper.destroy();

                $image[0].setAttribute('src', this.result);

                trigger.removeClass('disabled').addClass('active');
                
                // Create New cropper instance after destorying
                cropper = new Cropper(
                    $image[0], 
                    options
                );

                cropperPreview(trigger, $image,preview, cropper, output);
            };
        });
    }

I followed the advice of the plugin creator to use the replace method but it is the same output.

Answer 1

you might have to look into destroy() & re-init..hope it will solve your problem.