Shitbox2, молодец ) Ковер и гендольф (или как его там) заслуживают отдельного упоминания
у меня пока такая штука получилась
http://www.screencapture.ru/file/1190575A
Что есть:
Директивы:
-
ngFileSelect - вешается на <input type="file" />
-
ngFileDrop - вешается на DOM элемент, кот. будет ловить файлы (как правило, это весь документ)
-
ngFileOver - вешается на элемент, кот. будет реагировать (добавляться класс), когда файлы находятся над drop элементом. По умолчанию добавляется класс "ng-file-over". Другой класс можно задать в параметре атрибута ng-file-over="className"
(в этом плане ничего не менял)
Один сервис:
-
$fileUploader - управление очередью и загрузка файлов
$fileUploader
свойства:
-
url: общий для всех файлов. Можно индивидуализировать для каждого файла, после добавления файла в хранилище
-
alias - псевдоним, под которым сервер увидит файл. Общий для всех файлов. Можно индивидуализировать для каждого файла, после добавления файла в хранилище
-
autoUpload - автозагрузка (true/false)
-
removeAfterUpload - удалить из очереди после загрузки (true/false)
-
filters - фильтры, применяемые к файлам перед добавлением в очередь. По умолчанию присутствует simple filer : )
-
queue - очередь
методы:
-
bind - пожалуй, один из наиболее важных. Регистрирует коллбеки. Позволяет повесить на одно событие сколько угодно (в пределах разумного
) обработчиков.
-
addToQueue - добавляет файлы в очередь загрузки
-
removeFromQueue - удаляет файл из очереди по индексу
-
clearQueue - очищает очередь
-
uploadItem - загружает файл по индексу
-
uploadAll - загружает все файлы в очереди
коллбеки:
-
afteraddingfile - после добавления файла в очередь
-
afteraddingall - после добавления всех файлов в очередь
-
beforeupload - перед загрузкой
-
progress - индикация загрузки файла
-
success - успешная загрузка
-
error - ошибка при загрузке
-
complete - загрузка завершена
Чтобы было проще понять, приведу кусок кода:
app.controller( 'MainController', function( $scope, $fileUploader ) {
$scope.model = {};
// пользовательские фильтры
$scope.filter1 = function( item ) {
console.log( 'filter1' );
return true;
};
// их может быть много, главное их добавить (push)
$scope.filter2 = function( item ) {
console.log( 'filter2' );
return true;
};
// коллбек "после добавления файла в очередь"
$scope.afterAddingFile = function( item ) {
console.log( item );
};
// коллбек "после добавления всех файлов в очередь"
$scope.afterAddingAll = function( items ) {
$scope.model.items = $fileUploader.queue;
$scope.$apply();
};
// коллбек "перед загрузкой"
$scope.beforeUpload = function( item ) {
console.log( item );
};
// коллбек "progress для файла"
$scope.progress = function( progress ) {
console.log( 'Progress: ' + progress );
$scope.$apply();
};
// коллбек "success для файла"
$scope.success = function( xhr ) {
console.log( 'Success: ' + xhr.response );
};
// коллбек "complete для файла"
$scope.complete = function( xhr ) {
console.log( 'Complete: ' + xhr.response );
$scope.$apply();
};
// управление очередью
$scope.uploadAll = function() {
$fileUploader.uploadAll();
};
// управление очередью
$scope.removeAll = function() {
$fileUploader.clearQueue();
};
$fileUploader.url = '/upload.php';
// добавление фильтров
$fileUploader.filters.push( $scope.filter1 );
$fileUploader.filters.push( $scope.filter2 );
// регистрация наблюдателей
$fileUploader.bind( 'afteraddingfile', $scope.afterAddingFile );
$fileUploader.bind( 'afteraddingall', $scope.afterAddingAll );
$fileUploader.bind( 'beforeupload', $scope.beforeUpload );
$fileUploader.bind( 'progress', $scope.progress );
$fileUploader.bind( 'success', $scope.success );
$fileUploader.bind( 'complete', $scope.complete );
});
т.о. на любое событие может подписаться произвольное количество раз любой контроллер (или несколько контроллеров)
код
http://learn.javascript.ru/play/DUtgpc
Насчет абортов. Говорят, это плохо
Хочу сделать Progress, Success(may be) и Complete для всей очереди, после чего приступлю к генерации превьюшек. Скорее всего у меня будет для этого отдельный сервис.
Как то так
