import {Controller} from "stimulus";

export default class extends Controller {

    static targets = [
        "source",
        "upload"
    ];

    /**
     *
     */
    connect() {
        let image = this.data.get('image');

        if (image) {
            this.element.querySelector('.picture-preview').src = image;
        } else {
            this.element.querySelector('.picture-preview').classList.add('none');
            this.element.querySelector('.picture-remove').classList.add('none');
        }
    }

    /**
     * Event for uploading image
     *
     * @param event
     */
    upload(event) {

        let cropPanel = this.element.querySelector('.upload-panel');
        $(cropPanel).croppie('destroy');

        if (!event.target.files[0]) {
            return;
        }

        let width = this.data.get('width');
        let height = this.data.get('height');
        $(cropPanel).croppie({
            viewport: {
                width: width,
                height: height,
            },
            boundary: {
                width: '100%',
                height: 500
            },
            enforceBoundary: true
        });


        let reader = new FileReader();
        reader.readAsDataURL(event.target.files[0]);

        reader.onloadend = () => {
            $(cropPanel).croppie('bind', {
                url: reader.result
            });
        };

        $(this.element.querySelector('.modal')).modal('show');
    }

    /**
     * Action on click button "Crop"
     */
    crop() {

        let cropPanel = this.element.querySelector('.upload-panel');

        $(cropPanel).croppie('result', {
            type: 'blob',
            size: 'viewport',
            format: 'png'
        }).then(blob => {

            let data = new FormData();
            data.append('file', blob);
            data.append('storage', 'public');

            let element = this.element;
            axios.post(platform.prefix('/systems/files'), data)
                .then((response) => {

                    let image = `/storage/${response.data.path}${response.data.name}.${response.data.extension}`;

                    element.querySelector('.picture-preview').src = image;
                    element.querySelector('.picture-preview').classList.remove('none');
                    element.querySelector('.picture-remove').classList.remove('none');
                    element.querySelector('.picture-path').value = image;
                    $(element.querySelector('.modal')).modal('hide');
                });
        });
    }

    /**
     *
     */
    clear() {
        this.element.querySelector('.picture-path').value = '';
        this.element.querySelector('.picture-preview').src = '';
        this.element.querySelector('.picture-preview').classList.add('none');
        this.element.querySelector('.picture-remove').classList.add('none');
    }
}
@@ -29,16 +29,52 @@
 imulus%22;
+%0Aimport %7BCroppie%7D    from 'croppie';
 %0A%0Aexport
@@ -106,24 +106,71 @@
 ntroller %7B%0A%0A
+    /**%0A     *%0A     * @type %7Bstring%5B%5D%7D%0A     */%0A
     static t
@@ -593,111 +593,8 @@
    %7D
-%0A    %7D%0A%0A    /**%0A     * Event for uploading image%0A     *%0A     * @param event%0A     */%0A    upload(event) %7B
 %0A%0A  
@@ -672,77 +672,45 @@
     
-$(cropPanel).croppie('destroy');%0A%0A        if (!event.target.files%5B0%5D)
+this.croppie = new Croppie(cropPanel,
  %7B%0A 
@@ -724,15 +724,19 @@
     
-return;
+viewport: %7B
 %0A   
@@ -736,35 +736,32 @@
 : %7B%0A        
-%7D%0A%0A
         
 let width = 
@@ -752,19 +752,14 @@
     
-let 
 width
- =
+:
  thi
@@ -777,17 +777,17 @@
 'width')
-;
+,
 %0A       
@@ -791,20 +791,23 @@
     
-let
+       
  height
- =
+:
  thi
@@ -826,17 +826,17 @@
 height')
-;
+,
 %0A       
@@ -840,30 +840,14 @@
     
-$(cropPanel).croppie(%7B
+    %7D,
 %0A   
@@ -851,32 +851,32 @@
             
-viewport
+boundary
 : %7B%0A        
@@ -890,21 +890,22 @@
  width: 
-width
+'100%25'
 ,%0A      
@@ -926,15 +926,11 @@
 ht: 
-height,
+500
 %0A   
@@ -945,33 +945,40 @@
  %7D,%0A            
-b
+enforceB
 oundary: %7B%0A     
@@ -962,33 +962,36 @@
 nforceBoundary: 
-%7B
+true
 %0A               
@@ -987,107 +987,173 @@
     
+%7D);%0A
     
+%7D%0A%0A
     
-width: '100%25',%0A                height: 500%0A            %7D,%0A            enforceBoundary: true
+/**%0A     * Event for uploading image%0A     *%0A     * @param event%0A     */%0A    upload(event) %7B%0A%0A        if (!event.target.files%5B0%5D) %7B%0A            return;
 %0A   
@@ -1158,19 +1158,16 @@
        %7D
-);%0A
 %0A%0A      
@@ -1300,36 +1300,28 @@
         
-$(cropPanel)
+this
 .croppie
 ('bind',
@@ -1316,17 +1316,14 @@
 ppie
-('
+.
 bind
-', 
+(
 %7B%0A  
@@ -1532,98 +1532,27 @@
     
-let cropPanel = this.element.querySelector('.upload-panel');%0A%0A        $(cropPanel).croppie
+this.croppie.result
 ('re
@@ -2813,8 +2813,9 @@
 %0A    %7D%0A%7D
+%0A

Update picture_controller.js