- Implement of promise for filter function;

This commit is contained in:
dkhang97
2019-08-15 14:46:09 -07:00
parent fb48f4411d
commit 6226188df3
4 changed files with 16959 additions and 42 deletions

16897
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

View File

@@ -1,12 +1,14 @@
import { Directive, EventEmitter, ElementRef, HostListener, Input, Output } from '@angular/core'; import { Directive, ElementRef, EventEmitter, HostListener, Input, Output } from '@angular/core';
import { FileUploader, FileUploaderOptions } from './file-uploader.class'; import { FileUploader, FileUploaderOptions, FilterFunction } from './file-uploader.class';
@Directive({ selector: '[ng2FileDrop]' }) @Directive({ selector: '[ng2FileDrop]' })
export class FileDropDirective { export class FileDropDirective {
@Input() public uploader: FileUploader; @Input() public uploader: FileUploader;
// tslint:disable-next-line:no-input-rename
@Input('ng2FileFilter') public filter: FilterFunction['fn'];
@Output() public fileOver: EventEmitter<any> = new EventEmitter(); @Output() public fileOver: EventEmitter<any> = new EventEmitter();
@Output() public onFileDrop: EventEmitter<File[]> = new EventEmitter<File[]>(); @Output() public onFileDrop: EventEmitter<FileList> = new EventEmitter<FileList>();
protected element: ElementRef; protected element: ElementRef;
@@ -30,7 +32,10 @@ export class FileDropDirective {
} }
let options = this.getOptions(); let options = this.getOptions();
let filters = this.getFilters(); let filters = typeof this.filter === 'function' ? [{
name: 'ng2FileDropDirectiveFilter',
fn: this.filter
}, ...options.filters] : this.getFilters();
this._preventAndStop(event); this._preventAndStop(event);
this.uploader.addToQueue(transfer.files, options, filters); this.uploader.addToQueue(transfer.files, options, filters);
this.fileOver.emit(false); this.fileOver.emit(false);
@@ -61,11 +66,11 @@ export class FileDropDirective {
this.fileOver.emit(false); this.fileOver.emit(false);
} }
protected _getTransfer(event: any): any { protected _getTransfer(event: any): DragEvent['dataTransfer'] {
return event.dataTransfer ? event.dataTransfer : event.originalEvent.dataTransfer; // jQuery fix; return event.dataTransfer ? event.dataTransfer : event.originalEvent.dataTransfer; // jQuery fix;
} }
protected _preventAndStop(event: any): any { protected _preventAndStop(event: Event): any {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
} }

View File

@@ -1,10 +1,12 @@
import { Directive, EventEmitter, ElementRef, Input, HostListener, Output } from '@angular/core'; import { Directive, ElementRef, EventEmitter, HostListener, Input, Output } from '@angular/core';
import { FileUploader } from './file-uploader.class'; import { FileUploader, FilterFunction } from './file-uploader.class';
@Directive({ selector: '[ng2FileSelect]' }) @Directive({ selector: '[ng2FileSelect]' })
export class FileSelectDirective { export class FileSelectDirective {
@Input() public uploader: FileUploader; @Input() public uploader: FileUploader;
// tslint:disable-next-line:no-input-rename
@Input('ng2FileFilter') public filter: FilterFunction['fn'];
@Output() public onFileSelected: EventEmitter<File[]> = new EventEmitter<File[]>(); @Output() public onFileSelected: EventEmitter<File[]> = new EventEmitter<File[]>();
protected element: ElementRef; protected element: ElementRef;
@@ -29,7 +31,10 @@ export class FileSelectDirective {
public onChange(): any { public onChange(): any {
let files = this.element.nativeElement.files; let files = this.element.nativeElement.files;
let options = this.getOptions(); let options = this.getOptions();
let filters = this.getFilters(); let filters = typeof this.filter === 'function' ? [{
name: 'ng2FileSelectDirectiveFilter',
fn: this.filter
}, ...options.filters] : this.getFilters();
this.uploader.addToQueue(files, options, filters); this.uploader.addToQueue(files, options, filters);
this.onFileSelected.emit(files); this.onFileSelected.emit(files);

View File

@@ -14,9 +14,9 @@ export interface Headers {
export type ParsedResponseHeaders = { [headerFieldName: string]: string }; export type ParsedResponseHeaders = { [headerFieldName: string]: string };
export type FilterFunction = { export interface FilterFunction {
name: string, name: string;
fn: (item?: FileLikeObject, options?: FileUploaderOptions) => boolean fn(this: FileUploader, item?: FileLikeObject, options?: FileUploaderOptions, queueIndex?: number): boolean | Promise<boolean>;
}; };
export interface FileUploaderOptions { export interface FileUploaderOptions {
@@ -89,26 +89,30 @@ export class FileUploader {
this.options.filters.unshift({ name: 'mimeType', fn: this._mimeTypeFilter }); this.options.filters.unshift({ name: 'mimeType', fn: this._mimeTypeFilter });
} }
for (let i = 0; i < this.queue.length; i++) { for (const q of this.queue) {
this.queue[ i ].url = this.options.url; q.url = this.options.url;
} }
} }
public addToQueue(files: File[], options?: FileUploaderOptions, filters?: FilterFunction[] | string): void { public async addToQueue(files: FileList, options?: FileUploaderOptions, filters?: FilterFunction[] | string): Promise<void> {
let list: File[] = []; let list: File[] = [];
for (let file of files) { // tslint:disable-next-line:prefer-for-of
list.push(file); for (let i = 0; i < files.length; i++) {
list.push(files[i]);
} }
let arrayOfFilters = this._getFilters(filters); let arrayOfFilters = this._getFilters(filters);
let count = this.queue.length; let count = this.queue.length;
let addedFileItems: FileItem[] = []; let addedFileItems: FileItem[] = [];
list.map((some: File) => { let idx = 0;
for (const some of list) {
if (!options) { if (!options) {
options = this.options; options = this.options;
} }
let temp = new FileLikeObject(some); let temp = new FileLikeObject(some);
if (this._isValidFile(temp, arrayOfFilters, options)) { if (await this._isValidFile(temp, arrayOfFilters, options, idx++)) {
let fileItem = new FileItem(this, some, options); let fileItem = new FileItem(this, some, options);
addedFileItems.push(fileItem); addedFileItems.push(fileItem);
this.queue.push(fileItem); this.queue.push(fileItem);
@@ -117,7 +121,7 @@ export class FileUploader {
let filter = arrayOfFilters[this._failFilterIndex]; let filter = arrayOfFilters[this._failFilterIndex];
this._onWhenAddingFileFailed(temp, filter, options); this._onWhenAddingFileFailed(temp, filter, options);
} }
}); }
if (this.queue.length !== count) { if (this.queue.length !== count) {
this._onAfterAddingAll(addedFileItems); this._onAfterAddingAll(addedFileItems);
this.progress = this._getTotalProgress(); this.progress = this._getTotalProgress();
@@ -420,12 +424,18 @@ export class FileUploader {
return this.options.queueLimit === undefined || this.queue.length < this.options.queueLimit; return this.options.queueLimit === undefined || this.queue.length < this.options.queueLimit;
} }
protected _isValidFile(file: FileLikeObject, filters: FilterFunction[], options: FileUploaderOptions): boolean { protected async _isValidFile(file: FileLikeObject, filters: FilterFunction[], options: FileUploaderOptions, queueIndex: number) {
this._failFilterIndex = -1; this._failFilterIndex = -1;
return !filters.length ? true : filters.every((filter: FilterFunction) => {
for (const filter of filters) {
this._failFilterIndex++; this._failFilterIndex++;
return filter.fn.call(this, file, options);
}); if (!(await Promise.resolve(filter.fn.call(this, file, options, queueIndex)))) {
return false;
}
}
return true;
} }
protected _isSuccessCode(status: number): boolean { protected _isSuccessCode(status: number): boolean {