لود پکیج cropper بعد از load کردن عکس

@hesammousavi

سلام وقتتون بخیر من به مشکلی خوردم نمتونم حل کنمش. اگه از دستتون برمیداد ممنون می شم راهنمایی کنید.
این کد من هست:

(function ($) {
            let avatar = {
                init: function (config) {
                    $this = this;
                    this.config = config;
                    this.loadCropper()
                    this.bindEvents();
                },
                bindEvents: function () {
                    $this = this;
                    this.config.file.change(this.configPreview);

                },
                configPreview: function () {
                    $this.destractorCropper()
                    $this.file = this.files[0];
                    let reader = new FileReader();
                    reader.onload = () => $this.config.preview.attr('src', reader.result);
                    reader.readAsDataURL($this.file);
                    $this.loadCropper();
                },
                loadCropper: function () {
                    this.config.preview.cropper({
                        aspectRatio: 1,
                    });

                    // Get the Cropper.js instance after initialized
                    this.cropper = this.config.preview.data('cropper');
                },
                destractorCropper: function () {
                    $this.cropper.destroy();
                    $this.cropper = null;
                }
            };

            avatar.init({
                file: $('.file'),
                preview: $('preview')
            });
        })(jQuery)

این کد وقتی می خواد برای اولین بار کار کنه مشکلی نداره ولی وقتی که تصویر رو می خوام عوض کنم و پکیج cropper رو برای یک عکس دیگه ای فعال کنم به مشکل می خورم و cropper لود نمیشه . نجاتم بدید :))