#294 Uploader with cropping

inc/js/classes/BxDolUploader.js

@@ -17,7 +17,7 @@ function BxDolUploaderSimple (sUploaderObject, sStorageObject, sUniqId, options)
     this._eForm = null;
 }
 
-BxDolUploaderSimple.prototype.init = function (sUploaderObject, sStorageObject, sUniqId, options) {    
+BxDolUploaderSimple.prototype.init = function (sUploaderObject, sStorageObject, sUniqId, options) {
     this._isUploadsInProgress = false;
 
     this._sUploaderObject = sUploaderObject;
@@ -176,6 +176,11 @@ BxDolUploaderSimple.prototype.deleteGhost = function (iFileId) {
     });
 };
 
+BxDolUploaderSimple.prototype._clearErrors = function () {
+    $('#' + this._sPopupContainerId + ' #' + this._sErrorsContainerId).html('');
+    this._isErrorShown = false;
+}
+
 BxDolUploaderSimple.prototype._showError = function (s, bAppend) {
     if (s == undefined || !s.length)
         return;
@@ -216,7 +221,8 @@ BxDolUploaderSimple.prototype._loading = function (bShowProgress, bShowForm) {
     if (bShowForm) {
         if (null != this._eForm) {
             eForm.find('.bx-uploader-simple-file').filter(':not(:first)').remove();
-            this._eForm.reset();
+            if ('undefined' !== typeof(this._eForm.reset)) 
+                this._eForm.reset();
         }
         eForm.show();
         eBtn.show();
@@ -324,4 +330,101 @@ function BxDolUploaderHTML5 (sUploaderObject, sStorageObject, sUniqId, options)
 
 BxDolUploaderHTML5.prototype = BxDolUploaderSimple.prototype;
 
+/**
+ * Crop Image Uploader js class
+ */
+function BxDolUploaderCrop (sUploaderObject, sStorageObject, sUniqId, options) {
+
+    this.init(sUploaderObject, sStorageObject, sUniqId, options);
+
+    this._eForm = null;
+
+    this.initUploader = function (oOptions) {
+
+        var $this = this;
+
+        var aExt = ['jpg', 'jpeg', 'png', 'gif'];
+
+        var eCroppie = $("#" + this._sFormContainerId + " .bx-croppie-container").croppie(oOptions);
+      
+        $("#" + this._sFormContainerId + " input[name=f]").on("change", function() {
+            var input = this;            
+
+            if (input.files && input.files[0]) {
+
+                var m = input.files[0].name.match(/\.([A-Za-z0-9]+)$/);
+
+                if (2 != m.length || -1 == aExt.indexOf(m[1].toLowerCase())) {                    
+                    $(input).replaceWith($(input).val('').clone(true));
+                    $this._showError(_t('_sys_uploader_crop_wrong_ext'));
+                    return;
+                }
+
+                $this._clearErrors();
+
+                var reader = new FileReader()
+
+                reader.onload = function(e) {
+                    eCroppie.croppie('bind', {
+                        url: e.target.result
+                    });
+                    $("#" + $this._sFormContainerId + " .bx-croppie-container").addClass('ready');
+                    $("#" + $this._sFormContainerId + " .bx-crop-upload").removeClass('bx-btn-disabled');
+                    $("#" + $this._sFormContainerId + " .bx-croppie-container").data('bx-filename', input.files[0].name.replace(/(\.[A-Za-z0-9]+)$/, '.png'));
+                }
+                reader.readAsDataURL(input.files[0]);
+            }
+        });
+
+        $("#" + this._sFormContainerId + " .bx-crop-upload").on('click', function(ev) {
+            eCroppie.croppie('result', {
+                type: 'canvas',
+                size: 'original'
+            }).then(function(resp) {
+                var fd = new FormData();
+
+                fd.append("f", dataURItoBlob(resp), $("#" + $this._sFormContainerId + " .bx-croppie-container").data('bx-filename'));
+                $.each(oOptions.bx_form, function (sName) {
+                    fd.append(sName, this);
+                });
+                
+                $this.onBeforeUpload(fd);
+
+                $.ajax({
+                    url: sUrlRoot + 'storage_uploader.php',
+                    type: "POST",
+                    processData: false,
+                    contentType: false,
+                    data: fd,
+                    success: function(data) {
+                        eval(data);
+                    },
+                    error: function() {
+                        $this._showError(_t('_sys_uploader_crop_err_upload'));
+                    }
+                })
+
+            });
+        });
+
+        function dataURItoBlob(dataURI) {
+            var split = dataURI.split(','),
+                dataTYPE = split[0].match(/:(.*?);/)[1],
+                binary = atob(split[1]),
+                array = [];
+                
+            for (var i = 0; i < binary.length; i++) 
+                array.push(binary.charCodeAt(i));
+
+            return new Blob([new Uint8Array(array)], {
+                type: dataTYPE
+            });
+        }
+
+        
+    };
+}
+
+BxDolUploaderCrop.prototype = BxDolUploaderSimple.prototype;
+
 /** @} */

install/sql/system.sql

@@ -2151,6 +2151,7 @@ CREATE TABLE IF NOT EXISTS `sys_objects_uploader` (
 INSERT INTO `sys_objects_uploader` (`object`, `active`, `override_class_name`, `override_class_file`) VALUES
 ('sys_simple', 1, 'BxTemplUploaderSimple', ''),
 ('sys_html5', 1, 'BxTemplUploaderHTML5', ''),
+('sys_crop', 1, 'BxTemplUploaderCrop', ''),
 ('sys_cmts_simple', 1, 'BxTemplCmtsUploaderSimple', ''),
 ('sys_settings_html5', 1, 'BxTemplStudioSettingsUploaderHTML5', ''),
 ('sys_builder_page_simple', 1, 'BxTemplStudioBuilderPageUploaderSimple', ''),

modules/boonex/air/data/template/system/scripts/BxTemplUploaderCrop.php

@@ -0,0 +1,21 @@
+<?php defined('BX_DOL') or die('hack attempt');
+/**
+ * Copyright (c) BoonEx Pty Limited - http://www.boonex.com/
+ * CC-BY License - http://creativecommons.org/licenses/by/3.0/
+ *
+ * @defgroup    TridentCore Trident Core
+ * @{
+ */
+
+/**
+ * @see BxDolUploader
+ */
+class BxTemplUploaderCrop extends BxBaseUploaderCrop
+{
+    function __construct($aObject, $sStorageObject, $sUniqId, $oTemplate)
+    {
+        parent::__construct($aObject, $sStorageObject, $sUniqId, $oTemplate);
+    }
+}
+
+/** @} */

modules/boonex/albums/classes/BxAlbumsUploaderCrop.php

@@ -0,0 +1,33 @@
+<?php defined('BX_DOL') or die('hack attempt');
+/**
+ * Copyright (c) BoonEx Pty Limited - http://www.boonex.com/
+ * CC-BY License - http://creativecommons.org/licenses/by/3.0/
+ *
+ * @defgroup    Albums Albums
+ * @ingroup     TridentModules
+ *
+ * @{
+ */
+
+class BxAlbumsUploaderCrop extends BxTemplUploaderCrop
+{
+    protected $_oModule;
+
+    public function __construct ($aObject, $sStorageObject, $sUniqId, $oTemplate)
+    {
+        parent::__construct($aObject, $sStorageObject, $sUniqId, $oTemplate);
+        $this->_oModule = BxDolModule::getInstance('bx_albums');
+    }
+
+    protected function getGhostTemplateVars($aFile, $iProfileId, $iContentId, $oStorage, $oImagesTranscoder)
+    {
+        $sTitle = $this->_oModule->_oDb->getFileTitle($aFile['id']);
+        $a = array(
+            'file_title' => $sTitle ? $sTitle : $aFile['file_name']
+        );
+        $a['file_title_attr'] = bx_html_attribute($a['file_title']);
+        return $a;
+    }
+}
+
+/** @} */

modules/boonex/albums/install/sql/enable.sql

@@ -373,7 +373,8 @@ INSERT INTO `sys_grid_actions` (`object`, `type`, `name`, `title`, `icon`, `icon
 -- UPLOADERS
 INSERT INTO `sys_objects_uploader` (`object`, `active`, `override_class_name`, `override_class_file`) VALUES
 ('bx_albums_simple', 1, 'BxAlbumsUploaderSimple', 'modules/boonex/albums/classes/BxAlbumsUploaderSimple.php'),
-('bx_albums_html5', 1, 'BxAlbumsUploaderHTML5', 'modules/boonex/albums/classes/BxAlbumsUploaderHTML5.php');
+('bx_albums_html5', 1, 'BxAlbumsUploaderHTML5', 'modules/boonex/albums/classes/BxAlbumsUploaderHTML5.php'),
+('bx_albums_crop', 1, 'BxAlbumsUploaderCrop', 'modules/boonex/albums/classes/BxAlbumsUploaderCrop.php');
 
 -- ALERTS
 

modules/boonex/albums/install/sql/install.sql

@@ -266,7 +266,7 @@ INSERT INTO `sys_form_inputs`(`object`, `module`, `name`, `value`, `values`, `ch
 ('bx_albums', 'bx_albums', 'do_submit', '_bx_albums_form_entry_input_do_submit', '', 0, 'submit', '_bx_albums_form_entry_input_sys_do_submit', '', '', 0, 0, 0, '', '', '', '', '', '', '', '', 1, 0),
 ('bx_albums', 'bx_albums', 'title', '', '', 0, 'text', '_bx_albums_form_entry_input_sys_title', '_bx_albums_form_entry_input_title', '', 1, 0, 0, '', '', '', 'avail', '', '_bx_albums_form_entry_input_title_err', 'Xss', '', 1, 0),
 ('bx_albums', 'bx_albums', 'text', '', '', 0, 'textarea', '_bx_albums_form_entry_input_sys_text', '_bx_albums_form_entry_input_text', '', 0, 0, 2, '', '', '', '', '', '', 'XssHtml', '', 1, 0),
-('bx_albums', 'bx_albums', 'pictures', 'a:1:{i:0;s:15:"bx_albums_html5";}', 'a:2:{s:16:"bx_albums_simple";s:26:"_sys_uploader_simple_title";s:15:"bx_albums_html5";s:25:"_sys_uploader_html5_title";}', 0, 'files', '_bx_albums_form_entry_input_sys_pictures', '_bx_albums_form_entry_input_pictures', '', 0, 0, 0, '', '', '', '', '', '', '', '', 1, 0),
+('bx_albums', 'bx_albums', 'pictures', 'a:2:{i:0;s:15:"bx_albums_html5";i:1;s:14:"bx_albums_crop";}', 'a:3:{s:16:"bx_albums_simple";s:26:"_sys_uploader_simple_title";s:15:"bx_albums_html5";s:25:"_sys_uploader_html5_title";s:14:"bx_albums_crop";s:24:"_sys_uploader_crop_title";}', 0, 'files', '_bx_albums_form_entry_input_sys_pictures', '_bx_albums_form_entry_input_pictures', '', 0, 0, 0, '', '', '', '', '', '', '', '', 1, 0),
 ('bx_albums', 'bx_albums', 'allow_view_to', '', '', 0, 'custom', '_bx_albums_form_entry_input_sys_allow_view_to', '_bx_albums_form_entry_input_allow_view_to', '', 1, 0, 0, '', '', '', '', '', '', '', '', 0, 0),
 ('bx_albums', 'bx_albums', 'location', '', '', 0, 'custom', '_sys_form_input_sys_location', '', '', 0, 0, 0, '', '', '', '', '', '', '', '', 0, 0),
 ('bx_albums', 'bx_albums', 'added', '', '', 0, 'datetime', '_bx_albums_form_entry_input_sys_date_added', '_bx_albums_form_entry_input_date_added', '', 0, 0, 0, '', '', '', '', '', '', '', '', 1, 0),

modules/boonex/english/data/langs/system/en.xml

@@ -2216,7 +2216,12 @@ If it is not enabled then please consider implement this optimization, since it
 	<string name="_sys_uploader_button_name_single"><![CDATA[Upload File]]></string>
 	<string name="_sys_uploader_close"><![CDATA[Close]]></string>
 	<string name="_sys_uploader_confirm_close_popup"><![CDATA[Oh no! Are you sure? This may discard uploading files, seriously.]]></string>
-	<string name="_sys_uploader_confirm_leaving_page"><![CDATA[Upload is in progress! Stay cool and don't close this page, or it will cut off half-way.]]></string>
+    <string name="_sys_uploader_confirm_leaving_page"><![CDATA[Upload is in progress! Stay cool and don't close this page, or it will cut off half-way.]]></string>
+    <string name="_sys_uploader_crop_button_name"><![CDATA[Crop Image]]></string>
+	<string name="_sys_uploader_crop_submit_button"><![CDATA[Upload]]></string>    
+    <string name="_sys_uploader_crop_title"><![CDATA[Crop Image]]></string>
+    <string name="_sys_uploader_crop_err_upload"><![CDATA[Error Uploading.]]></string>
+    <string name="_sys_uploader_crop_wrong_ext"><![CDATA[Wrong file extension, only images with the following extensions are allowed: jpg, jpeg, png, gif.]]></string>
 	<string name="_sys_uploader_err_msg"><![CDATA[Oops! An error occurred with {0} file: {1}]]></string>
 	<string name="_sys_uploader_html5_button_name"><![CDATA[Multiple Upload]]></string>
 	<string name="_sys_uploader_html5_drop_area"><![CDATA[Drag and Drop files here to upload]]></string>

modules/boonex/ocean/data/template/system/scripts/BxTemplUploaderCrop.php

@@ -0,0 +1,21 @@
+<?php defined('BX_DOL') or die('hack attempt');
+/**
+ * Copyright (c) BoonEx Pty Limited - http://www.boonex.com/
+ * CC-BY License - http://creativecommons.org/licenses/by/3.0/
+ *
+ * @defgroup    TridentCore Trident Core
+ * @{
+ */
+
+/**
+ * @see BxDolUploader
+ */
+class BxTemplUploaderCrop extends BxBaseUploaderCrop
+{
+    function __construct($aObject, $sStorageObject, $sUniqId, $oTemplate)
+    {
+        parent::__construct($aObject, $sStorageObject, $sUniqId, $oTemplate);
+    }
+}
+
+/** @} */

modules/boonex/russian/data/langs/system/ru.xml

@@ -2216,15 +2216,20 @@
 	<string name="_sys_uploader_button_name_single"><![CDATA[Загрузить файл]]></string>
 	<string name="_sys_uploader_close"><![CDATA[Закрыть]]></string>
 	<string name="_sys_uploader_confirm_close_popup"><![CDATA[О нет! Вы уверены? Это может прервать загрузку файлов.]]></string>
-	<string name="_sys_uploader_confirm_leaving_page"><![CDATA[Загрузка в процессе! Не закрывайте эту страницу, или загрузка будет прервана на полпути.]]></string>
-	<string name="_sys_uploader_err_msg"><![CDATA[Ой! Случилась проблема с файцом {0}: {1}]]></string>
+    <string name="_sys_uploader_confirm_leaving_page"><![CDATA[Загрузка в процессе! Не закрывайте эту страницу, или загрузка будет прервана на полпути.]]></string>
+    <string name="_sys_uploader_crop_button_name"><![CDATA[Обрезка картинки]]></string>
+	<string name="_sys_uploader_crop_submit_button"><![CDATA[Загрузить]]></string>    
+    <string name="_sys_uploader_crop_title"><![CDATA[Обрезка Картинки]]></string>
+    <string name="_sys_uploader_crop_err_upload"><![CDATA[Ошибка загрузки.]]></string>
+    <string name="_sys_uploader_crop_wrong_ext"><![CDATA[Неправильное расширение файла, можно обрезать только изображения в формате: jpg, jpeg, png, gif.]]></string>
+	<string name="_sys_uploader_err_msg"><![CDATA[Ой! Случилась проблема с файлом {0}: {1}]]></string>
 	<string name="_sys_uploader_html5_button_name"><![CDATA[Множественная Загрузка]]></string>
 	<string name="_sys_uploader_html5_drop_area"><![CDATA[Перетащите файлы сюда для загрузки]]></string>
 	<string name="_sys_uploader_html5_shoose_file"><![CDATA[Выбрать файл]]></string>
 	<string name="_sys_uploader_html5_title"><![CDATA[Множественная Загрузка]]></string>
 	<string name="_sys_uploader_simple_attach_one_more_file"><![CDATA[+ Добавить ещё файлы]]></string>
 	<string name="_sys_uploader_simple_button_name"><![CDATA[Обычная Загрузка]]></string>
-	<string name="_sys_uploader_simple_submit_button"><![CDATA[Загрузка]]></string>
+	<string name="_sys_uploader_simple_submit_button"><![CDATA[Загрузить]]></string>
 	<string name="_sys_uploader_simple_title"><![CDATA[Обычная Загрузка]]></string>
 	<string name="_sys_uploader_upload_canceled"><![CDATA[Очень жаль. Загрузка прервана.]]></string>
 	<string name="_sys_edit_profile"><![CDATA[Редактировать профиль]]></string>    

modules/boonex/uni/data/template/system/scripts/BxTemplUploaderCrop.php

@@ -0,0 +1,21 @@
+<?php defined('BX_DOL') or die('hack attempt');
+/**
+ * Copyright (c) BoonEx Pty Limited - http://www.boonex.com/
+ * CC-BY License - http://creativecommons.org/licenses/by/3.0/
+ *
+ * @defgroup    TridentCore Trident Core
+ * @{
+ */
+
+/**
+ * @see BxDolUploader
+ */
+class BxTemplUploaderCrop extends BxBaseUploaderCrop
+{
+    function __construct($aObject, $sStorageObject, $sUniqId, $oTemplate)
+    {
+        parent::__construct($aObject, $sStorageObject, $sUniqId, $oTemplate);
+    }
+}
+
+/** @} */

plugins_public/croppie/croppie.css

@@ -0,0 +1,167 @@
+.croppie-container {
+	padding: 30px;
+}
+.croppie-container .cr-image {
+	z-index: -1;
+	position: absolute;
+	top: 0;
+	left: 0;
+	transform-origin: 0 0;
+    max-width: none;
+}
+
+.croppie-container .cr-boundary {
+	position: relative;
+	overflow: hidden;
+	margin: 0 auto;
+	z-index: 1;
+}
+
+.croppie-container .cr-viewport {
+	position: absolute;
+	border: 2px solid #fff;
+	margin: auto;
+	top: 0;
+	bottom: 0;
+	right: 0;
+	left: 0;
+	box-shadow:0 0 0 899px rgba(0, 0, 0, 0.5);
+	z-index: 0;
+}
+.croppie-container .cr-vp-circle {
+	border-radius: 50%;
+}
+.croppie-container .cr-overlay {
+	z-index: 1;
+	position: absolute;
+	cursor: move;
+}
+.croppie-container .cr-slider-wrap {
+	width: 75%;
+	margin: 0 auto;
+	margin-top: 25px;
+	text-align: center;
+}
+.croppie-result {
+	position: relative; 
+	overflow: hidden;
+}
+.croppie-result img {
+	position: absolute;
+}
+
+/*************************************/
+/***** STYLING RANGE INPUT ***********/
+/*************************************/
+/*http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html */
+/*************************************/
+
+.cr-slider {
+    -webkit-appearance: none;/*removes default webkit styles*/
+    /*border: 1px solid white; *//*fix for FF unable to apply focus style bug */
+    width: 300px;/*required for proper track sizing in FF*/
+    max-width: 100%;
+}
+.cr-slider::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 3px;
+    background: rgba(0, 0, 0, 0.5);
+    border: 0;
+    border-radius: 3px;
+}
+.cr-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    border: none;
+    height: 16px;
+    width: 16px;
+    border-radius: 50%;
+    background: #ddd;
+    margin-top: -6px;
+}
+.cr-slider:focus {
+    outline: none;
+}
+/*
+.cr-slider:focus::-webkit-slider-runnable-track {
+    background: #ccc;
+}
+*/
+
+.cr-slider::-moz-range-track {
+    width: 100%;
+    height: 3px;
+    background: rgba(0, 0, 0, 0.5);
+    border: 0;
+    border-radius: 3px;
+}
+.cr-slider::-moz-range-thumb {
+    border: none;
+    height: 16px;
+    width: 16px;
+    border-radius: 50%;
+    background: #ddd;
+    margin-top: -6px;
+}
+
+/*hide the outline behind the border*/
+.cr-slider:-moz-focusring{
+    outline: 1px solid white;
+    outline-offset: -1px;
+}
+
+.cr-slider::-ms-track {
+    width: 300px;
+    height: 5px;
+    background: transparent;/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
+    border-color: transparent;/*leave room for the larger thumb to overflow with a transparent border */
+    border-width: 6px 0;
+    color: transparent;/*remove default tick marks*/
+}
+.cr-slider::-ms-fill-lower {
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 10px;
+}
+.cr-slider::-ms-fill-upper {
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 10px;
+}
+.cr-slider::-ms-thumb {
+    border: none;
+    height: 16px;
+    width: 16px;
+    border-radius: 50%;
+    background: #ddd;
+}
+.cr-slider:focus::-ms-fill-lower {
+    background: rgba(0, 0, 0, 0.5);
+}
+.cr-slider:focus::-ms-fill-upper {
+    background: rgba(0, 0, 0, 0.5);
+}
+/*******************************************/
+
+/***********************************/
+/* Rotation Tools */
+/***********************************/
+.cr-rotate-controls {
+    position: absolute;
+    bottom: 5px;
+    left: 5px;
+    z-index: 1;
+}
+.cr-rotate-controls button {
+    border: 0;
+    background: none;
+}
+.cr-rotate-controls i:before {
+    display: inline-block;
+    font-style: normal;
+    font-weight: 900;
+    font-size: 22px;
+}
+.cr-rotate-l i:before {
+    content: '↺';
+}
+.cr-rotate-r i:before {
+    content: '↻';
+}

template/css/uploaders.css

@@ -67,3 +67,10 @@
 .bx-uploader-html5-button input {
     height:38px;
 }
+
+/* crop uploader */
+
+.bx-popup-content-wrapped .bx-croppie-container {
+    padding:0;
+    min-height:340px;
+}

template/scripts/BxBaseUploaderCrop.php

@@ -0,0 +1,76 @@
+<?php defined('BX_DOL') or die('hack attempt');
+/**
+ * Copyright (c) BoonEx Pty Limited - http://www.boonex.com/
+ * CC-BY License - http://creativecommons.org/licenses/by/3.0/
+ *
+ * @defgroup    TridentCore Trident Core
+ * @{
+ */
+
+/**
+ * Upload files using crop interface
+ * @see BxDolUploader
+ */
+class BxBaseUploaderCrop extends BxDolUploader
+{
+    function __construct ($aObject, $sStorageObject, $sUniqId, $oTemplate)
+    {
+        parent::__construct($aObject, $sStorageObject, $sUniqId, $oTemplate);
+        $this->_sButtonTemplate = 'uploader_button_crop.html';
+    }
+
+    /**
+     * Get uploader button title
+     */
+    public function getUploaderButtonTitle($mixed = false)
+    {
+        if (is_string($mixed))
+            return $mixed;
+        elseif (is_array($mixed) && isset($mixed['Crop']))
+            return $mixed['Crop'];
+        else
+            return _t('_sys_uploader_crop_button_name');
+    }
+
+    /**
+     * add necessary js, css files and js translations
+     */ 
+    public function addCssJs ()
+    {
+        parent::addCssJs ();
+        $this->_oTemplate->addCss(BX_DIRECTORY_PATH_PLUGINS_PUBLIC . 'croppie/|croppie.css');
+        $this->_oTemplate->addJs('croppie/croppie.min.js');
+        $this->_oTemplate->addJsTranslation(array('_sys_uploader_crop_err_upload', '_sys_uploader_crop_wrong_ext'));
+    }
+    
+    /**
+     * Show uploader form.
+     * @return HTML string
+     */
+    public function getUploaderForm($isMultiple = true, $iContentId = false, $isPrivate = true)
+    {
+        return $this->_oTemplate->parseHtmlByName('uploader_form_crop.html', array(
+            'form_container_id' => $this->_sFormContainerId,
+            'errors_container_id' => $this->_sErrorsContainerId,
+            'uploader_instance_name' => $this->getNameJsInstanceUploader(),
+            'restrictions_text' => $this->getRestrictionsText(),
+            'engine' => $this->_aObject['object'],
+            'storage_object' => $this->_sStorageObject,
+            'uniq_id' => $this->_sUniqId,
+            'multiple' => $isMultiple,
+            'content_id' => $iContentId,
+            'storage_private' => $isPrivate,
+        ));
+    }
+
+    public function handleUploads ($iProfileId, $mixedFiles, $isMultiple = true, $iContentId = false, $bPrivate = true)
+    {
+        ob_start();
+        parent::handleUploads ($iProfileId, $mixedFiles, $isMultiple, $iContentId, $bPrivate);
+        $s = ob_get_clean();
+        echo strip_tags(str_replace('window.parent.', 'window.', $s));
+    }
+
+}
+
+/** @} */

template/uploader_button_crop.html

@@ -0,0 +1,2 @@
+<a href="javascript:void(0);" onclick="__uploader_instance_name__.showUploaderForm();" class="bx-btn bx-btn-small bx-def-margin-sec-left">__button_title__</a>
+<bx_include_auto:uploader_button_crop_js.html />

template/uploader_button_crop_js.html

@@ -0,0 +1,12 @@
+<script>
+    $(document).ready(function(){
+        __uploader_instance_name__ = new BxDolUploaderCrop('__engine__', '__storage_object__', '__uniq_id__', {
+            'multiple': true,
+            'content_id': '__content_id__',
+            'images_transcoder' : '__images_transcoder__',
+            'storage_private' : '__storage_private__',
+            'template_error_msg': '<div class="bx-uploader-msg-err">{error}</div>',
+            'template_ghost': __template_ghost__
+        });
+    });
+</script>

template/uploader_form_crop.html

@@ -0,0 +1,55 @@
+<div id="__form_container_id__" class="bx-uploader-form-cont bx-popup-width">
+
+    <input name="f" type="file" />
+
+    <div class="bx-def-padding-sec-bottom bx-croppie-msg"></div>
+    <div class="bx-def-padding-sec-bottom" id="__errors_container_id__"></div>
+
+    <div class="bx-croppie-container bx-def-margin-topbottom"></div>
+
+    <div class="bx-def-padding-top bx-clearfix">
+        <button class="bx-crop-upload bx-btn bx-btn-primary bx-btn-disabled bx-def-margin-sec-right">Upload</button>
+        <div class="bx-btn" onclick="__uploader_instance_name__.onClickCancel()"><bx_text:_sys_uploader_close /></div>
+    </div>
+    
+
+<!--
+    <form enctype="multipart/form-data" method="POST" target="__iframe_id__" action="<bx_url_root />storage_uploader.php" onsubmit="__uploader_instance_name__.onBeforeUpload(this);">
+
+        <div class="bx-uploader-loading">
+        </div>
+
+        <div class="bx-uploader-files-list">
+
+        </div>
+
+    </form>
+
+    <iframe name="__iframe_id__" id="__iframe_id__" style="width:0px; height:0px; border:0px; float:left;"></iframe>
+-->
+</div>
+
+<script>
+setTimeout(function () {    
+    __uploader_instance_name__.initUploader({
+        bx_form: {
+            uo: "__engine__",
+            so: "__storage_object__",
+            uid: "__uniq_id__",
+            m: "__multiple__",
+            c: "__content_id__",
+            p: "__storage_private__",
+            a: "upload"
+        },
+        viewport: {
+            width: 300,
+            height: 300,
+            // type: 'circle'
+        },
+        boundary: {
+            width: 340,
+            height: 340
+        }
+    });
+}, 10);
+</script>