Skip to content

Commit

Permalink
Added: Deferred file uploading (Issue nervgh#22, Issue nervgh#23); "F…
Browse files Browse the repository at this point in the history 
…ix addition of method type" (Issue nervgh#24)
  • Loading branch information
nerv committed Nov 30, 2013
1 parent ee8fce9 commit 55609ba
Showing 11 changed files with 57 additions and 58 deletions.
12 changes: 6 additions & 6 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -15,7 +15,7 @@ When files are selected or dropped into the component, one or more filters are a
## Requires

- The [AngularJS](https://github.com/angular/angular.js) framework
- ES5 (Array.indexOf, Array.filter, Array.every, Function.bind, Date.now) A shim is provided for older browsers
- ES5 (Array.indexOf, Array.forEach, Array.filter, Array.every, Function.bind, Date.now) A shim is provided for older browsers

## Includes

@@ -43,7 +43,7 @@ When files are selected or dropped into the component, one or more filters are a
- **formData** `{Array}`: Data to be sent along with the files
- **filters** `{Array}`: Filters to be applied to the files before adding them to the queue. If the filter returns `true` the file will be added to the queue
- **autoUpload** `{Boolean}`: Automatically upload files after adding them to the queue
- **requestMethod** `{String}`: It's a request method. By default `POST`
- **method** `{String}`: It's a request method. By default `POST`
- **removeAfterUpload** `{Boolean}`: Remove files from the queue after uploading
- **hasHTML5** `{Boolean}`: Checks whether browser has HTML5 upload support
- **isUploading** `{Boolean}`: `true` if an upload is in progress
@@ -71,7 +71,7 @@ When files are selected or dropped into the component, one or more filters are a
- **formData** `{Array}`: Data to be sent along with this file
- **progress** `{Number}`: File upload progress percentage
- **index** `{Number}` - A sequence number upload
- **requestMethod** `{String}`: It's a request method. By default `POST`
- **method** `{String}`: It's a request method. By default `POST`
- **removeAfterUpload** `{Boolean}`: Remove this file from the queue after uploading
- **isReady** `{Boolean}` - File is ready to upload
- **isUploading** `{Boolean}`: `true` if the file is being uploaded
@@ -163,7 +163,7 @@ uploader.queue.push({

## Требует
- [AngularJS](https://github.com/angular/angular.js) фреймворк
- ES5 (Array.indexOf, Array.filter, Array.every, Function.bind, Date.now)
- ES5 (Array.indexOf, Array.forEach, Array.filter, Array.every, Function.bind, Date.now)

## Включает

@@ -190,7 +190,7 @@ uploader.queue.push({
- **formData** `{Array}` - данные, отправляемые вместе с файлами
- **filters** `{Array}` - фильтры, применяемые к [файлу|элементу] перед добавлением его в очередь. Если фильтр возвращает `true`, [файл|элемент] будет добавлен в очередь
- **autoUpload** `{Boolean}` - загружать автоматически после добавления элемента в очередь
- **requestMethod** `{String}`: - метод запроса. По умолчанию `POST`
- **method** `{String}`: - метод запроса. По умолчанию `POST`
- **removeAfterUpload** `{Boolean}` - удалить файлы после загрузки
- **hasHTML5** `{Boolean}` - проверяет, поддерживает ли браузер html5 загрузку
- **isUploading** `{Boolean}` - загрузчик в процессе загрузки
@@ -218,7 +218,7 @@ uploader.queue.push({
- **formData** `{Array}` - данные, отправляемые вместе с файлом
- **progress** `{Number}` - прогресс загрузки файла
- **index** `{Number}` - индекс / порядковый номер загрузки
- **requestMethod** `{String}`: - метод запроса. По умолчанию `POST`
- **method** `{String}`: - метод запроса. По умолчанию `POST`
- **removeAfterUpload** `{Boolean}` - удалить файл после загрузки
- **isReady** `{Boolean}` - файл готов к загрузке
- **isUploading** `{Boolean}` - файл в процессе загрузки
51 changes: 24 additions & 27 deletions angular-file-upload.js
View file
Original file line number Diff line number Diff line change
@@ -10,14 +10,14 @@
/**
* The angular file upload module
* @author: nerv
* @version: 0.2.9.2, 2013-11-29
* @version: 0.2.9.4, 2013-12-01
*/
var app = angular.module('angularFileUpload', []);

/**
* The angular file upload module
* @author: nerv
* @version: 0.2.9.2, 2013-11-29
* @version: 0.2.9.4, 2013-12-01
*/

// 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.2, 2013-11-29
* @version: 0.2.9.4, 2013-12-01
*/

// 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.2, 2013-11-29
* @version: 0.2.9.4, 2013-12-01
*/

// 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.2, 2013-11-29
* @version: 0.2.9.4, 2013-12-01
*/

app.factory('$fileUploader', [ '$compile', '$rootScope', '$http', '$window', function ($compile, $rootScope, $http, $window) {
@@ -115,16 +115,14 @@ app.factory('$fileUploader', [ '$compile', '$rootScope', '$http', '$window', fun
progress: null,
autoUpload: false,
removeAfterUpload: false,
requestMethod: 'POST',
method: 'POST',
filters: [],
formData: [],
isUploading: false,
_nextIndex: 0,
_timestamp: Date.now()
}, params);

this._observer = this.scope.$new(true);

// add the base filter
this.filters.unshift(this._filter);

@@ -160,7 +158,7 @@ app.factory('$fileUploader', [ '$compile', '$rootScope', '$http', '$window', fun
* @param {Function} handler
*/
bind: function (event, handler) {
this._observer.$on(this._timestamp + ':' + event, handler.bind(this));
this.scope.$on(this._timestamp + ':' + event, handler.bind(this));
return this;
},

@@ -170,9 +168,8 @@ app.factory('$fileUploader', [ '$compile', '$rootScope', '$http', '$window', fun
* @param {...*} [some]
*/
trigger: function (event, some) {
var params = Array.prototype.slice.call(arguments, 1);
params.unshift(this._timestamp + ':' + event);
this._observer.$emit.apply(this._observer, params);
arguments[ 0 ] = this._timestamp + ':' + event;
this.scope.$broadcast.apply(this.scope, arguments);
return this;
},

@@ -202,7 +199,7 @@ app.factory('$fileUploader', [ '$compile', '$rootScope', '$http', '$window', fun
headers: angular.copy(this.headers),
formData: angular.copy(this.formData),
removeAfterUpload: this.removeAfterUpload,
requestMethod: this.requestMethod,
method: this.method,
uploader: this,
file: item
}, options));
@@ -236,7 +233,7 @@ app.factory('$fileUploader', [ '$compile', '$rootScope', '$http', '$window', fun
* Clears the queue
*/
clearQueue: function () {
angular.forEach(this.queue, function (item) {
this.queue.forEach(function (item) {
item._destroyForm();
}, this);
this.queue.length = 0;
@@ -376,36 +373,36 @@ app.factory('$fileUploader', [ '$compile', '$rootScope', '$http', '$window', fun

this.trigger('beforeupload', item);

angular.forEach(item.formData, function(obj) {
item.formData.forEach(function(obj) {
angular.forEach(obj, function(value, key) {
form.append(key, value);
});
});

form.append(item.alias, item.file);

xhr.upload.addEventListener('progress', function (event) {
xhr.upload.onprogress = function (event) {
var progress = event.lengthComputable ? event.loaded * 100 / event.total : 0;
that.trigger('in:progress', item, Math.round(progress));
}, false);
};

xhr.addEventListener('load', function () {
xhr.onload = function () {
var response = that._transformResponse(xhr.response);
var event = that._isSuccessCode(xhr.status) ? 'success' : 'error';
that.trigger('in:' + event, xhr, item, response);
that.trigger('in:complete', xhr, item, response);
}, false);
};

xhr.addEventListener('error', function () {
xhr.onerror = function () {
that.trigger('in:error', xhr, item);
that.trigger('in:complete', xhr, item);
}, false);
};

xhr.addEventListener('abort', function () {
xhr.onabort = function () {
that.trigger('in:complete', xhr, item);
}, false);
};

xhr.open(item.requestMethod, item.url, true);
xhr.open(item.method, item.url, true);

angular.forEach(item.headers, function (value, name) {
xhr.setRequestHeader(name, value);
@@ -432,15 +429,15 @@ app.factory('$fileUploader', [ '$compile', '$rootScope', '$http', '$window', fun

input.prop('name', item.alias);

angular.forEach(item.formData, function(obj) {
item.formData.forEach(function(obj) {
angular.forEach(obj, function(value, key) {
form.append(angular.element('<input type="hidden" name="' + key + '" value="' + value + '" />'));
});
});

form.prop({
action: item.url,
method: item.requestMethod,
method: item.method,
target: iframe.prop('name'),
enctype: 'multipart/form-data',
encoding: 'multipart/form-data' // old IE
@@ -472,7 +469,7 @@ app.factory('$fileUploader', [ '$compile', '$rootScope', '$http', '$window', fun
* @returns {*}
*/
_transformResponse: function (response) {
angular.forEach($http.defaults.transformResponse, function (transformFn) {
$http.defaults.transformResponse.forEach(function (transformFn) {
response = transformFn(response);
});
return response;
Loading

0 comments on commit 55609ba

Please sign in to comment.