feat(package): upgrade to ng v2.3+ (#574)
This commit was merged in pull request #574.
This commit is contained in:
Dmitriy Shekhovtsov
committed by
GitHub
GitHub
parent
f5b5dc3bd2
commit
3cc6a9946f
95
src/file-upload/file-drop.directive.ts
Normal file
95
src/file-upload/file-drop.directive.ts
Normal file
@@ -0,0 +1,95 @@
|
||||
import { Directive, EventEmitter, ElementRef, HostListener, Input, Output } from '@angular/core';
|
||||
|
||||
import { FileUploader } from './file-uploader.class';
|
||||
|
||||
@Directive({selector: '[ng2FileDrop]'})
|
||||
export class FileDropDirective {
|
||||
@Input() public uploader:FileUploader;
|
||||
@Output() public fileOver:EventEmitter<any> = new EventEmitter();
|
||||
@Output() public onFileDrop:EventEmitter<File[]> = new EventEmitter<File[]>();
|
||||
|
||||
protected element:ElementRef;
|
||||
|
||||
public constructor(element:ElementRef) {
|
||||
this.element = element;
|
||||
}
|
||||
|
||||
public getOptions():any {
|
||||
return this.uploader.options;
|
||||
}
|
||||
|
||||
public getFilters():any {
|
||||
return {};
|
||||
}
|
||||
|
||||
@HostListener('drop', ['$event'])
|
||||
public onDrop(event:any):void {
|
||||
let transfer = this._getTransfer(event);
|
||||
if (!transfer) {
|
||||
return;
|
||||
}
|
||||
|
||||
let options = this.getOptions();
|
||||
let filters = this.getFilters();
|
||||
this._preventAndStop(event);
|
||||
this.uploader.addToQueue(transfer.files, options, filters);
|
||||
this.fileOver.emit(false);
|
||||
this.onFileDrop.emit(transfer.files);
|
||||
}
|
||||
|
||||
@HostListener('dragover', ['$event'])
|
||||
public onDragOver(event:any):void {
|
||||
let transfer = this._getTransfer(event);
|
||||
if (!this._haveFiles(transfer.types)) {
|
||||
return;
|
||||
}
|
||||
|
||||
transfer.dropEffect = 'copy';
|
||||
this._preventAndStop(event);
|
||||
this.fileOver.emit(true);
|
||||
}
|
||||
|
||||
@HostListener('dragleave', ['$event'])
|
||||
public onDragLeave(event:any):any {
|
||||
if ((this as any).element) {
|
||||
if (event.currentTarget === (this as any).element[0]) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
this._preventAndStop(event);
|
||||
this.fileOver.emit(false);
|
||||
}
|
||||
|
||||
protected _getTransfer(event:any):any {
|
||||
return event.dataTransfer ? event.dataTransfer : event.originalEvent.dataTransfer; // jQuery fix;
|
||||
}
|
||||
|
||||
protected _preventAndStop(event:any):any {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
protected _haveFiles(types:any):any {
|
||||
if (!types) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (types.indexOf) {
|
||||
return types.indexOf('Files') !== -1;
|
||||
} else if (types.contains) {
|
||||
return types.contains('Files');
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
_addOverClass(item:any):any {
|
||||
item.addOverClass();
|
||||
}
|
||||
|
||||
_removeOverClass(item:any):any {
|
||||
item.removeOverClass();
|
||||
}*/
|
||||
}
|
||||
154
src/file-upload/file-item.class.ts
Normal file
154
src/file-upload/file-item.class.ts
Normal file
@@ -0,0 +1,154 @@
|
||||
import { FileLikeObject } from './file-like-object.class';
|
||||
import { FileUploader, ParsedResponseHeaders, FileUploaderOptions } from './file-uploader.class';
|
||||
|
||||
export class FileItem {
|
||||
public file:FileLikeObject;
|
||||
public _file:File;
|
||||
public alias:string;
|
||||
public url:string = '/';
|
||||
public method:string;
|
||||
public headers:any = [];
|
||||
public withCredentials:boolean = true;
|
||||
public formData:any = [];
|
||||
public isReady:boolean = false;
|
||||
public isUploading:boolean = false;
|
||||
public isUploaded:boolean = false;
|
||||
public isSuccess:boolean = false;
|
||||
public isCancel:boolean = false;
|
||||
public isError:boolean = false;
|
||||
public progress:number = 0;
|
||||
public index:number = void 0;
|
||||
public _xhr:XMLHttpRequest;
|
||||
public _form:any;
|
||||
|
||||
protected uploader:FileUploader;
|
||||
protected some:File;
|
||||
protected options:FileUploaderOptions;
|
||||
|
||||
public constructor(uploader:FileUploader, some:File, options:FileUploaderOptions) {
|
||||
this.uploader = uploader;
|
||||
this.some = some;
|
||||
this.options = options;
|
||||
this.file = new FileLikeObject(some);
|
||||
this._file = some;
|
||||
if (uploader.options) {
|
||||
this.method = uploader.options.method || 'POST';
|
||||
this.alias = uploader.options.itemAlias || 'file';
|
||||
}
|
||||
this.url = uploader.options.url;
|
||||
}
|
||||
|
||||
public upload():void {
|
||||
try {
|
||||
this.uploader.uploadItem(this);
|
||||
} catch (e) {
|
||||
this.uploader._onCompleteItem(this, '', 0, {});
|
||||
this.uploader._onErrorItem(this, '', 0, {});
|
||||
}
|
||||
}
|
||||
|
||||
public cancel():void {
|
||||
this.uploader.cancelItem(this);
|
||||
}
|
||||
|
||||
public remove():void {
|
||||
this.uploader.removeFromQueue(this);
|
||||
}
|
||||
|
||||
public onBeforeUpload():void {
|
||||
return void 0;
|
||||
}
|
||||
|
||||
public onBuildForm(form:any):any {
|
||||
return {form};
|
||||
}
|
||||
|
||||
public onProgress(progress:number):any {
|
||||
return {progress};
|
||||
}
|
||||
|
||||
public onSuccess(response:string, status:number, headers:ParsedResponseHeaders):any {
|
||||
return {response, status, headers};
|
||||
}
|
||||
|
||||
public onError(response:string, status:number, headers:ParsedResponseHeaders):any {
|
||||
return {response, status, headers};
|
||||
}
|
||||
|
||||
public onCancel(response:string, status:number, headers:ParsedResponseHeaders):any {
|
||||
return {response, status, headers};
|
||||
}
|
||||
|
||||
public onComplete(response:string, status:number, headers:ParsedResponseHeaders):any {
|
||||
return {response, status, headers};
|
||||
}
|
||||
|
||||
public _onBeforeUpload():void {
|
||||
this.isReady = true;
|
||||
this.isUploading = true;
|
||||
this.isUploaded = false;
|
||||
this.isSuccess = false;
|
||||
this.isCancel = false;
|
||||
this.isError = false;
|
||||
this.progress = 0;
|
||||
this.onBeforeUpload();
|
||||
}
|
||||
|
||||
public _onBuildForm(form:any):void {
|
||||
this.onBuildForm(form);
|
||||
}
|
||||
|
||||
public _onProgress(progress:number):void {
|
||||
this.progress = progress;
|
||||
this.onProgress(progress);
|
||||
}
|
||||
|
||||
public _onSuccess(response:string, status:number, headers:ParsedResponseHeaders):void {
|
||||
this.isReady = false;
|
||||
this.isUploading = false;
|
||||
this.isUploaded = true;
|
||||
this.isSuccess = true;
|
||||
this.isCancel = false;
|
||||
this.isError = false;
|
||||
this.progress = 100;
|
||||
this.index = void 0;
|
||||
this.onSuccess(response, status, headers);
|
||||
}
|
||||
|
||||
public _onError(response:string, status:number, headers:ParsedResponseHeaders):void {
|
||||
this.isReady = false;
|
||||
this.isUploading = false;
|
||||
this.isUploaded = true;
|
||||
this.isSuccess = false;
|
||||
this.isCancel = false;
|
||||
this.isError = true;
|
||||
this.progress = 0;
|
||||
this.index = void 0;
|
||||
this.onError(response, status, headers);
|
||||
}
|
||||
|
||||
public _onCancel(response:string, status:number, headers:ParsedResponseHeaders):void {
|
||||
this.isReady = false;
|
||||
this.isUploading = false;
|
||||
this.isUploaded = false;
|
||||
this.isSuccess = false;
|
||||
this.isCancel = true;
|
||||
this.isError = false;
|
||||
this.progress = 0;
|
||||
this.index = void 0;
|
||||
this.onCancel(response, status, headers);
|
||||
}
|
||||
|
||||
public _onComplete(response:string, status:number, headers:ParsedResponseHeaders):void {
|
||||
this.onComplete(response, status, headers);
|
||||
|
||||
if (this.uploader.options.removeAfterUpload) {
|
||||
this.remove();
|
||||
}
|
||||
}
|
||||
|
||||
public _prepareToUploading():void {
|
||||
this.index = this.index || ++this.uploader._nextIndex;
|
||||
this.isReady = true;
|
||||
}
|
||||
}
|
||||
32
src/file-upload/file-like-object.class.ts
Normal file
32
src/file-upload/file-like-object.class.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
function isElement(node:any):boolean {
|
||||
return !!(node && (node.nodeName || node.prop && node.attr && node.find));
|
||||
}
|
||||
|
||||
export class FileLikeObject {
|
||||
public lastModifiedDate:any;
|
||||
public size:any;
|
||||
public type:string;
|
||||
public name:string;
|
||||
|
||||
public constructor(fileOrInput:any) {
|
||||
let isInput = isElement(fileOrInput);
|
||||
let fakePathOrObject = isInput ? fileOrInput.value : fileOrInput;
|
||||
let postfix = typeof fakePathOrObject === 'string' ? 'FakePath' : 'Object';
|
||||
let method = '_createFrom' + postfix;
|
||||
(this as any)[method](fakePathOrObject);
|
||||
}
|
||||
|
||||
public _createFromFakePath(path:string):void {
|
||||
this.lastModifiedDate = void 0;
|
||||
this.size = void 0;
|
||||
this.type = 'like/' + path.slice(path.lastIndexOf('.') + 1).toLowerCase();
|
||||
this.name = path.slice(path.lastIndexOf('/') + path.lastIndexOf('\\') + 2);
|
||||
}
|
||||
|
||||
public _createFromObject(object:{size:number, type:string, name:string}):void {
|
||||
// this.lastModifiedDate = copy(object.lastModifiedDate);
|
||||
this.size = object.size;
|
||||
this.type = object.type;
|
||||
this.name = object.name;
|
||||
}
|
||||
}
|
||||
46
src/file-upload/file-select.directive.ts
Normal file
46
src/file-upload/file-select.directive.ts
Normal file
@@ -0,0 +1,46 @@
|
||||
import { Directive, ElementRef, Input, HostListener } from '@angular/core';
|
||||
|
||||
import { FileUploader } from './file-uploader.class';
|
||||
|
||||
// todo: filters
|
||||
|
||||
@Directive({selector: '[ng2FileSelect]'})
|
||||
export class FileSelectDirective {
|
||||
@Input() public uploader:FileUploader;
|
||||
|
||||
protected element:ElementRef;
|
||||
|
||||
public constructor(element:ElementRef) {
|
||||
this.element = element;
|
||||
}
|
||||
|
||||
public getOptions():any {
|
||||
return this.uploader.options;
|
||||
}
|
||||
|
||||
public getFilters():any {
|
||||
return void 0;
|
||||
}
|
||||
|
||||
public isEmptyAfterSelection():boolean {
|
||||
return !!this.element.nativeElement.attributes.multiple;
|
||||
}
|
||||
|
||||
@HostListener('change')
|
||||
public onChange():any {
|
||||
// let files = this.uploader.isHTML5 ? this.element.nativeElement[0].files : this.element.nativeElement[0];
|
||||
let files = this.element.nativeElement.files;
|
||||
let options = this.getOptions();
|
||||
let filters = this.getFilters();
|
||||
|
||||
// if(!this.uploader.isHTML5) this.destroy();
|
||||
|
||||
this.uploader.addToQueue(files, options, filters);
|
||||
if (this.isEmptyAfterSelection()) {
|
||||
// todo
|
||||
this.element.nativeElement.value = '';
|
||||
/*this.element.nativeElement
|
||||
.replaceWith(this.element = this.element.nativeElement.clone(true)); // IE fix*/
|
||||
}
|
||||
}
|
||||
}
|
||||
154
src/file-upload/file-type.class.ts
Normal file
154
src/file-upload/file-type.class.ts
Normal file
@@ -0,0 +1,154 @@
|
||||
export class FileType {
|
||||
/* MS office */
|
||||
public static mime_doc:string[] = [
|
||||
'application/msword',
|
||||
'application/msword',
|
||||
'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
|
||||
'application/vnd.openxmlformats-officedocument.wordprocessingml.template',
|
||||
'application/vnd.ms-word.document.macroEnabled.12',
|
||||
'application/vnd.ms-word.template.macroEnabled.12'
|
||||
];
|
||||
public static mime_xsl:string[] = [
|
||||
'application/vnd.ms-excel',
|
||||
'application/vnd.ms-excel',
|
||||
'application/vnd.ms-excel',
|
||||
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
|
||||
'application/vnd.openxmlformats-officedocument.spreadsheetml.template',
|
||||
'application/vnd.ms-excel.sheet.macroEnabled.12',
|
||||
'application/vnd.ms-excel.template.macroEnabled.12',
|
||||
'application/vnd.ms-excel.addin.macroEnabled.12',
|
||||
'application/vnd.ms-excel.sheet.binary.macroEnabled.12'
|
||||
];
|
||||
public static mime_ppt:string[] = [
|
||||
'application/vnd.ms-powerpoint',
|
||||
'application/vnd.ms-powerpoint',
|
||||
'application/vnd.ms-powerpoint',
|
||||
'application/vnd.ms-powerpoint',
|
||||
'application/vnd.openxmlformats-officedocument.presentationml.presentation',
|
||||
'application/vnd.openxmlformats-officedocument.presentationml.template',
|
||||
'application/vnd.openxmlformats-officedocument.presentationml.slideshow',
|
||||
'application/vnd.ms-powerpoint.addin.macroEnabled.12',
|
||||
'application/vnd.ms-powerpoint.presentation.macroEnabled.12',
|
||||
'application/vnd.ms-powerpoint.presentation.macroEnabled.12',
|
||||
'application/vnd.ms-powerpoint.slideshow.macroEnabled.12'
|
||||
];
|
||||
|
||||
/* PSD */
|
||||
public static mime_psd:string[] = [
|
||||
'image/photoshop',
|
||||
'image/x-photoshop',
|
||||
'image/psd',
|
||||
'application/photoshop',
|
||||
'application/psd',
|
||||
'zz-application/zz-winassoc-psd'
|
||||
];
|
||||
|
||||
/* Compressed files */
|
||||
public static mime_compress:string[] = [
|
||||
'application/x-gtar',
|
||||
'application/x-gcompress',
|
||||
'application/compress',
|
||||
'application/x-tar',
|
||||
'application/x-rar-compressed',
|
||||
'application/octet-stream'
|
||||
];
|
||||
|
||||
public static getMimeClass(file:any):string {
|
||||
let mimeClass = 'application';
|
||||
if (this.mime_psd.indexOf(file.type) !== -1) {
|
||||
mimeClass = 'image';
|
||||
} else if (file.type.match('image.*')) {
|
||||
mimeClass = 'image';
|
||||
} else if (file.type.match('video.*')) {
|
||||
mimeClass = 'video';
|
||||
} else if (file.type.match('audio.*')) {
|
||||
mimeClass = 'audio';
|
||||
} else if (file.type === 'application/pdf') {
|
||||
mimeClass = 'pdf';
|
||||
} else if (this.mime_compress.indexOf(file.type) !== -1) {
|
||||
mimeClass = 'compress';
|
||||
} else if (this.mime_doc.indexOf(file.type) !== -1) {
|
||||
mimeClass = 'doc';
|
||||
} else if (this.mime_xsl.indexOf(file.type) !== -1) {
|
||||
mimeClass = 'xls';
|
||||
} else if (this.mime_ppt.indexOf(file.type) !== -1) {
|
||||
mimeClass = 'ppt';
|
||||
}
|
||||
if (mimeClass === 'application') {
|
||||
mimeClass = this.fileTypeDetection(file.name);
|
||||
}
|
||||
|
||||
return mimeClass;
|
||||
}
|
||||
|
||||
public static fileTypeDetection(inputFilename:string):string {
|
||||
let types:{[key:string]:string} = {
|
||||
'jpg': 'image',
|
||||
'jpeg': 'image',
|
||||
'tif': 'image',
|
||||
'psd': 'image',
|
||||
'bmp': 'image',
|
||||
'png': 'image',
|
||||
'nef': 'image',
|
||||
'tiff': 'image',
|
||||
'cr2': 'image',
|
||||
'dwg': 'image',
|
||||
'cdr': 'image',
|
||||
'ai': 'image',
|
||||
'indd': 'image',
|
||||
'pin': 'image',
|
||||
'cdp': 'image',
|
||||
'skp': 'image',
|
||||
'stp': 'image',
|
||||
'3dm': 'image',
|
||||
'mp3': 'audio',
|
||||
'wav': 'audio',
|
||||
'wma': 'audio',
|
||||
'mod': 'audio',
|
||||
'm4a': 'audio',
|
||||
'compress': 'compress',
|
||||
'rar': 'compress',
|
||||
'7z': 'compress',
|
||||
'lz': 'compress',
|
||||
'z01': 'compress',
|
||||
'pdf': 'pdf',
|
||||
'xls': 'xls',
|
||||
'xlsx': 'xls',
|
||||
'ods': 'xls',
|
||||
'mp4': 'video',
|
||||
'avi': 'video',
|
||||
'wmv': 'video',
|
||||
'mpg': 'video',
|
||||
'mts': 'video',
|
||||
'flv': 'video',
|
||||
'3gp': 'video',
|
||||
'vob': 'video',
|
||||
'm4v': 'video',
|
||||
'mpeg': 'video',
|
||||
'm2ts': 'video',
|
||||
'mov': 'video',
|
||||
'doc': 'doc',
|
||||
'docx': 'doc',
|
||||
'eps': 'doc',
|
||||
'txt': 'doc',
|
||||
'odt': 'doc',
|
||||
'rtf': 'doc',
|
||||
'ppt': 'ppt',
|
||||
'pptx': 'ppt',
|
||||
'pps': 'ppt',
|
||||
'ppsx': 'ppt',
|
||||
'odp': 'ppt'
|
||||
};
|
||||
|
||||
let chunks = inputFilename.split('.');
|
||||
if (chunks.length < 2) {
|
||||
return 'application';
|
||||
}
|
||||
let extension = chunks[chunks.length - 1].toLowerCase();
|
||||
if (types[extension] === undefined) {
|
||||
return 'application';
|
||||
} else {
|
||||
return types[extension];
|
||||
}
|
||||
}
|
||||
}
|
||||
13
src/file-upload/file-upload.module.ts
Normal file
13
src/file-upload/file-upload.module.ts
Normal file
@@ -0,0 +1,13 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { NgModule } from '@angular/core';
|
||||
|
||||
import { FileDropDirective } from './file-drop.directive';
|
||||
import { FileSelectDirective } from './file-select.directive';
|
||||
|
||||
@NgModule({
|
||||
imports: [CommonModule],
|
||||
declarations: [FileDropDirective, FileSelectDirective],
|
||||
exports: [FileDropDirective, FileSelectDirective]
|
||||
})
|
||||
export class FileUploadModule {
|
||||
}
|
||||
491
src/file-upload/file-uploader.class.ts
Normal file
491
src/file-upload/file-uploader.class.ts
Normal file
@@ -0,0 +1,491 @@
|
||||
import { FileLikeObject } from './file-like-object.class';
|
||||
import { FileItem } from './file-item.class';
|
||||
import { FileType } from './file-type.class';
|
||||
|
||||
function isFile(value:any):boolean {
|
||||
return (File && value instanceof File);
|
||||
}
|
||||
// function isFileLikeObject(value:any) {
|
||||
export interface Headers {
|
||||
name:string;
|
||||
value:string;
|
||||
}
|
||||
|
||||
export type ParsedResponseHeaders = {[headerFieldName:string]:string};
|
||||
|
||||
export type FilterFunction = {name:string, fn:(item?:FileLikeObject, options?:FileUploaderOptions)=>boolean};
|
||||
|
||||
export interface FileUploaderOptions {
|
||||
allowedMimeType?:Array<string>;
|
||||
allowedFileType?:Array<string>;
|
||||
autoUpload?:boolean;
|
||||
isHTML5?:boolean;
|
||||
filters?:Array<FilterFunction>;
|
||||
headers?:Array<Headers>;
|
||||
method?:string;
|
||||
authToken?:string;
|
||||
maxFileSize?:number;
|
||||
queueLimit?:number;
|
||||
removeAfterUpload?:boolean;
|
||||
url?:string;
|
||||
disableMultipart?:boolean;
|
||||
itemAlias?: string;
|
||||
authTokenHeader?: string;
|
||||
additionalParameter?:{[key: string]: any};
|
||||
}
|
||||
|
||||
export class FileUploader {
|
||||
|
||||
public authToken:string;
|
||||
public isUploading:boolean = false;
|
||||
public queue:Array<FileItem> = [];
|
||||
public progress:number = 0;
|
||||
public _nextIndex:number = 0;
|
||||
public autoUpload:any;
|
||||
public authTokenHeader: string;
|
||||
|
||||
public options:FileUploaderOptions = {
|
||||
autoUpload: false,
|
||||
isHTML5: true,
|
||||
filters: [],
|
||||
removeAfterUpload: false,
|
||||
disableMultipart: false
|
||||
};
|
||||
|
||||
protected _failFilterIndex:number;
|
||||
|
||||
public constructor(options:FileUploaderOptions) {
|
||||
this.setOptions(options);
|
||||
}
|
||||
|
||||
public setOptions(options:FileUploaderOptions):void {
|
||||
this.options = Object.assign(this.options, options);
|
||||
|
||||
this.authToken = options.authToken;
|
||||
this.authTokenHeader = options.authTokenHeader || 'Authorization';
|
||||
this.autoUpload = options.autoUpload;
|
||||
this.options.filters.unshift({name: 'queueLimit', fn: this._queueLimitFilter});
|
||||
|
||||
if (this.options.maxFileSize) {
|
||||
this.options.filters.unshift({name: 'fileSize', fn: this._fileSizeFilter});
|
||||
}
|
||||
|
||||
if (this.options.allowedFileType) {
|
||||
this.options.filters.unshift({name: 'fileType', fn: this._fileTypeFilter});
|
||||
}
|
||||
|
||||
if (this.options.allowedMimeType) {
|
||||
this.options.filters.unshift({name: 'mimeType', fn: this._mimeTypeFilter});
|
||||
}
|
||||
|
||||
for(let i = 0; i < this.queue.length; i++) {
|
||||
this.queue[i].url = this.options.url;
|
||||
}
|
||||
// this.options.filters.unshift({name: 'folder', fn: this._folderFilter});
|
||||
}
|
||||
|
||||
public addToQueue(files:File[], options?:FileUploaderOptions, filters?:FilterFunction[]|string):void {
|
||||
let list:File[] = [];
|
||||
for (let file of files) {
|
||||
list.push(file);
|
||||
}
|
||||
let arrayOfFilters = this._getFilters(filters);
|
||||
let count = this.queue.length;
|
||||
let addedFileItems:FileItem[] = [];
|
||||
list.map((some:File) => {
|
||||
if (!options) {
|
||||
options = this.options;
|
||||
}
|
||||
|
||||
let temp = new FileLikeObject(some);
|
||||
if (this._isValidFile(temp, arrayOfFilters, options)) {
|
||||
let fileItem = new FileItem(this, some, options);
|
||||
addedFileItems.push(fileItem);
|
||||
this.queue.push(fileItem);
|
||||
this._onAfterAddingFile(fileItem);
|
||||
} else {
|
||||
let filter = arrayOfFilters[this._failFilterIndex];
|
||||
this._onWhenAddingFileFailed(temp, filter, options);
|
||||
}
|
||||
});
|
||||
if (this.queue.length !== count) {
|
||||
this._onAfterAddingAll(addedFileItems);
|
||||
this.progress = this._getTotalProgress();
|
||||
}
|
||||
this._render();
|
||||
if (this.options.autoUpload) {
|
||||
this.uploadAll();
|
||||
}
|
||||
}
|
||||
|
||||
public removeFromQueue(value:FileItem):void {
|
||||
let index = this.getIndexOfItem(value);
|
||||
let item = this.queue[index];
|
||||
if (item.isUploading) {
|
||||
item.cancel();
|
||||
}
|
||||
this.queue.splice(index, 1);
|
||||
this.progress = this._getTotalProgress();
|
||||
}
|
||||
|
||||
public clearQueue():void {
|
||||
while (this.queue.length) {
|
||||
this.queue[0].remove();
|
||||
}
|
||||
this.progress = 0;
|
||||
}
|
||||
|
||||
public uploadItem(value:FileItem):void {
|
||||
let index = this.getIndexOfItem(value);
|
||||
let item = this.queue[index];
|
||||
let transport = this.options.isHTML5 ? '_xhrTransport' : '_iframeTransport';
|
||||
item._prepareToUploading();
|
||||
if (this.isUploading) {
|
||||
return;
|
||||
}
|
||||
this.isUploading = true;
|
||||
(this as any)[transport](item);
|
||||
}
|
||||
|
||||
public cancelItem(value:FileItem):void {
|
||||
let index = this.getIndexOfItem(value);
|
||||
let item = this.queue[index];
|
||||
let prop = this.options.isHTML5 ? item._xhr : item._form;
|
||||
if (item && item.isUploading) {
|
||||
prop.abort();
|
||||
}
|
||||
}
|
||||
|
||||
public uploadAll():void {
|
||||
let items = this.getNotUploadedItems().filter((item:FileItem) => !item.isUploading);
|
||||
if (!items.length) {
|
||||
return;
|
||||
}
|
||||
items.map((item:FileItem) => item._prepareToUploading());
|
||||
items[0].upload();
|
||||
}
|
||||
|
||||
public cancelAll():void {
|
||||
let items = this.getNotUploadedItems();
|
||||
items.map((item:FileItem) => item.cancel());
|
||||
}
|
||||
|
||||
public isFile(value:any):boolean {
|
||||
return isFile(value);
|
||||
}
|
||||
|
||||
public isFileLikeObject(value:any):boolean {
|
||||
return value instanceof FileLikeObject;
|
||||
}
|
||||
|
||||
public getIndexOfItem(value:any):number {
|
||||
return typeof value === 'number' ? value : this.queue.indexOf(value);
|
||||
}
|
||||
|
||||
public getNotUploadedItems():Array<any> {
|
||||
return this.queue.filter((item:FileItem) => !item.isUploaded);
|
||||
}
|
||||
|
||||
public getReadyItems():Array<any> {
|
||||
return this.queue
|
||||
.filter((item:FileItem) => (item.isReady && !item.isUploading))
|
||||
.sort((item1:any, item2:any) => item1.index - item2.index);
|
||||
}
|
||||
|
||||
public destroy():void {
|
||||
return void 0;
|
||||
/*forEach(this._directives, (key) => {
|
||||
forEach(this._directives[key], (object) => {
|
||||
object.destroy();
|
||||
});
|
||||
});*/
|
||||
}
|
||||
|
||||
public onAfterAddingAll(fileItems:any):any {
|
||||
return {fileItems};
|
||||
}
|
||||
|
||||
public onBuildItemForm(fileItem:FileItem, form:any):any {
|
||||
return {fileItem, form};
|
||||
}
|
||||
|
||||
public onAfterAddingFile(fileItem:FileItem):any {
|
||||
return {fileItem};
|
||||
}
|
||||
|
||||
public onWhenAddingFileFailed(item:FileLikeObject, filter:any, options:any):any {
|
||||
return {item, filter, options};
|
||||
}
|
||||
|
||||
public onBeforeUploadItem(fileItem:FileItem):any {
|
||||
return {fileItem};
|
||||
}
|
||||
|
||||
public onProgressItem(fileItem:FileItem, progress:any):any {
|
||||
return {fileItem, progress};
|
||||
}
|
||||
|
||||
public onProgressAll(progress:any):any {
|
||||
return {progress};
|
||||
}
|
||||
|
||||
public onSuccessItem(item:FileItem, response:string, status:number, headers:ParsedResponseHeaders):any {
|
||||
return {item, response, status, headers};
|
||||
}
|
||||
|
||||
public onErrorItem(item:FileItem, response:string, status:number, headers:ParsedResponseHeaders):any {
|
||||
return {item, response, status, headers};
|
||||
}
|
||||
|
||||
public onCancelItem(item:FileItem, response:string, status:number, headers:ParsedResponseHeaders):any {
|
||||
return {item, response, status, headers};
|
||||
}
|
||||
|
||||
public onCompleteItem(item:FileItem, response:string, status:number, headers:ParsedResponseHeaders):any {
|
||||
return {item, response, status, headers};
|
||||
}
|
||||
|
||||
public onCompleteAll():any {
|
||||
return void 0;
|
||||
}
|
||||
|
||||
public _mimeTypeFilter(item:FileLikeObject):boolean {
|
||||
return !(this.options.allowedMimeType && this.options.allowedMimeType.indexOf(item.type) === -1);
|
||||
}
|
||||
|
||||
public _fileSizeFilter(item:FileLikeObject):boolean {
|
||||
return !(this.options.maxFileSize && item.size > this.options.maxFileSize);
|
||||
}
|
||||
|
||||
public _fileTypeFilter(item:FileLikeObject):boolean {
|
||||
return !(this.options.allowedFileType &&
|
||||
this.options.allowedFileType.indexOf(FileType.getMimeClass(item)) === -1);
|
||||
}
|
||||
|
||||
public _onErrorItem(item:FileItem, response:string, status:number, headers:ParsedResponseHeaders):void {
|
||||
item._onError(response, status, headers);
|
||||
this.onErrorItem(item, response, status, headers);
|
||||
}
|
||||
|
||||
public _onCompleteItem(item:FileItem, response:string, status:number, headers:ParsedResponseHeaders):void {
|
||||
item._onComplete(response, status, headers);
|
||||
this.onCompleteItem(item, response, status, headers);
|
||||
let nextItem = this.getReadyItems()[0];
|
||||
this.isUploading = false;
|
||||
if (nextItem) {
|
||||
nextItem.upload();
|
||||
return;
|
||||
}
|
||||
this.onCompleteAll();
|
||||
this.progress = this._getTotalProgress();
|
||||
this._render();
|
||||
}
|
||||
|
||||
protected _headersGetter(parsedHeaders:ParsedResponseHeaders):any {
|
||||
return (name:any):any => {
|
||||
if (name) {
|
||||
return parsedHeaders[name.toLowerCase()] || void 0;
|
||||
}
|
||||
return parsedHeaders;
|
||||
};
|
||||
}
|
||||
|
||||
protected _xhrTransport(item:FileItem):any {
|
||||
let xhr = item._xhr = new XMLHttpRequest();
|
||||
let sendable:any;
|
||||
this._onBeforeUploadItem(item);
|
||||
// todo
|
||||
/*item.formData.map(obj => {
|
||||
obj.map((value, key) => {
|
||||
form.append(key, value);
|
||||
});
|
||||
});*/
|
||||
if (typeof item._file.size !== 'number') {
|
||||
throw new TypeError('The file specified is no longer valid');
|
||||
}
|
||||
if (!this.options.disableMultipart) {
|
||||
sendable = new FormData();
|
||||
this._onBuildItemForm(item, sendable);
|
||||
|
||||
sendable.append(item.alias, item._file, item.file.name);
|
||||
|
||||
if (this.options.additionalParameter !== undefined) {
|
||||
Object.keys(this.options.additionalParameter).forEach((key:string) => {
|
||||
sendable.append(key, this.options.additionalParameter[key]);
|
||||
});
|
||||
}
|
||||
} else {
|
||||
sendable = item._file;
|
||||
}
|
||||
|
||||
xhr.upload.onprogress = (event:any) => {
|
||||
let progress = Math.round(event.lengthComputable ? event.loaded * 100 / event.total : 0);
|
||||
this._onProgressItem(item, progress);
|
||||
};
|
||||
xhr.onload = () => {
|
||||
let headers = this._parseHeaders(xhr.getAllResponseHeaders());
|
||||
let response = this._transformResponse(xhr.response, headers);
|
||||
let gist = this._isSuccessCode(xhr.status) ? 'Success' : 'Error';
|
||||
let method = '_on' + gist + 'Item';
|
||||
(this as any)[method](item, response, xhr.status, headers);
|
||||
this._onCompleteItem(item, response, xhr.status, headers);
|
||||
};
|
||||
xhr.onerror = () => {
|
||||
let headers = this._parseHeaders(xhr.getAllResponseHeaders());
|
||||
let response = this._transformResponse(xhr.response, headers);
|
||||
this._onErrorItem(item, response, xhr.status, headers);
|
||||
this._onCompleteItem(item, response, xhr.status, headers);
|
||||
};
|
||||
xhr.onabort = () => {
|
||||
let headers = this._parseHeaders(xhr.getAllResponseHeaders());
|
||||
let response = this._transformResponse(xhr.response, headers);
|
||||
this._onCancelItem(item, response, xhr.status, headers);
|
||||
this._onCompleteItem(item, response, xhr.status, headers);
|
||||
};
|
||||
xhr.open(item.method, item.url, true);
|
||||
xhr.withCredentials = item.withCredentials;
|
||||
if (this.options.headers) {
|
||||
for (let header of this.options.headers) {
|
||||
xhr.setRequestHeader(header.name, header.value);
|
||||
}
|
||||
}
|
||||
if (item.headers.length) {
|
||||
for (let header of item.headers) {
|
||||
xhr.setRequestHeader(header.name, header.value);
|
||||
}
|
||||
}
|
||||
if (this.authToken) {
|
||||
xhr.setRequestHeader(this.authTokenHeader, this.authToken);
|
||||
}
|
||||
xhr.send(sendable);
|
||||
this._render();
|
||||
}
|
||||
|
||||
protected _getTotalProgress(value:number = 0):number {
|
||||
if (this.options.removeAfterUpload) {
|
||||
return value;
|
||||
}
|
||||
let notUploaded = this.getNotUploadedItems().length;
|
||||
let uploaded = notUploaded ? this.queue.length - notUploaded : this.queue.length;
|
||||
let ratio = 100 / this.queue.length;
|
||||
let current = value * ratio / 100;
|
||||
return Math.round(uploaded * ratio + current);
|
||||
}
|
||||
|
||||
protected _getFilters(filters:FilterFunction[]|string):FilterFunction[] {
|
||||
if (!filters) {
|
||||
return this.options.filters;
|
||||
}
|
||||
if (Array.isArray(filters)) {
|
||||
return filters;
|
||||
}
|
||||
if (typeof filters === 'string') {
|
||||
let names = filters.match(/[^\s,]+/g);
|
||||
return this.options.filters
|
||||
.filter((filter:any) => names.indexOf(filter.name) !== -1);
|
||||
}
|
||||
return this.options.filters;
|
||||
}
|
||||
|
||||
protected _render():any {
|
||||
return void 0;
|
||||
// todo: ?
|
||||
}
|
||||
|
||||
// protected _folderFilter(item:FileItem):boolean {
|
||||
// return !!(item.size || item.type);
|
||||
// }
|
||||
|
||||
protected _queueLimitFilter():boolean {
|
||||
return this.options.queueLimit === undefined || this.queue.length < this.options.queueLimit;
|
||||
}
|
||||
|
||||
protected _isValidFile(file:FileLikeObject, filters:FilterFunction[], options:FileUploaderOptions):boolean {
|
||||
this._failFilterIndex = -1;
|
||||
return !filters.length ? true : filters.every((filter:FilterFunction) => {
|
||||
this._failFilterIndex++;
|
||||
return filter.fn.call(this, file, options);
|
||||
});
|
||||
}
|
||||
|
||||
protected _isSuccessCode(status:number):boolean {
|
||||
return (status >= 200 && status < 300) || status === 304;
|
||||
}
|
||||
|
||||
/* tslint:disable */
|
||||
protected _transformResponse(response:string, headers:ParsedResponseHeaders):string {
|
||||
// todo: ?
|
||||
/*var headersGetter = this._headersGetter(headers);
|
||||
forEach($http.defaults.transformResponse, (transformFn) => {
|
||||
response = transformFn(response, headersGetter);
|
||||
});*/
|
||||
return response;
|
||||
}
|
||||
|
||||
/* tslint:enable */
|
||||
protected _parseHeaders(headers:string):ParsedResponseHeaders {
|
||||
let parsed:any = {};
|
||||
let key:any;
|
||||
let val:any;
|
||||
let i:any;
|
||||
if (!headers) {
|
||||
return parsed;
|
||||
}
|
||||
headers.split('\n').map((line:any) => {
|
||||
i = line.indexOf(':');
|
||||
key = line.slice(0, i).trim().toLowerCase();
|
||||
val = line.slice(i + 1).trim();
|
||||
if (key) {
|
||||
parsed[key] = parsed[key] ? parsed[key] + ', ' + val : val;
|
||||
}
|
||||
});
|
||||
return parsed;
|
||||
}
|
||||
|
||||
/*protected _iframeTransport(item:FileItem) {
|
||||
// todo: implement it later
|
||||
}*/
|
||||
|
||||
protected _onWhenAddingFileFailed(item:FileLikeObject, filter:any, options:any):void {
|
||||
this.onWhenAddingFileFailed(item, filter, options);
|
||||
}
|
||||
|
||||
protected _onAfterAddingFile(item:FileItem):void {
|
||||
this.onAfterAddingFile(item);
|
||||
}
|
||||
|
||||
protected _onAfterAddingAll(items:any):void {
|
||||
this.onAfterAddingAll(items);
|
||||
}
|
||||
|
||||
protected _onBeforeUploadItem(item:FileItem):void {
|
||||
item._onBeforeUpload();
|
||||
this.onBeforeUploadItem(item);
|
||||
}
|
||||
|
||||
protected _onBuildItemForm(item:FileItem, form:any):void {
|
||||
item._onBuildForm(form);
|
||||
this.onBuildItemForm(item, form);
|
||||
}
|
||||
|
||||
protected _onProgressItem(item:FileItem, progress:any):void {
|
||||
let total = this._getTotalProgress(progress);
|
||||
this.progress = total;
|
||||
item._onProgress(progress);
|
||||
this.onProgressItem(item, progress);
|
||||
this.onProgressAll(total);
|
||||
this._render();
|
||||
}
|
||||
|
||||
/* tslint:disable */
|
||||
protected _onSuccessItem(item:FileItem, response:string, status:number, headers:ParsedResponseHeaders):void {
|
||||
item._onSuccess(response, status, headers);
|
||||
this.onSuccessItem(item, response, status, headers);
|
||||
}
|
||||
|
||||
/* tslint:enable */
|
||||
protected _onCancelItem(item:FileItem, response:string, status:number, headers:ParsedResponseHeaders):void {
|
||||
item._onCancel(response, status, headers);
|
||||
this.onCancelItem(item, response, status, headers);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user