ng-uploader
Version:
## ng-uploader [](https://github.com/mgechev/angular2-style-guide)
226 lines • 8.29 kB
JavaScript
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
import { Response, ResponseOptions } from "@angular/http";
var NgUploader = (function () {
function NgUploader() {
this.queue = [];
this.tempQueue = [];
this.options = {
url: '',
headers: {},
params: {},
convertToJson: false
};
this.uploadSource = new Subject();
this.progressSource = new Subject();
}
NgUploader.prototype.addFile = function (file, options) {
this.queue.push({
file: file,
options: this.setFileOptions(options)
});
this.configurePrototypes();
this.extractDataURLs();
};
NgUploader.prototype.addFiles = function (files, options) {
for (var i = 0; i < files.length; i++) {
this.queue.push({
file: files[i],
options: this.setFileOptions(options)
});
}
this.configurePrototypes();
this.extractDataURLs();
};
NgUploader.prototype.clearQueue = function () {
this.cancelUpload();
this.currentUpload = undefined;
this.queue = [];
};
NgUploader.prototype.removeFile = function (index) {
if (this.currentUpload === index) {
this.cancelUpload();
}
if (this.queue[index])
this.queue.splice(index, 1);
if (this.currentUpload >= 0 && this.allUploadFlag) {
this.uploadAll();
}
this.configurePrototypes();
};
NgUploader.prototype.setOptions = function (options) {
this.options = options;
};
NgUploader.prototype.uploadAll = function () {
if (this.queue.length > 0) {
this.allUploadFlag = true;
this.uploadQueue(0, true);
}
};
NgUploader.prototype.uploadOne = function (index) {
if (this.queue[index]) {
this.uploadQueue(index, false, false);
}
};
NgUploader.prototype.onProgress = function () {
return this.progressSource.asObservable();
};
NgUploader.prototype.uploadFile = function (file, options) {
this.tempQueue = this.queue;
this.queue = [];
this.queue.push({
file: file,
options: this.setFileOptions(options)
});
this.uploadQueue(0, false, true);
};
NgUploader.prototype.notifier = function () {
return this.uploadSource.asObservable();
};
NgUploader.prototype.uploadQueue = function (index, allFlag, resetQ) {
var _this = this;
var vm = this;
if (vm.queue[index]) {
if (vm.queue[index].isUploading) {
return null;
}
if (vm.queue[index].status >= 0) {
vm.uploadQueue(index + 1, allFlag, resetQ);
return;
}
var formData = new FormData();
this.xhr = new XMLHttpRequest();
this.xhr.open(vm.queue[index].options.type || 'POST', vm.queue[index].options.url, true);
formData.append('file', vm.queue[index].file, vm.queue[index].file.name);
for (var key in vm.queue[index].options.params) {
if (vm.queue[index].options.params[key]) {
formData.append(key, vm.queue[index].options.params[key]);
}
}
for (var key in vm.queue[index].options.headers) {
if (vm.queue[index].options.headers[key]) {
this.xhr.setRequestHeader(key, vm.queue[index].options.headers[key]);
}
}
this.xhr.onreadystatechange = function () {
if (_this.xhr.readyState === 4) {
if (!vm.queue[index])
return;
if (_this.xhr.status === 0) {
if ((allFlag) && (vm.queue[index + 1])) {
vm.uploadAll();
}
else {
_this.uploadSource.next({
filename: vm.queue[index].file.name,
response: {},
data: vm.queue[index].data,
isAllUploaded: true
});
}
return;
}
var response = _this.getParsedResponse(vm.queue[index].options.convertToJson);
_this.currentUpload = undefined;
_this.uploadSource.next({
index: index,
filename: vm.queue[index].file.name,
status: _this.xhr.status,
response: response,
data: vm.queue[index].data,
isAllUploaded: vm.queue[index + 1] ? false : true
});
_this.clearInterveller();
if (resetQ) {
vm.queue = vm.tempQueue;
vm.tempQueue = [];
}
if (vm.queue[index]) {
vm.queue[index].response = response;
vm.queue[index].status = 1;
vm.queue[index].isUploading = false;
if ((allFlag) && (vm.queue[index + 1])) {
vm.uploadQueue(index + 1, allFlag, resetQ);
}
}
}
};
this.xhr.upload.onprogress = function (event) {
if (vm.queue[index]) {
vm.queue[index].progress = Math.round(event.loaded / event.total * 100);
_this.progressSource.next({
index: index,
progress: vm.queue[index].progress,
data: vm.queue[index].data
});
}
};
if (vm.queue[index]) {
vm.queue[index].isUploading = true;
}
this.currentUpload = index;
vm.interveller();
this.xhr.send(formData);
}
};
NgUploader.prototype.cancelUpload = function () {
if (this.currentUpload >= 0) {
this.xhr.abort();
}
};
NgUploader.prototype.setFileOptions = function (options) {
var opt = this.options || options;
if (options) {
return options;
}
else {
return this.options;
}
};
NgUploader.prototype.configurePrototypes = function () {
var vm = this;
(this.queue || []).forEach(function (q, i) {
q.remove = function () { vm.removeFile(i); };
q.start = function () { vm.uploadOne(i); };
});
};
NgUploader.prototype.extractDataURLs = function () {
var validExts = ['jpg', 'jpeg', 'svg', 'png'];
(this.queue || []).forEach(function (q, i) {
var name = q.file.name.split('.');
if (validExts.indexOf(name[name.length - 1]) >= 0) {
var reader_1 = new FileReader();
reader_1.addEventListener('load', function () {
q.preview = reader_1.result;
});
reader_1.readAsDataURL(q.file);
}
});
};
NgUploader.prototype.getParsedResponse = function (convertToJson) {
if (convertToJson) {
var res = new Response(new ResponseOptions({
body: this.xhr.response,
status: this.xhr.status
}));
return res.json();
}
else {
return this.xhr.response;
}
};
NgUploader.prototype.interveller = function () {
this._interveller = setInterval(function () { }, 10);
};
NgUploader.prototype.clearInterveller = function () {
clearInterval(this._interveller);
};
return NgUploader;
}());
export { NgUploader };
NgUploader.decorators = [
{ type: Injectable },
];
/** @nocollapse */
NgUploader.ctorParameters = function () { return []; };
//# sourceMappingURL=ng-uploader.js.map