JScrop upload and drop image in wordpress

wp.jscropt.js

/*
$primary_img_sel: main image you want to drop
boxWidth: box contain image. which you want. I usally less than image size
boxHeight: same boxWidth
trueSize: True size of image
keySupport: there are on bug in current i write. When i press image it alwasy go to bottom of page
onChange: when we click on the image. I will change coordinate and width and height. c.w, c.h, c.x, c.y, c.x2, c.y2

*/
                        $primary_img_sel.Jcrop({
                            allowSelect: true
                            , boxWidth: current_newimg_browser_size.width   //Maximum width you want for your bigger images
                            , boxHeight: current_newimg_browser_size.height  //Maximum Height for your bigger images
                            , trueSize: [current_img_actualy_size.width,current_img_actualy_size.height]
                            , keySupport: false
                            , onChange: function(c) {
                                var _w = Math.round(c.w);
                                var _h = Math.round(c.h);

                                want_size_w = _w;
                                want_size_h = _h;
                                want_pos_x = c.x;
                                want_pos_y = c.y;

                                var _info = $('<div class="info" style=" position: absolute; top:50%; left: 50%; width: 70px; height: 14px; font-size: 14px; margin-top: -7px; margin-left: -35px; text-align: center; color: '+default_info_color+'">'+ _w+'x'+ _h+'</div>');
                                this.ui.selection.find('.jcrop-tracker').empty().append(_info);

                            }
                        }, function() {
                            jcrop_api = this;
                        });
                        
/* YOu want to drop it */
jcrop_api.destroy();

/* In this source when ever click upload and i check if the files change i will trigger upload automatically 
I use ajaxForm for upload image. May be a next version will be plupload instead 
*/

/* ALL SOURCE HERE */

            var handle_primary_image_add_event = function() {

                    var jcrop_api;

                    /* Submit form */
                    $main_form_step1_id.ajaxForm({
                        beforeSubmit: function(formData, jqForm, options) {
                            $block_container.block(_blockUI);
                        },
                        success: function(resp, statusText, xhr, $form) {
                            $block_container.unblock();

                            if(resp.error === true) {
                                alert(resp.data.msg);

                                /* fix 1:  choice image again */
                                $(_apl_file_upload_sel)[0].value= '';
                                return false;
                            }

                            /* hide upload text and show crop area */
                            $upload_container_sel.addClass('hidden');
                            $crop_contianer_sel.removeClass('hidden');

                            $primary_img_sel.attr('src', resp.data.file.url);
                            $primary_img_sel.attr('data-o_width', resp.data.file.meta.width);
                            $primary_img_sel.attr('data-o_height', resp.data.file.meta.height);
                        },

                        url: APL.ajax_url
                    });

                    $primary_img_sel.on('load', function(event) {
                        /* canculate ratio */
                        initImgAreaSelect();
                    });

                    var hiddenUploadBar = function() {
                        $upload_bar.css('visibility', 'hidden');
                    };

                    var showUploadBar = function() {
                        $upload_bar.css('visibility', 'visible');
                    };

                    /* set select area */
                    var initImgAreaSelect = function() {

                        current_img_actualy_size.width = parseInt($primary_img_sel.attr('data-o_width'), 10);
                        current_img_actualy_size.height = parseInt($primary_img_sel.attr('data-o_height'), 10);

                        current_newimg_browser_size.width = $primary_img_sel.width();
                        current_newimg_browser_size.height = $primary_img_sel.height();

                        $primary_img_sel.Jcrop({
                            allowSelect: true
                            , boxWidth: current_newimg_browser_size.width   //Maximum width you want for your bigger images
                            , boxHeight: current_newimg_browser_size.height  //Maximum Height for your bigger images
                            , trueSize: [current_img_actualy_size.width,current_img_actualy_size.height]
                            , keySupport: false
                            , onChange: function(c) {
                                var _w = Math.round(c.w);
                                var _h = Math.round(c.h);

                                want_size_w = _w;
                                want_size_h = _h;
                                want_pos_x = c.x;
                                want_pos_y = c.y;

                                var _info = $('<div class="info" style=" position: absolute; top:50%; left: 50%; width: 70px; height: 14px; font-size: 14px; margin-top: -7px; margin-left: -35px; text-align: center; color: '+default_info_color+'">'+ _w+'x'+ _h+'</div>');
                                this.ui.selection.find('.jcrop-tracker').empty().append(_info);

                            }
                        }, function() {
                            jcrop_api = this;
                        });
                    };

                    var removeImgAreaSelect = function() {
                        jcrop_api.destroy();
                    };

                    var resetAfterSaveAndCancel = function() {
                        /* Make sure we can upload the most recent image. Because on change just occur when you upload another image */
                        $(_apl_file_upload_sel)[0].value= ''; /* reset */

                        want_size_w = 0;
                        want_size_h = 0;
                        want_pos_x = 0;
                        want_pos_y = 0;

                        removeImgAreaSelect();
                        /* hiddenUploadBar(); */
                    };

                    var showWhenCancel = function() {
                        $upload_container_sel.removeClass('hidden');
                        $crop_contianer_sel.addClass('hidden');
                        $primary_img_sel.attr('src', '');
                    }

                    /*cancel-crop*/
                    $(document).on('click',cancel_drop_sel, function (event) {
                        showWhenCancel();

                        $.ajax({
                           url: APL.ajax_url,
                           data: {
                               action: 'apollo_add_event_remove_old_pimage'
                           },
                           beforeSend: function() {
                               $block_container.block(_blockUI);
                           },
                            success: function(resp) {

                            },
                            complete: function() {
                                resetAfterSaveAndCancel();
                                $block_container.unblock();
                            }
                        });

                    });

                    /* save-crop */
                    $(document).on('click',save_drop_sel, function (event) {
                        if(want_size_h === 0 || want_size_w === 0) {
                            alert($.apl.__('Please select area to drop'));
                            return false; /* Do nothing */
                        }

                        if(want_size_h < min_size_h) {
                            alert($.apl.__('Image\'s height must larger than: ' + min_size_h + 'px'));
                            return false;
                        }

                        if(want_size_w < min_size_w) {
                            alert($.apl.__('Image\'s width must larger than: ' + min_size_w + 'px'));
                            return false;
                        }

                        /* Render ajax to server and get response */
                        $.ajax({
                            url: APL.ajax_url,
                            data: {
                                action: 'apollo_add_event_drop_pimage',
                                history: JSON.stringify(
                                    [{"c":{"x":want_pos_x,"y":want_pos_y,"w":want_size_w,"h":want_size_h}}]
                                )
                            },
                            beforeSend: function( ) {
                                $block_container.block(_blockUI);
                            },
                            success: function(resp) {
                                $primary_img_sel.attr('src', resp.data.file.url + '?t=' + new Date().getTime());

                                $primary_img_sel.attr('data-o_width', resp.data.file.meta.width);
                                $primary_img_sel.attr('data-o_height', resp.data.file.meta.height);
                            },
                            complete: function() {

                                resetAfterSaveAndCancel();
                                $block_container.unblock();
                            }
                        });
                        
                    });

                    /* when click upload */
                    $("#_apl_file_upload").on('change', function(event) {
                        if(this.files.length > 0) {
                                    
                            /* Form you want to sumbmit */
                            $main_form_step1_id.submit();
                        }
                    });
                };

                /* Handle primary image upload */
                handle_primary_image_add_event();
/* END ALL SOURCE */

wp.jscropt.php

<?php
        public function add_event_drop_pimage() {
        $changes = json_decode( wp_unslash($_REQUEST['history']) );
        $sel = $changes[0]->c;
        if($sel->w ===0 || $sel->h === 0) return;

        $info = $_SESSION['apollo'][Apollo_SESSION::EVENT_ADD_PIMAGE];

        require ABSPATH.'wp-admin/includes/image-edit.php';

        $path = $info['file'];
        $type = $info['type'];
        $oname = $info['oname'];

        $img = wp_get_image_editor($path);

        if(is_wp_error($img)) {
            wp_send_json(array(
                'error'=> true,
                'data' => array(
                    'msg' => __('create image from path error', 'apollo')
                )
            ));
        }
        /* Drop here */

        $img->crop( $sel->x , $sel->y , $sel->w , $sel->h  );

        /* remove all path */
        @unlink($path); /* remove old path */

        /* generate image for server */
        $uploads = wp_upload_dir();
        $fname = wp_unique_filename($uploads['path'], $oname);
        $filename = $uploads['path'].'/'.$fname;
        $img->save( $filename, $type );

        $url = $uploads['url'] . "/$fname";

        // update new info session
        $_SESSION['apollo'][Apollo_SESSION::EVENT_ADD_PIMAGE] = array(
            'file' => $filename,
            'type' => $type,
            'oname' => $oname,
            'url' => $url,
        );

        $metafile = $img->get_size();
        wp_send_json(array(
            'error'=> false,
            'data' => array(
                'file' => array(
                    'url' => $url,
                    'meta' => $metafile
                )
            )
        ));

    }
    
    public function when_submit_button_press() {
            $info = $_SESSION['apollo'][Apollo_SESSION::EVENT_ADD_PIMAGE];
            $type = $info['type'];
            $url = $info['url'];
            $fname = $info['oname'];
            $filename = $info['file'];

            /* rename filename */
            $upload_path = Apollo_App::getUploadBaseInfo('path');
            $upload_url = Apollo_App::getUploadBaseInfo('url');

            $safe_title = preg_replace('/[^a-z0-9A-Z]/', '-', $this->event_name);
            $new_fname = 'primary-'. $safe_title .'-'.time();
            $filename2 = $upload_path.'/'. $new_fname;

            rename($filename,  $filename2);
            $_SESSION['apollo'][Apollo_SESSION::EVENT_ADD_PIMAGE]['file'] = $filename2;
            $_SESSION['apollo'][Apollo_SESSION::EVENT_ADD_PIMAGE]['url'] = $upload_url . '/' . $new_fname;

            $attachment = array(
                'post_mime_type' => $type,
                'guid' => $url,
                'post_title' => $new_fname,
                'post_content' => '',
            );

            $id = wp_insert_attachment($attachment, $filename2, $this->event_id);
            if ( !is_wp_error($id) ) {

                require_once(ABSPATH . "wp-admin" . '/includes/image.php');
                wp_update_attachment_metadata( $id, wp_generate_attachment_metadata( $id, $filename2 ) );
                set_post_thumbnail( $this->event_id, $id );
            }
    }