Компонент Uploader

* В процессе, часть функционала может не работать

application/config/config.php

@@ -548,6 +548,10 @@ $config['head']['default']['js'] = array(
 	"___path.application.web___/frontend/common/js/admin.js",
 	"___path.application.web___/frontend/common/js/userfield.js",
 	"___path.application.web___/frontend/common/js/media.js",
+	"___path.skin.web___/components/uploader/js/uploader.js",
+	"___path.skin.web___/components/uploader/js/uploader-file-list.js",
+	"___path.skin.web___/components/uploader/js/uploader-file.js",
+	"___path.skin.web___/components/uploader/js/uploader-info.js",
 	"___path.application.web___/frontend/common/js/tags.js",
 	"___path.application.web___/frontend/common/js/content.js",
 	"___path.application.web___/frontend/common/js/user_list_add.js",

application/frontend/skin/developer/components/uploader/README.md

@@ -0,0 +1,3 @@
+# Компонент Uploader
+
+Загрузка и управление файлами.

application/frontend/skin/developer/components/uploader/css/uploader.css

@@ -0,0 +1,125 @@
+/**
+ * Загрузка и управление файлами
+ */
+
+.uploader-wrapper {
+	min-height: 150px;
+}
+.uploader-file-list {
+	overflow: auto;
+	width: 68%;
+	margin-right: 2%;
+	min-height: 30px;
+	max-height: 354px;
+	float: left;
+}
+.uploader-aside {
+	width: 30%;
+	float: left;
+}
+
+
+/**
+ * Файл
+ */
+.uploader-file {
+	position: relative;
+	cursor: pointer;
+	border: 3px solid transparent;
+	padding: 1px;
+	float: left;
+	margin: 0 10px 10px 0;
+}
+.uploader-file:hover {
+	border-color: #eee;
+}
+
+/* Изображение */
+.uploader-file-image {
+	vertical-align: top;
+	width: 100px;
+	height: 100px;
+}
+
+/* Название файла */
+.uploader-file-name {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	padding: 5px;
+	background: rgba(255,255,255,.7);
+	font-size: 11px;
+	line-height: 1em;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	-webkit-box-sizing: border-box;
+	   -moz-box-sizing: border-box;
+	        box-sizing: border-box;
+}
+
+/* Selected */
+.uploader-file.is-selected {
+	border-color: #D5CE3D;
+}
+
+/* Active */
+.uploader-file.is-selected.active {
+	border-color: #7979FC;
+}
+
+/* Progress bar */
+.uploader-file .progress {
+	width: 100px;
+	height: 100px;
+	line-height: 100px;
+	position: relative;
+	text-align: center;
+	background-color: #f5f5f5;
+}
+.uploader-file .progress-info {
+	background: #000;
+	font-size: 11px;
+	font-weight: bold;
+	color: #fff;
+	padding: 2px 4px;
+	border-radius: 2px;
+	position: relative;
+}
+.uploader-file .progress-value {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	width: 100px;
+	background: #84F76F;
+}
+
+
+/**
+ * Info
+ */
+.uploader-info-block {
+	border: 1px solid #eee;
+	padding: 20px;
+	border-radius: 5px;
+	margin-bottom: 15px;
+}
+
+/* Empty alert */
+.uploader-info .alert--empty {
+	text-align: center;
+	padding-top: 30px;
+	padding-bottom: 30px;
+}
+
+.uploader-info-base {
+	padding-left: 115px;
+	position: relative;
+	min-height: 100px;
+}
+.uploader-info-base-image {
+	position: absolute;
+	top: 0;
+	left: 0;
+}

application/frontend/skin/developer/components/uploader/js/uploader-file-list.js

@@ -0,0 +1,142 @@
+/**
+ * Uploader File List
+ *
+ * @module ls/uploader/file-list
+ *
+ * @license   GNU General Public License, version 2
+ * @copyright 2013 OOO "ЛС-СОФТ" {@link http://livestreetcms.com}
+ * @author    Denis Shakhov <denis.shakhov@gmail.com>
+ */
+
+(function($) {
+	"use strict";
+
+	$.widget( "livestreet.lsUploaderFileList", {
+		/**
+		 * Дефолтные опции
+		 */
+		options: {
+			uploader: $(),
+			info: $(),
+
+			// Множественный выбор
+			multiselect: true,
+
+			// Ссылки
+			urls: {
+				load: aRouter['ajax'] + "media/load-gallery/"
+			},
+
+			// Селекторы
+			selectors: {
+				file: '.js-media-upload-gallery-item'
+			},
+
+			// HTML
+			// TODO: Move to template
+			html: {
+				file:
+					'<li class="uploader-file js-media-upload-gallery-item">' +
+						'<div class="progress">' +
+							'<div class="progress-value js-uploader-file-progress-value"></div>' +
+							'<span class="progress-info js-uploader-file-progress-label">0%</span>' +
+						'</div>' +
+					'</li>'
+			},
+		},
+
+		/**
+		 * Конструктор
+		 *
+		 * @constructor
+		 * @private
+		 */
+		_create: function () {
+			this.elements = {};
+
+			this.params = this.option( 'uploader' ).data( 'params' );
+			this.type = this.option( 'uploader' ).data( 'type' );
+			this.id = this.option( 'uploader' ).data( 'id' );
+			this.tmp = this.option( 'uploader' ).data( 'tmp' );
+
+			this.files = null;
+			this.activeFile = $();
+		},
+
+		/**
+		 * Подгрузки списка файлов
+		 */
+		load: function() {
+			this.getFiles().lsUploaderFile( 'destroy' );
+			this.element.empty().addClass( ls.options.classes.states.loading );
+
+			ls.ajax.load( this.option( 'urls.load' ), {
+				target_type: this.type,
+				target_id:   this.id,
+				target_tmp:  this.tmp
+			}, this.onLoad.bind( this ));
+		},
+
+		/**
+		 * Коллбэк вызываемый после подгрузки списка файлов
+		 */
+		onLoad: function( respone ) {
+			this.element.removeClass( ls.options.classes.states.loading ).html( $.trim( respone.html ) );
+			this.option( 'uploader' ).lsUploader( respone.html ? 'markAsNotEmpty' : 'markAsEmpty' );
+			this.getFiles().lsUploaderFile({ uploader: this.option( 'uploader' ) });
+		},
+
+		/**
+		 * Добавляет файл в список
+		 */
+		addFile: function( data ) {
+			data.context = $( this.option( 'html.file' ) ).lsUploaderFile({ uploader: this.option( 'uploader' ) });
+
+			this.option( 'uploader' ).lsUploader( 'markAsNotEmpty' );
+			this.element.prepend( data.context );
+		},
+
+		/**
+		 * Получает активный файл
+		 */
+		getActiveFile: function() {
+			return this.getFiles().filter( '.' + ls.options.classes.states.active );
+		},
+
+		/**
+		 * Получает выделенные файлы
+		 */
+		getSelectedFiles: function() {
+			return this.getFiles().filter(function () {
+				return $( this ).lsUploaderFile( 'isSelected' );
+			});
+		},
+
+		/**
+		 * Убирает выделение со всех файлов
+		 */
+		clearSelected: function() {
+			this.getFiles().lsUploaderFile( 'unselect' );
+		},
+
+		/**
+		 * Делает активным последний выделенный файл
+		 */
+		activateNextFile: function() {
+			var last = this.getSelectedFiles().last();
+
+			if ( last.length ) {
+				last.lsUploaderFile( 'activate' );
+			} else {
+				this.option( 'info' ).lsUploaderInfo( 'empty' );
+			}
+		},
+
+		/**
+		 * Получает файлы
+		 */
+		getFiles: function() {
+			return this.element.find( this.option( 'selectors.file' ) );
+		}
+	});
+})(jQuery);

application/frontend/skin/developer/components/uploader/js/uploader-file.js

@@ -0,0 +1,194 @@
+/**
+ * Uploader File
+ *
+ * @module ls/uploader/file
+ *
+ * @license   GNU General Public License, version 2
+ * @copyright 2013 OOO "ЛС-СОФТ" {@link http://livestreetcms.com}
+ * @author    Denis Shakhov <denis.shakhov@gmail.com>
+ */
+
+(function($) {
+	"use strict";
+
+	$.widget( "livestreet.lsUploaderFile", {
+		/**
+		 * Дефолтные опции
+		 */
+		options: {
+			uploader: $(),
+
+			// Ссылки
+			urls: {
+				remove: aRouter['ajax'] + 'media/remove-file/'
+			},
+
+			// Селекторы
+			selectors: {
+				progress: {
+					value: '.js-uploader-file-progress-value',
+					label: '.js-uploader-file-progress-label'
+				}
+			},
+
+			// Классы
+			classes : {
+				active: 'active',
+				selected: 'is-selected'
+			}
+		},
+
+		/**
+		 * Конструктор
+		 *
+		 * @constructor
+		 * @private
+		 */
+		_create: function () {
+			this.elements = {};
+
+			// Информация о файле
+			this.info = this.getInfo();
+			// Файл активен
+			this.active = false;
+			// Файл выделен
+			this.selected = false;
+
+			this._on({ click: this.toggle.bind( this ) });
+		},
+
+		/**
+		 * Method
+		 */
+		toggle: function() {
+			this[ this.isActive() ? 'unselect' : 'activate' ]();
+		},
+
+		/**
+		 * Получает информацию о файле
+		 *
+		 * TODO: Refactor
+		 */
+		getInfo: function() {
+			var result = {};
+
+			$.each( this.element[ 0 ].attributes, function( index, attr ) {
+                if ( ~ attr.name.indexOf( 'data-media' ) ) {
+                	result[ attr.name.slice( 11 ) ] = attr.value;
+                }
+            });
+
+            return result;
+		},
+
+		/**
+		 * Получает свойство файла
+		 */
+		getProperty: function( name ) {
+			return this.info[ name ];
+		},
+
+		/**
+		 * Удаляет файл
+		 */
+		remove: function() {
+			this.unselect();
+
+			ls.ajax.load( this.option( 'urls.remove' ), {
+				id: this.info.id
+			}, function( response ) {
+				if ( response.bStateError ) {
+					ls.msg.error( null, response.sMsg );
+				} else {
+					this.element.fadeOut( 500, this.onRemove.bind( this, response ) );
+				}
+			}.bind( this ));
+		},
+
+		/**
+		 * Коллбэк вызываемый после удаление
+		 */
+		onRemove: function( response ) {
+			this.destroy();
+			this.element.remove();
+
+			if ( ! this._getComponent( 'list' ).lsUploaderFileList( 'getFiles' ).length ) {
+				this.option( 'uploader' ).lsUploader( 'markAsEmpty' );
+			}
+		},
+
+		/**
+		 * Помечает файл как активный
+		 *
+		 * TODO: Activate ERROR file
+		 */
+		activate: function() {
+			if ( ! this._getComponent( 'list' ).lsUploaderFileList( 'option', 'multiselect' ) ) {
+				this._getComponent( 'list' ).lsUploaderFileList( 'clearSelected' );
+			}
+
+			this.select();
+
+			this._getComponent( 'list' ).lsUploaderFileList( 'getActiveFile' ).lsUploaderFile( 'deactivate' );
+
+			this.active = true;
+			this.element.addClass( this.option( 'classes.active' ) );
+
+			this._getComponent( 'info' ).lsUploaderInfo( 'setFile', this.element );
+		},
+
+		/**
+		 * Помечает файл как неактивный
+		 */
+		deactivate: function() {
+			this.active = false;
+			this.element.removeClass( this.option( 'classes.active' ) );
+
+			this._getComponent( 'info' ).lsUploaderInfo( 'empty' );
+		},
+
+		/**
+		 * Выделяет файл
+		 */
+		select: function() {
+			this.selected = true;
+			this.element.addClass( this.option( 'classes.selected' ) );
+		},
+
+		/**
+		 * Убирает выделение с файла
+		 */
+		unselect: function() {
+			this.selected = false;
+			this.element.removeClass( this.option( 'classes.selected' ) );
+
+			if ( this.isActive() ) {
+				this.deactivate();
+				this._getComponent( 'list' ).lsUploaderFileList( 'activateNextFile' );
+			}
+		},
+
+		/**
+		 * Проверяет активен файл или нет
+		 */
+		isActive: function() {
+			return this.active;
+		},
+
+		/**
+		 * Проверяет выделен файл или нет
+		 */
+		isSelected: function() {
+			return this.selected;
+		},
+
+		/**
+		 * Вспомогательный метод
+		 *
+		 * @private
+		 */
+		_getComponent: function( name ) {
+			return this.option( 'uploader' ).lsUploader( 'getElement', name );
+		},
+	});
+})(jQuery);

application/frontend/skin/developer/components/uploader/js/uploader-info.js

@@ -0,0 +1,156 @@
+/**
+ * Отображает информацию о выбранном файле
+ *
+ * @module ls/uploader/info
+ *
+ * @license   GNU General Public License, version 2
+ * @copyright 2013 OOO "ЛС-СОФТ" {@link http://livestreetcms.com}
+ * @author    Denis Shakhov <denis.shakhov@gmail.com>
+ */
+
+(function($) {
+	"use strict";
+
+	$.widget( "livestreet.lsUploaderInfo", {
+		/**
+		 * Дефолтные опции
+		 */
+		options: {
+			uploader: $(),
+			list: $(),
+
+			// Ссылки
+			urls: {
+			},
+
+			// Селекторы
+			selectors: {
+				// Блок с информацией о файле
+				info: '.js-media-properties',
+				// Группа с информацией уникальной для каждого типа
+				group: '.js-media-info-group',
+				// Свойство
+				property: '.js-media-info-property',
+				// Сообщение об отсутствии выделенного файла
+				empty: '.js-media-info-empty'
+			}
+		},
+
+		/**
+		 * Конструктор
+		 *
+		 * @constructor
+		 * @private
+		 */
+		_create: function () {
+			this.elements = {
+				groups: this.element.find( this.option( 'selectors.group' ) ),
+				empty:  this.element.find( this.option( 'selectors.empty' ) ),
+				info:  this.element.find( this.option( 'selectors.info' ) ),
+				properties: {
+					image:    this.element.find( this.option( 'selectors.property' ) + '[data-name=image]' ),
+					name:     this.element.find( this.option( 'selectors.property' ) + '[data-name=name]' ),
+					filesize: this.element.find( this.option( 'selectors.property' ) + '[data-name=size]' ),
+					date:     this.element.find( this.option( 'selectors.property' ) + '[data-name=date]' ),
+				}
+			};
+
+			// Текущий файл
+			this.file = $();
+
+			// Удаление файла
+			this.element.on( 'click', '.js-media-item-info-remove', function () {
+				this.file.lsUploaderFile( 'remove' );
+			}.bind( this ));
+		},
+
+		/**
+		 * Устанвливает файл
+		 */
+		setFile: function( file ) {
+			var data = file.lsUploaderFile( 'getInfo' ),
+				group = this._getGroupByType( data.type );
+
+			this.file = file;
+
+			// Показываем блок с информацией
+			this.elements.empty.hide();
+			this.elements.info.show();
+
+			// Устанавливаем общие для всех типов свойства
+			this._setProperty( this.elements.properties.image,    data['preview'] );
+			this._setProperty( this.elements.properties.name,     data['file-name'] );
+			this._setProperty( this.elements.properties.filesize, data['file-size'] );
+			this._setProperty( this.elements.properties.date,     data['date-add'] );
+
+			// Активируем группу свойств данного типа
+			this._activateGroup( group );
+
+			// Устанавливаем уникальные свойства для каждого типа файла
+			this._getPropertiesByGroup( group ).each( function ( index, property ) {
+				var property = $( property );
+
+				this._setProperty( property, data[ property.data( 'name' ) ] );
+			}.bind( this ));
+		},
+
+		/**
+		 * Помечает блок как пустой
+		 *
+		 * TODO: Перенести в lsUploader
+		 */
+		empty: function() {
+			this.file = $();
+
+			this.elements.info.hide();
+			this.elements.empty.show();
+		},
+
+		/**
+		 * Обновляет информацию о файле
+		 */
+		update: function() {
+			this.setFile( this.file );
+		},
+
+		/**
+		 * @private
+		 */
+		_activateGroup: function( group ) {
+			this.elements.empty.hide();
+			this.elements.groups.hide();
+			group.show();
+		},
+
+		/**
+		 * @private
+		 */
+		_setProperty: function( element, value ) {
+			switch ( element.prop('tagName').toLowerCase() ) {
+				case 'img':
+					element.attr( 'src', value );
+					break;
+				case 'input':
+				case 'textarea':
+					element.val( value );
+					break;
+				default:
+					element.text( value );
+			}
+		},
+
+		/**
+		 * @private
+		 */
+		_getGroupByType: function( type ) {
+			return this.elements.groups.filter( '[data-type=' + type + ']' );
+		},
+
+		/**
+		 * @private
+		 */
+		_getPropertiesByGroup: function( group ) {
+			return group.find( this.option( 'selectors.property' ) );
+		},
+	});
+})(jQuery);

application/frontend/skin/developer/components/uploader/js/uploader.js

@@ -0,0 +1,184 @@
+/**
+ * Media
+ *
+ * @module ls/uploader
+ *
+ * @license   GNU General Public License, version 2
+ * @copyright 2013 OOO "ЛС-СОФТ" {@link http://livestreetcms.com}
+ * @author    Denis Shakhov <denis.shakhov@gmail.com>
+ */
+
+(function($) {
+	"use strict";
+
+	$.widget( "livestreet.lsUploader", {
+		/**
+		 * Дефолтные опции
+		 */
+		options: {
+			// Ссылки
+			urls: {
+				upload: aRouter['ajax'] + 'media/upload/',
+				generate_target_tmp: aRouter['ajax'] + 'media/generate-target-tmp/',
+			},
+
+			// Селекторы
+			selectors: {
+				list:         '.js-media-upload-gallery-list',
+				info:         '.js-media-info',
+				upload_zone:  '.js-media-upload-area',
+				upload_input: '.js-media-upload-file',
+			},
+
+			// Настройки загрузчика
+			fileupload : {
+				url: null,
+				sequentialUploads: false,
+				singleFileUploads: true,
+				limitConcurrentUploads: 3
+			},
+
+			target_type: null,
+			target_id: null,
+			target_tmp: null,
+
+			// Подгрузка списк сразу после иниц-ии
+			autoload: true,
+		},
+
+		/**
+		 * Конструктор
+		 *
+		 * @constructor
+		 * @private
+		 */
+		_create: function () {
+			this.elements = {
+				list: this.element.find( this.option( 'selectors.list' ) ),
+				info: this.element.find( this.option( 'selectors.info' ) ),
+				upload_zone: this.element.find( this.option( 'selectors.upload_zone' ) ),
+				upload_input: this.element.find( this.option( 'selectors.upload_input' ) ),
+			};
+
+			this.option( 'params', this.element.data( 'params' ) );
+			this.option( 'target_type', this.element.data( 'type' ) );
+			this.option( 'target_id', this.element.data( 'id' ) );
+			this.option( 'target_tmp', this.element.data( 'tmp' ) || $.cookie( 'media_target_tmp_' + this.option( 'target_type' ) ) );
+
+			// Генерация временного хэша для привязки
+			if ( ! this.option( 'target_id' ) && ! this.option( 'target_tmp' ) ) {
+				this.generateTargetTmp();
+			}
+
+			// Иниц-ия саб-компонентов
+			this.elements.info.lsUploaderInfo();
+			this.elements.list.lsUploaderFileList({
+				uploader: this.element,
+				info: this.elements.info
+			});
+			this.initUploader();
+
+			// Подгрузка списка файлов
+			this.option( 'autoload' ) && this.elements.list.lsUploaderFileList( 'load' );
+		},
+
+		/**
+		 * Method
+		 */
+		initUploader: function() {
+			// Настройки загрузчика
+			$.extend( this.option( 'fileupload' ), {
+				url: this.option( 'urls.upload' ),
+				dropZone: this.elements.upload_zone,
+				formData: {
+					security_ls_key: LIVESTREET_SECURITY_KEY,
+					target_type:     this.options.target_type || '',
+					target_id:       this.options.target_id || '',
+					target_tmp:      this.options.target_tmp || ''
+				}
+			});
+
+			// Иниц-ия плагина
+			this.elements.upload_input.fileupload( this.option( 'fileupload' ) );
+
+			// Коллбэки
+			this.element.on({
+				fileuploadadd: this.onUploadAdd.bind( this ),
+				fileuploaddone: function( event, data ) {
+					this[ data.result.bStateError ? 'onUploadError' : 'onUploadDone' ]( data.context, data.result );
+				}.bind( this ),
+				fileuploadprogress: function( event, data ) {
+					this.onUploadProgress( data.context, parseInt( data.loaded / data.total * 100, 10 ) );
+				}.bind( this )
+			});
+		},
+
+		/**
+		 * 
+		 */
+		onUploadProgress: function( file, percent ) {
+			file.find( file.lsUploaderFile( 'option', 'selectors.progress.value' ) ).height( percent + '%' );
+			file.find( file.lsUploaderFile( 'option', 'selectors.progress.label' ) ).text( percent + '%' );
+		},
+
+		/**
+		 * 
+		 */
+		onUploadAdd: function( event, file ) {
+			this.elements.list.lsUploaderFileList( 'addFile', file );
+		},
+
+		/**
+		 * 
+		 */
+		onUploadDone: function( file, response ) {
+			file.replaceWith(
+				$( $.trim( response.sTemplateFile ) )
+					.lsUploaderFile({ uploader: this.element })
+					.lsUploaderFile( 'activate' )
+			);
+		},
+
+		/**
+		 * 
+		 */
+		onUploadError: function( file, response ) {
+			ls.msg.error( response.sMsgTitle, response.sMsg );
+
+			file.find( file.lsUploaderFile( 'option', 'selectors.progress.value' ) ).height( 0 );
+			file.find( file.lsUploaderFile( 'option', 'selectors.progress.label' ) ).text( 'ERROR' );
+		},
+
+		/**
+		 * Генерация хэша для привязки к нему загруженных файлов
+		 */
+		generateTargetTmp: function() {
+			ls.ajax.load( this.option( 'urls.generate_target_tmp' ), {
+				type: this.option( 'target_type' )
+			}, function( response ) {
+				this.options.target_tmp = response.sTmpKey || null;
+			}.bind(this));
+		},
+
+		/**
+		 * Помечает загрузчик как пустой
+		 */
+		markAsEmpty: function() {
+			this.element.addClass('is-empty');
+		},
+
+		/**
+		 * Помечает загрузчик как не пустой
+		 */
+		markAsNotEmpty: function() {
+			this.element.removeClass('is-empty');
+		},
+
+		/**
+		 * 
+		 */
+		getElement: function( name ) {
+			return this.elements[ name ];
+		},
+	});
+})(jQuery);

application/frontend/skin/developer/components/uploader/uploader-file.tpl

@@ -0,0 +1,29 @@
+{**
+ * Файл
+ *}
+
+{$component = 'uploader-file'}
+
+{$file = $oMediaItem}
+
+<li class="{$component} {if $bIsSelected}is-selected{/if} {if $bIsActive}active{/if} js-media-upload-gallery-item"
+		data-media-id="{$file->getId()}"
+		data-media-type="{$file->getType()}"
+		data-media-date-add="{date_format date=$file->getDateAdd() format='j F Y, H:i'}"
+		data-media-title="{$file->getDataOne('title')|escape}"
+		data-media-file-name="{$file->getFileName()|escape}"
+		data-media-file-size="{$file->getFileSize()}"
+		data-media-width="{$file->getWidth()}"
+		data-media-height="{$file->getHeight()}"
+		data-media-dimensions="{$file->getWidth()}x{$file->getHeight()}"
+		data-media-preview="{$file->getFileWebPath('100crop')}"
+		data-media-image-sizes={json var=$file->getDataOne('image_sizes')}
+		data-media-relation-is-preview={json var=$file->getRelationTarget()->getIsPreview()}>
+	{* Превью *}
+	<img src="{$file->getFileWebPath('100crop')}" alt="{$file->getFileName()|escape}" class="{$component}-image">
+
+	{* Название файла *}
+	<div class="{$component}-name">
+		{$file->getFileName()|escape}
+	</div>
+</li>

application/frontend/skin/developer/components/uploader/uploader-info-block.tpl

@@ -0,0 +1 @@
+{extends 'components/block/block.tpl'}

application/frontend/skin/developer/components/uploader/uploader-info.tpl

@@ -0,0 +1,48 @@
+{**
+ * Информация об активном файле
+ *}
+
+{$component = 'uploader-info'}
+
+{block 'uploader_info_options'}{/block}
+
+{* Информация о выделенном файле *}
+<div class="{$component} js-media-info">
+	{* Блок отображаемый когда нет выделенных файлов *}
+	{include 'components/alert/alert.tpl' sMods='empty' mAlerts={lang name='uploader.info.empty'} sClasses='js-media-info-empty'}
+
+	{* Информация о файле *}
+	<div class="{$component}-block js-media-properties" style="display: none;">
+
+		{* Основная информация о файле *}
+		<div class="{$component}-base">
+			{* Превью *}
+			<img src="" alt="" class="{$component}-base-image js-media-info-property" data-name="image" width="100" height="100">
+
+			{* Информация *}
+			<ul class="{$component}-base-properties">
+				<li><strong class="word-wrap js-media-info-property" data-name="name"></strong></li>
+				<li class="js-media-info-property" data-name="date"></li>
+				<li><span class="js-media-info-property" data-name="size"></span></li>
+			</ul>
+	    </div>
+
+		{* Информация о файле *}
+		<div class="{$component}-type js-media-info-group" data-type="1" style="display: none;">
+			<ul class="{$component}-actions">
+				<li><a href="#" class="link-dotted js-media-item-info-remove">{lang name='uploader.actions.remove'}</a></li>
+			</ul>
+
+			<div class="{$component}-type-info">
+				Разрешение: <span class="js-media-info-property" data-name="dimensions"></span>
+			</div>
+
+			{* Описание *}
+			{include 'components/field/field.text.tpl'
+				sName  = 'title'
+				sInputClasses  = 'js-media-info-property'
+				sInputAttributes  = 'data-name="title"'
+				sLabel = $aLang.uploadimg_title}
+	    </div>
+    </div>
+</div>

application/frontend/skin/developer/components/uploader/uploader.tpl

@@ -0,0 +1,40 @@
+{**
+ * Загрузка и управление файлами
+ *}
+
+{$component = 'uploader'}
+
+{block 'block_options'}
+	{$mods = $smarty.local.mods}
+	{$classes = $smarty.local.classes}
+	{$attributes = $smarty.local.attributes}
+	{$show = $smarty.local.show|default:true}
+{/block}
+
+<div class="{$component} {mod name=$component mods=$mods} {$classes}" {$attributes}
+	data-params={json var=$smarty.local.targetParams}
+	data-type={json var=$smarty.local.targetType}
+	data-id={json var=$smarty.local.targetId}
+	data-tmp={json var=$smarty.local.targetTmp}>
+
+	{block 'uploader_content'}
+		{* Drag & drop зона *}
+		{include 'components/field/field.upload-area.tpl'
+			classes      = 'js-media-upload-area'
+			inputClasses = 'js-media-upload-file'
+			inputName    = 'filedata'}
+
+		{* Галерея *}
+		<div class="{$component}-wrapper clearfix">
+			{* Список файлов *}
+			<ul class="{$component}-file-list js-media-upload-gallery-list"></ul>
+
+			{* Информация о выделенном файле *}
+			<div class="{$component}-aside">
+				{block 'uploader_aside'}
+					{include './uploader-info.tpl'}
+				{/block}
+			</div>
+		</div>
+	{/block}
+</div>

application/frontend/skin/developer/settings/config/config.php

@@ -51,6 +51,8 @@ $aCss = array(
 	"___path.skin.assets.web___/css/components/alphanumeric.css",
 	"___path.skin.assets.web___/css/components/search_form.css",
 	"___path.skin.assets.web___/css/components/field.css",
+	"___path.skin.web___/components/uploader/css/uploader.css",
+	"___path.skin.assets.web___/css/components/media.css",
 
 	// Template's styles
 	"___path.skin.assets.web___/css/icons.css",