two crop-boxes in same form second choice drags forever

[ash2osh]

when i add two crop boxes in the same form i choose the first image and crop it normally but when i choose the second the mouse hangs inside the box as clicked and drags image when mouse is not clicked !!

[bupy7]

Hi! Give me your code model and view.

[ash2osh]

Controller

 public function actionCreate() {
        $model = new Vendor();
        $model->scenario = 'insert';
        if ($model->load(Yii::$app->request->post())) {
            $model->vendor_logo = UploadedFile::getInstance($model, 'vendor_logo');
            $model->vendor_image = UploadedFile::getInstance($model, 'vendor_image');

            if ($model->save()) {
                return $this->redirect(['view', 'id' => $model->id]);
            }
        }
        return $this->render('create', [
                    'model' => $model,
        ]);
    }

Model

<?php
namespace backend\models;

use Yii;
use yii\helpers\FileHelper;
use yii\imagine\Image;
use yii\helpers\Json;
use Imagine\Image\Box;
use Imagine\Image\Point;

class Vendor extends \yii\db\ActiveRecord {

    public $crop_info_image;
    public $crop_info_logo;

    /**
     * @inheritdoc
     */
    public static function tableName() {
        return 'vendor';
    }

    /**
     * @inheritdoc
     */
    public function rules() {
        return [
            [['vendor_name', 'vendor_category_id'], 'required'],
            [['vendor_category_id'], 'integer'],
            [['vendor_name', 'vendor_website', 'vendor_email'], 'string', 'max' => 99],
            [['vendor_bio'], 'string', 'max' => 400],
            [['vendor_logo', 'vendor_image'], 'file',
                  'extensions' => 'jpg,jpeg,png,gif', //php_fileinfo extension must be enabled 
                'mimeTypes' => ['image/jpeg', 'image/pjpeg', 'image/png', 'image/gif'],
                'skipOnEmpty' => false,
                'on' => 'insert'
            ],
            [['vendor_logo', 'vendor_image'], 'file',
                  'extensions' => 'jpg,jpeg,png,gif', //php_fileinfo extension must be enabled 
                'mimeTypes' => ['image/jpeg', 'image/pjpeg', 'image/png', 'image/gif'],
                'skipOnEmpty' => TRUE,
                'on' => 'update'
            ],
            ['crop_info_logo', 'required', 'message' => 'Please crop the vendor Logo  first','on'=>'insert'],
            ['crop_info_image', 'required', 'message' => 'Please crop the vendor Image first','on'=>'insert'],
            [['crop_info_logo', 'crop_info_image'], 'safe'],
        ];
    }

    public function afterSave($insert, $changedAttributes) {
        if ($insert) {
            // open image
            $logo_image = Image::getImagine()->open($this->vendor_logo->tempName);
            $vendor_image = Image::getImagine()->open($this->vendor_image->tempName);

            $logo_name = 'logo_' . $this->id;
            $image_name = 'image_' . $this->id;

            $logo_ext = $this->vendor_logo->getExtension();
            $image_ext = $this->vendor_image->getExtension();

            $this->CropAndSave($logo_image, Json::decode($this->crop_info_logo)[0], $logo_name, $logo_ext, 'vendor_logo');
            $this->CropAndSave($vendor_image, Json::decode($this->crop_info_image)[0], $image_name, $image_ext, 'vendor_image');
        } else {

            if (!empty($this->vendor_logo) && !empty($this->crop_info_logo)) {
                $logo_image = Image::getImagine()->open($this->vendor_logo->tempName);
                $logo_name = 'logo_' . $this->id;
                $logo_ext = $this->vendor_logo->getExtension();
                $this->CropAndSave($logo_image, Json::decode($this->crop_info_logo)[0], $logo_name, $logo_ext, 'vendor_logo');
            } else {
                $connection = $this->getDb();
                $connection->createCommand()->update($this->tableName(), ["vendor_logo" => $changedAttributes['vendor_logo']], 'id  = ' . $this->id)->execute();
            }

            if (!empty($this->vendor_image)  && !empty($this->crop_info_image)) {
                $vendor_image = Image::getImagine()->open($this->vendor_image->tempName);
                $image_name = 'image_' . $this->id;
                $image_ext = $this->vendor_image->getExtension();
                $this->CropAndSave($vendor_image, Json::decode($this->crop_info_image)[0], $image_name, $image_ext, 'vendor_image');
            } else {
                $connection = $this->getDb();
                $connection->createCommand()->update($this->tableName(), ["vendor_image" => $changedAttributes['vendor_image']], 'id  = ' . $this->id)->execute();
            }
        }
    }

    private function CropAndSave($image, $cropInfo, $image_name, $image_ext, $field) {
        $path = Yii::getAlias('@webroot/../upload/vendor');
        $cropInfo['dw'] = (int) $cropInfo['dw']; //new width image
        $cropInfo['dh'] = (int) $cropInfo['dh']; //new height image
        $cropInfo['x'] = abs($cropInfo['x']); //begin position of frame crop by X
        $cropInfo['y'] = abs($cropInfo['y']); //begin position of frame crop by Y
        // Properties bolow we don't use in this example
        $cropInfo['ratio'] = $cropInfo['ratio'] == 0 ? 1.0 : (float) $cropInfo['ratio']; //ratio image. 
        $cropInfo['w'] = (int) $cropInfo['w']; //width of cropped image
        $cropInfo['h'] = (int) $cropInfo['h']; //height of cropped image
        //delete old images
        $oldImages = FileHelper::findFiles($path, [
                    'only' => [
                        $image_name . '.*',
                    ],
        ]);

        for ($i = 0; $i != count($oldImages); $i++) {
            @unlink($oldImages[$i]);
        }

        //saving thumbnail
        $newSizeThumb = new Box($cropInfo['dw'], $cropInfo['dh']);
        $cropSizeThumb = new Box($cropInfo['w'], $cropInfo['h']);

        $cropPointThumb = new Point($cropInfo['x'], $cropInfo['y']);
        $pathThumbImage = $path . '/' . $image_name . '.' . $image_ext;
        $image->resize($newSizeThumb)
                ->crop($cropPointThumb, $cropSizeThumb)
                ->save($pathThumbImage, ['quality' => 80]);

        //update field with image name 
        $connection = $this->getDb();
        $connection->createCommand()->update($this->tableName(), ["$field" => $image_name . '.' . $image_ext], 'id  = ' . $this->id)->execute();
    }

}

View

<?php

use yii\helpers\Html;
use yii\widgets\ActiveForm;
use bupy7\cropbox\Cropbox;
use backend\models\VendorCategory;
use yii\helpers\ArrayHelper;
use common\helperz\CreateUrl;

/* @var $this yii\web\View */
/* @var $model backend\models\Vendor */
/* @var $form yii\widgets\ActiveForm */

?>

<h4 class="text-danger"><?php if (isset($model->getErrors('crop_info_logo')[0])) echo $model->getErrors('crop_info_logo')[0]; ?></h4>
<h4 class="text-danger"><?php if (isset($model->getErrors('crop_info_image')[0])) echo $model->getErrors('crop_info_image')[0]; ?></h4>

<div class="vendor-form">

    <?php $form = ActiveForm::begin(['options' => ['enctype' => 'multipart/form-data']]); ?>

    <?= $form->field($model, 'vendor_name')->textInput(['maxlength' => 99]) ?>

   <?php 
   echo $form->field($model, 'vendor_logo')->widget(Cropbox::className(), [
    'attributeCropInfo' => 'crop_info_logo',
    'optionsCropbox' => [
        'boxWidth' => 200,
        'boxHeight' => 200,

        'cropSettings' => [
            [
                'width' => 100,
                'height' => 100,
            ],
        ],

    ],
        'previewUrl' => [
           // Yii::$app->urlManager->createAbsoluteUrl('/../upload/vendor/' . $model->vendor_logo)
           CreateUrl::VendorImage('back', $model->vendor_logo)
        ],
    ]);
   ?>

   <?php 
   echo $form->field($model, 'vendor_image')->widget(Cropbox::className(), [
    'attributeCropInfo' => 'crop_info_image',
    'optionsCropbox' => [
        'boxWidth' => 600,
        'boxHeight' => 400,

        'cropSettings' => [
            [
                'width' => 600,
                'height' => 320,
            ],
        ],
    ],
        'previewUrl' => [
            //Yii::$app->urlManager->createAbsoluteUrl('/../upload/vendor/' . $model->vendor_image)
            CreateUrl::VendorImage('back', $model->vendor_image)
        ],
]);
   ?>

    <?= $form->field($model, 'vendor_website')->textInput(['maxlength' => 99]) ?>

    <?= $form->field($model, 'vendor_email')->textInput(['maxlength' => 99]) ?>

    <?= $form->field($model, 'vendor_bio')->textarea(['maxlength' => 400]) ?>

    <label>category</label>
  <?= Html::activeDropDownList($model, 'vendor_category_id',
   ArrayHelper::map(VendorCategory::find()->where('id!=0')->all(), 'id', 'category_name') , array('class'=>'form-control')) ?>

    <div class="form-group">
        <?= Html::submitButton($model->isNewRecord ? Yii::t('back', 'Create') : Yii::t('back', 'Update'), ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
    </div>

    <?php ActiveForm::end(); ?>

</div>

Table structure:

--
-- Table structure for table `vendor`
--

CREATE TABLE IF NOT EXISTS `vendor` (
`id` int(11) NOT NULL,
  `vendor_name` varchar(99) COLLATE utf8_unicode_ci NOT NULL,
  `vendor_logo` varchar(99) COLLATE utf8_unicode_ci DEFAULT NULL,
  `vendor_image` varchar(99) COLLATE utf8_unicode_ci DEFAULT NULL,
  `vendor_website` varchar(99) COLLATE utf8_unicode_ci DEFAULT NULL,
  `vendor_email` varchar(99) COLLATE utf8_unicode_ci DEFAULT NULL,
  `vendor_bio` varchar(400) COLLATE utf8_unicode_ci DEFAULT NULL,
  `vendor_category_id` int(11) NOT NULL
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=7 ;

--
-- Indexes for dumped tables
--

--
-- Indexes for table `vendor`
--
ALTER TABLE `vendor`
 ADD PRIMARY KEY (`id`), ADD KEY `fk_vendor_category1_idx` (`vendor_category_id`);

[bupy7]

@orochimaru778, Fixed! Thanks!

[ash2osh]

very much fixed :) thank you @bupy7

[Winter-Silence]

I still have a problem. Такая хурма на версиях 1.0 и 2.0. 3ю не смотрел, т.к. нужен функционал из 1й или, на худой конец, из 2й

[bupy7]

@Winter-Silence you need upgrade to >=3.0.0. Old version not supported.