View file Загрузка фото AJAX/js/photo/uploader.js

var LANG_DROP_TO_UPLOAD = 'Перетащите сюда файлы';
var LANG_CANCEL = 'Отмена';
var LANG_ERROR = 'Произошла ошибка';
var LANG_SELECT_UPLOAD = 'Выберите файл';
var fileTpl = '<span style="float: right;"><img class="qq-files-list-file-cancel" upload-file-id="" src="/style/icons/delete.gif" alt="" /> <img id="edit_start" class="hidden" src="/style/icons/edit.gif" alt="" /> <img id="delete_foto" class="hidden" src="/style/icons/delete.gif" alt="" /></span>'
	+ '<div class="preview hidden"><img src=""></div>'
	+ '<div> '
	+ '<img id="file_icon" /> '
	+ '<span id="file_name"></span>'
	+ '</div>'
	+ '<div class="qq-progress-wrapper"><div class="qq-progress"></div></div>'
	+ '<div class="edit">'
	+ 'Имя:<br><input type="text" id="edit_name"><br>'
	+ 'Описание:<br><textarea id="edit_desc"></textarea><br>'
	+ '<input type="submit" id="edit_save_btn" value="Сохранить"><br>'
	+ '</div>';
var EDIT_PHOTO_URL = '/ajax/photo/edit_photo.php';
var DELETE_PHOTO_URL = '/ajax/photo/delete_photo.php';

function handleJsonErrors(json) {
	if (json == undefined || json.error != undefined) {
		showError(json == undefined ? 'Произошла ошибка' : json.error);
		return true;
	}

	return false;
}

String.prototype.trim = function trim(text) {
	return this.replace(/^\s*/, '').replace(/\s*$/, '');
}

function showError(error) {
	alert(error);
}


function PhotoUploader(id_gallery) {
	var self = this;
	var file_uploader_url = '/ajax/photo/upload_file.php?id_gallery=' + id_gallery;
	var image_icon_src = '/style/themes/default/loads/14/jpg.png';

	var fileUploaderWrapperElement = document.getElementById('file_uploader_wrapper');
	var fileUploaderElement = fileUploaderWrapperElement.querySelector('#file_uploader');
	var filesListElement = document.getElementById('fu_files_list');
	var $fileUploaderElement = $(fileUploaderElement);
	var $filesListElement = $(filesListElement);

	var editSaveQueue = {},
		filesQueue = {},
		deleteQueue = {};

	var uploader;

	$(document).ready(function () {
		var uploader = self.initUploader();
	});

	this.initUploader = function () {
		return new qq.FileUploader({
			element: fileUploaderElement, 
			listElement: filesListElement, 
			action: file_uploader_url, 
			multiple: true, 
			debug: true, 
			onSubmit: function(id, fileName) {
				var fileElement = $('<div>', {html: fileTpl, class: 'main'}).appendTo($filesListElement);
				fileElement.find('#file_icon').attr('src', image_icon_src);
				fileElement.find('#file_name').text(fileName);
				filesQueue[id] = fileElement;

				var cancel = fileElement.find('.qq-files-list-file-cancel');
				cancel.show();
				cancel.attr('upload-file-id', id);
			}, 
			onProgress: function(id, fileName, loaded, total) {
				var fileElement = filesQueue[id];
				if (!fileElement)
					return;

				fileElement.find('.qq-progress-wrapper').show();
				fileElement.find('.qq-progress').width(((loaded / total) * 100) + '%');
			}, 
			onCancel: function(id, fileName) {
				var fileElement = filesQueue[id];
				fileElement.remove();
				delete filesQueue[id];
			}, 
			onComplete: function(id, fileName, result) {
				var fileElement = filesQueue[id];
				if (result != undefined) {
					if (result.status == 1) {
						fileElement.attr('data-id-foto', result.id_foto);
						fileElement.find('.qq-progress-wrapper').hide();
						fileElement.find('.qq-files-list-file-cancel').hide();
						var $previewElement = $('.preview', fileElement);
						$previewElement.show();
						$('img', $previewElement).attr('src', '/foto/foto128/' + result.id_foto + '.jpg');
						$('#file_name', fileElement).html('<a href="/foto/' + id_current_user + '/' + id_gallery + '/' + result.id_foto + '/">' + result.name + '.' + result.extension + '</a>');
						var $editElement = $('.edit', fileElement);
						$('#edit_name', $editElement).val(result.name_input);

						self.addEdit(result.id_foto);
						self.addDelete(result.id_foto);
						return;
					} else {
						showError(result.error);
					}
				} else {
						showError('Произошла ошибка');
				}
				fileElement.remove();
				delete filesQueue[id];
			}, 
			showMessage: function () {}
		});
	}

	this.cancelUploadingFile = function(id) {
		uploader._handler.cancel(id);
	}

	this.addEdit = function (id_foto) {
		var $fileElement = $('[data-id-foto=' + id_foto + ']', $filesListElement);
		$fileElement.addClass('editing');
		var $editElement = $('.edit', $fileElement);
		var $editNameElement = $('#edit_name', $editElement);
		var $editDescElement = $('#edit_desc', $editElement);
		var $editSaveBtn = $('#edit_save_btn', $editElement);

		var $editStartBtn = $('#edit_start', $fileElement);
		$editStartBtn.show();

		$editStartBtn.on('click', function () {
			$fileElement.toggleClass('editing');
		})

		$editSaveBtn.on('click', function (e) {
			e.preventDefault();

			if (editSaveQueue[id_foto] != undefined) {
				showError('Не так быстро');
				return;
			}

			var name = $editNameElement.val().trim();
			var desc = $editDescElement.val().trim();

			if (name.length == 0) {
				showError('Введите название файла');
				return;
			}

			$.ajax({
				url: EDIT_PHOTO_URL, 
				type: 'post', 
				data: {
					id_gallery: id_gallery, 
					id_foto: id_foto, 
					name: name, 
					desc: desc
				}, 
				success: function (json) {
					console.log(json);
					if (handleJsonErrors(json))
						return;
					$('#file_name', $fileElement).html('<a href="/foto/' + id_current_user + '/' + id_gallery + '/' + id_foto + '/">' + json.name + '.' + json.extension + '</a>');
					$editStartBtn.click();
				}, 
				complete: function () {
					delete editSaveQueue[id_foto];
				}
			});
		})
	}

	this.addDelete = function (id_foto) {
		var $fileElement = $('[data-id-foto=' + id_foto + ']', $filesListElement);
		var $deleteBtn = $('#delete_foto', $fileElement);
		$deleteBtn.show();

		$deleteBtn.on('click', function () {
			if (deleteQueue[id_foto]) {
				showError('Не так быстро');
				return;
			}

			$.ajax({
				url: DELETE_PHOTO_URL, 
				type: 'post', 
				data: {
					id_gallery: id_gallery, 
					id_foto: id_foto
				}, 
				success: function (json) {
					if (handleJsonErrors(json))
						return;

					$fileElement.hide(100, function () {
						$fileElement.remove();
					});
				}, 
				complete: function () {
					delete deleteQueue[id_foto];
				}
			});
		});
	}

}