Angular File Upload upload all in one request - angularjs

Question

I use this plugin https://github.com/nervgh/angular-file-upload to use multiple file upload in my project.
However, I know that in jQuery File upload plugin you can choose to upload all files in one query, or not.
Is it possible to do this with this plugin ? I found nothing in their docs, and I took a look to the code, it seems not native option.

Answer 1

It is not possible using options or default behaviour, I have edited the file and function uploadAll() :
/**
* Uploads all not uploaded items of queue
*/
FileUploader.prototype.uploadAll = function() {
var items = this.getNotUploadedItems().filter(function(item) {
return !item.isUploading;
});
if (!items.length) return;
var that = this;
angular.forEach(items, function(item) {
item._prepareToUploading();
});
if (this.isHTML5) {
//FILL FormData WITH FILE DETAILS.
var data = new FormData();
var first = true;
angular.forEach(items, function(item) {
console.log(item);
data.append("files", item._file, item.file.name);
// get formData
that._onBeforeUploadItem(item);
// add formData
if (first) {
angular.forEach(item.formData, function(obj) {
angular.forEach(obj, function(value, key) {
data.append(key, value);
});
});
first = false;
}
});
// ADD LISTENERS.
var objXhr = new XMLHttpRequest();
objXhr.addEventListener('load', this.onCompleteAll, false);
objXhr.upload.onprogress = function(event) {
var progress = Math.round(event.lengthComputable ? event.loaded * 100 / event.total : 0);
angular.forEach(items, function(item) {
item._onProgress(progress);
});
};
objXhr.onerror = function() {
var headers = that._parseHeaders(objXhr.getAllResponseHeaders());
var response = that._transformResponse(objXhr.response, headers);
angular.forEach(items, function(item) {
that._onErrorItem(item, response, objXhr.status, headers);
that._onCompleteItem(item, response, objXhr.status, headers);
});
};
objXhr.open("POST", this.url);
angular.forEach(this.headers, function(value, name) {
objXhr.setRequestHeader(name, value);
});
// SEND FILE DETAILS TO THE API.
objXhr.send(data);
} else {
items[0].upload();
}
};

Answer 2

I made a new function UploadAllAtOnce() & is working for me. Thanks to #Vincent Decaux. I've modified some code as below -
FileUploader.prototype.uploadAllAtOnce = function uploadAllAtOnce() {
var items = this.getNotUploadedItems().filter(item => !item.isUploading);
if (!items.length) return;
forEach(items, item => item._prepareToUploading());
var that = this;
forEach(items, function (item) {
return item._prepareToUploading();
});
if (this.isHTML5) {
var sendable = new FormData();
var first = true;
forEach(items, (item) => {
sendable.append(item.alias, item._file, item.file.name);
// get formData
that._onBeforeUploadItem(item);
// add formData
if (first) {
angular.forEach(item.formData, function (obj) {
angular.forEach(obj, function (value, key) {
sendable.append(key, value);
});
});
first = false;
}
});
// ADD LISTENERS.
var xhr = new XMLHttpRequest();
xhr.addEventListener('load', this.onCompleteAll, false);
xhr.upload.onprogress = (event) => {
var progress = Math.round(event.lengthComputable ? event.loaded * 100 / event.total : 0);
angular.forEach(items, function (item) {
item._onProgress(progress);
});
};
xhr.onerror = () => {
var headers = this._parseHeaders(xhr.getAllResponseHeaders());
var response = this._transformResponse(xhr.response, headers);
angular.forEach(items, function (item) {
that._onErrorItem(item, response, xhr.status, headers);
that._onCompleteItem(item, response, xhr.status, headers);
});
};
xhr.onload = () => {
var headers = this._parseHeaders(xhr.getAllResponseHeaders());
var response = this._transformResponse(xhr.response, headers);
angular.forEach(items, function (item) {
var gist = that._isSuccessCode(xhr.status) ? 'Success' : 'Error';
var method = '_on' + gist + 'Item';
that[method](item, response, xhr.status, headers);
// that._onCompleteItem(item, response, xhr.status, headers);
});
};
xhr.onabort = () => {
var headers = this._parseHeaders(xhr.getAllResponseHeaders());
var response = this._transformResponse(xhr.response, headers);
angular.forEach(items, function (item) {
his._onCancelItem(item, response, xhr.status, headers);
this._onCompleteItem(item, response, xhr.status, headers);
});
};
xhr.open("POST", this.url, true);
forEach(this.headers, (value, name) => {
xhr.setRequestHeader(name, value);
});
xhr.send(sendable);
} else {
items[0].upload();
}
};