Added: Canceling uploading for modern browsers (Issue nervgh#28, part 1)

Author: nerv

README.md

@@ -60,6 +60,8 @@ When files are selected or dropped into the component, one or more filters are a
 - **getNotUploadedItems** `function() { return [Array]; }`: Return an array of all pending items on the queue
 - **uploadItem** `function( value ) {`: Uploads an item, where `value` is a queue element `Item` or index
 - **uploadAll** `function() {`: Upload all pending items on the queue
+- **cancelItem** `function( value ) {`: Cancels uploading of item, where `value` is a queue element `Item` or index
+- **cancelAll** `function() {`: Cancels all current uploads
 
 ### The Item API:
 
@@ -77,13 +79,15 @@ When files are selected or dropped into the component, one or more filters are a
 - **isUploading** `{Boolean}`: `true` if the file is being uploaded
 - **isUploaded** `{Boolean}`: `true` if the file was uploaded
 - **isSuccess** `{Boolean}`: `true` if the file was uploaded successfully
+- **isCancel** `{Boolean}` : `true` if uploading was canceled
 - **isError** `{Boolean}` - `true` if occurred error while file uploading
 - **uploader** `{Object}`: Reference to the parent `Uploader` object for this file
 
 #### Methods
 
 - **remove** `function() {`: Remove this file from the queue
 - **upload** `function() {`: Upload this file
+- **cancel** `function() {`: Cancels uploading of this file
 
 ## Filters
 
@@ -126,6 +130,7 @@ function( item ) {
 - **changedqueue** `function( event, [item|items] ) {`: When the queue has changed as a result of adding or removing elements
 - **progress** `function( event, item, progress ) {`: On file upload progress
 - **success** `function( event, xhr, item, response ) {`: On file successfully uploaded
+- **cancel** `function( event, xhr, item ) {` - On cancel uploading
 - **error** `function( event, xhr, item[, response ]) {`: On upload error
 - **complete** `function( event, xhr, item, response ) {`: On file upload complete (independently of the sucess of the operation)
 - **progressall** `function( event, progress ) {`: On upload queue progress
@@ -208,6 +213,8 @@ uploader.queue.push({
 - **getNotUploadedItems** `function() { return [Array]; }` - возвращает массив не загруженных элементов
 - **uploadItem** `function( value ) {` - где _value_ элемент очереди или его индекс [Item|Index]
 - **uploadAll** `function() {` - загружает все незагруженные элементы
+- **cancelItem** `function( value ) {` - где _value_ элемент очереди или его индекс [Item|Index]
+- **cancelAll** `function() {` - отменяет все текущие загрузки
 
 ### Элемент очереди API:
 
@@ -225,13 +232,15 @@ uploader.queue.push({
 - **isUploading** `{Boolean}` - файл в процессе загрузки
 - **isUploaded** `{Boolean}` - файл загружен
 - **isSuccess** `{Boolean}` - файл успешно загружен
+- **isCancel** `{Boolean}` - загрузка файла была отменена
 - **isError** `{Boolean}` - при загрузке файла произошла ошибка
 - **uploader** `{Object}` - ссылка на загрузчик
 
 #### Методы
 
 - **remove** `function() {` - удаляет элемент
 - **upload** `function() {` - загружает элемент
+- **cancel** `function() {` - отменяет загрузку элемента
 
 ## Фильтры
 
@@ -273,6 +282,7 @@ function( item ) {
 - **changedqueue** `function( event, [item|items] ) {` - очередь изменена
 - **progress** `function( event, item, progress ) {` - прогресс загрузки файла
 - **success** `function( event, xhr, item, response ) {` - файл успешно загружен
+- **cancel** `function( event, xhr, item ) {` - отменяет загрузку файла
 - **error** `function( event, xhr, item[, response ]) {` - ошибка при загрузке
 - **complete** `function( event, xhr, item, response ) {` - файл загружен
 - **progressall** `function( event, progress ) {` - прогресс загрузки очереди

angular-file-upload.js

@@ -10,14 +10,14 @@
 /**
  * The angular file upload module
  * @author: nerv
- * @version: 0.2.9.7, 2013-12-31
+ * @version: 0.2.9.8, 2013-12-31
  */
 var app = angular.module('angularFileUpload', []);
 
 /**
  * The angular file upload module
  * @author: nerv
- * @version: 0.2.9.7, 2013-12-31
+ * @version: 0.2.9.8, 2013-12-31
  */
 
 // It is attached to an element that catches the event drop file
@@ -57,7 +57,7 @@ app.directive('ngFileDrop', [ '$fileUploader', function ($fileUploader) {
 /**
  * The angular file upload module
  * @author: nerv
- * @version: 0.2.9.7, 2013-12-31
+ * @version: 0.2.9.8, 2013-12-31
  */
 
 // It is attached to an element which will be assigned to a class "ng-file-over" or ng-file-over="className"
@@ -78,7 +78,7 @@ app.directive('ngFileOver', function () {
 /**
  * The angular file upload module
  * @author: nerv
- * @version: 0.2.9.7, 2013-12-31
+ * @version: 0.2.9.8, 2013-12-31
  */
 
 // It is attached to <input type="file"> element like <ng-file-select="options">
@@ -99,7 +99,7 @@ app.directive('ngFileSelect', [ '$fileUploader', function ($fileUploader) {
 /**
  * The angular file upload module
  * @author: nerv
- * @version: 0.2.9.7, 2013-12-31
+ * @version: 0.2.9.8, 2013-12-31
  */
 
 app.factory('$fileUploader', [ '$compile', '$rootScope', '$http', '$window', function ($compile, $rootScope, $http, $window) {
@@ -134,6 +134,7 @@ app.factory('$fileUploader', [ '$compile', '$rootScope', '$http', '$window', fun
  this.bind('beforeupload', Item.prototype._beforeupload);
  this.bind('in:progress', Item.prototype._progress);
  this.bind('in:success', Item.prototype._success);
+ this.bind('in:cancel', Item.prototype._cancel);
  this.bind('in:error', Item.prototype._error);
  this.bind('in:complete', Item.prototype._complete);
  this.bind('changedqueue', this._changedQueue);
@@ -220,8 +221,10 @@ app.factory('$fileUploader', [ '$compile', '$rootScope', '$http', '$window', fun
  * @param {Item|Number} value
  */
  removeFromQueue: function (value) {
- var index = angular.isObject(value) ? this.getIndexOfItem(value) : value;
- var item = this.queue.splice(index, 1)[ 0 ];
+ var index = this.getIndexOfItem(value);
+ var item = this.queue[ index ];
+ item.isUploading && item.cancel();
+ this.queue.splice(index, 1);
  item._destroyForm();
  this.trigger('changedqueue', item);
  },
@@ -231,6 +234,7 @@ app.factory('$fileUploader', [ '$compile', '$rootScope', '$http', '$window', fun
  */
  clearQueue: function () {
  this.queue.forEach(function (item) {
+ item.isUploading && item.cancel();
  item._destroyForm();
  }, this);
  this.queue.length = 0;
@@ -239,11 +243,11 @@ app.factory('$fileUploader', [ '$compile', '$rootScope', '$http', '$window', fun
 
  /**
  * Returns a index of item from the queue
- * @param item
+ * @param {Item|Number} value
  * @returns {Number}
  */
- getIndexOfItem: function (item) {
- return this.queue.indexOf(item);
+ getIndexOfItem: function (value) {
+ return angular.isObject(value) ? this.queue.indexOf(value) : value;
  },
 
  /**
@@ -271,11 +275,11 @@ app.factory('$fileUploader', [ '$compile', '$rootScope', '$http', '$window', fun
  },
 
  /**
- * Upload a item from the queue
+ * Uploads a item from the queue
  * @param {Item|Number} value
  */
  uploadItem: function (value) {
- var index = angular.isObject(value) ? this.getIndexOfItem(value) : value;
+ var index = this.getIndexOfItem(value);
  var item = this.queue[ index ];
  var transport = item._hasForm() ? '_iframeTransport' : '_xhrTransport';
 
@@ -290,6 +294,24 @@ app.factory('$fileUploader', [ '$compile', '$rootScope', '$http', '$window', fun
  this[ transport ](item);
  },
 
+
+ /**
+ * Cancels uploading of item from the queue
+ * @param {Item|Number} value
+ */
+ cancelItem: function(value) {
+ var index = this.getIndexOfItem(value);
+ var item = this.queue[ index ];
+
+ if (item._hasForm()) {
+ // TODO: old browsers
+ } else {
+ item._xhr && item._xhr.abort();
+ delete item._xhr;
+ }
+ },
+
+
  /**
  * Uploads all not uploaded items of queue
  */
@@ -305,6 +327,16 @@ app.factory('$fileUploader', [ '$compile', '$rootScope', '$http', '$window', fun
  },
 
 
+ /**
+ * Cancels all uploads
+ */
+ cancelAll: function() {
+ this.getNotUploadedItems().forEach(function(item) {
+ item.cancel();
+ });
+ },
+
+
  /**
  * Returns the total progress
  * @param {Number} [value]
@@ -340,7 +372,7 @@ app.factory('$fileUploader', [ '$compile', '$rootScope', '$http', '$window', fun
  var item = this.getReadyItems()[ 0 ];
  this.isUploading = false;
 
- if ( angular.isDefined(item) ) {
+ if (angular.isDefined(item)) {
  this.uploadItem(item);
  return;
  }
@@ -362,7 +394,7 @@ app.factory('$fileUploader', [ '$compile', '$rootScope', '$http', '$window', fun
  * The XMLHttpRequest transport
  */
  _xhrTransport: function (item) {
- var xhr = new XMLHttpRequest();
+ var xhr = item._xhr = new XMLHttpRequest();
  var form = new FormData();
  var that = this;
 
@@ -394,6 +426,7 @@ app.factory('$fileUploader', [ '$compile', '$rootScope', '$http', '$window', fun
  };
 
  xhr.onabort = function () {
+ that.trigger('in:cancel', xhr, item);
  that.trigger('in:complete', xhr, item);
  };
 
@@ -499,6 +532,7 @@ app.factory('$fileUploader', [ '$compile', '$rootScope', '$http', '$window', fun
  isUploading: false,
  isUploaded: false,
  isSuccess: false,
+ isCancel: false,
  isError: false,
  progress: null,
  index: null
@@ -512,6 +546,9 @@ app.factory('$fileUploader', [ '$compile', '$rootScope', '$http', '$window', fun
  upload: function () {
  this.uploader.uploadItem(this);
  },
+ cancel: function() {
+ this.uploader.cancelItem(this);
+ },
  _hasForm: function() {
  return !!(this.file && this.file._form);
  },
@@ -523,6 +560,7 @@ app.factory('$fileUploader', [ '$compile', '$rootScope', '$http', '$window', fun
  item.isUploading = true;
  item.isUploaded = false;
  item.isSuccess = false;
+ item.isCancel = false;
  item.isError = false;
  item.progress = null;
  },
@@ -535,30 +573,35 @@ app.factory('$fileUploader', [ '$compile', '$rootScope', '$http', '$window', fun
  item.isUploading = false;
  item.isUploaded = true;
  item.isSuccess = true;
+ item.isCancel = false;
  item.isError = false;
  item.progress = 100;
  item.index = null;
  item.uploader.trigger('success', xhr, item, response);
  },
+ _cancel: function(event, xhr, item) {
+ item.isReady = false;
+ item.isUploading = false;
+ item.isUploaded = false;
+ item.isSuccess = false;
+ item.isCancel = true;
+ item.isError = false;
+ item.progress = 0;
+ item.index = null;
+ item.uploader.trigger('cancel', xhr, item);
+ },
  _error: function (event, xhr, item, response) {
  item.isReady = false;
  item.isUploading = false;
  item.isUploaded = true;
  item.isSuccess = false;
+ item.isCancel = false;
  item.isError = true;
  item.progress = 100;
  item.index = null;
  item.uploader.trigger('error', xhr, item, response);
  },
  _complete: function (event, xhr, item, response) {
- var status = item.uploader._isSuccessCode(xhr.status);
- item.isReady = false;
- item.isUploading = false;
- item.isUploaded = true;
- item.isSuccess = status;
- item.isError = !status;
- item.progress = 100;
- item.index = null;
  item.uploader.trigger('complete', xhr, item, response);
  item.removeAfterUpload && item.remove();
  }