Compare commits

..

1 Commits

Author SHA1 Message Date
Koen van der Linden
385c322d3d feat(fileUploader): Added queueMaxSizeLimit, to limit the file size of all items in the uploadqueue. 2018-04-03 10:43:14 +02:00
3 changed files with 28 additions and 12 deletions

View File

@@ -67,6 +67,7 @@ Easy to use Angular2 directives for files upload ([demo](http://valor-software.g
5. `formatDataFunction` - Function to modify the request body. 'DisableMultipart' must be 'true' for this function to be called. 5. `formatDataFunction` - Function to modify the request body. 'DisableMultipart' must be 'true' for this function to be called.
6. `formatDataFunctionIsAsync` - Informs if the function sent in 'formatDataFunction' is asynchronous. Defaults to false. 6. `formatDataFunctionIsAsync` - Informs if the function sent in 'formatDataFunction' is asynchronous. Defaults to false.
7. `parametersBeforeFiles` - States if additional parameters should be appended before or after the file. Defaults to false. 7. `parametersBeforeFiles` - States if additional parameters should be appended before or after the file. Defaults to false.
8. `queueMaxSizeLimit` - States the maximum allowed size (in bytes) of all files in the queue that are going to be uploaded.
### Events ### Events

View File

@@ -30,6 +30,7 @@ export interface FileUploaderOptions {
authToken?: string; authToken?: string;
maxFileSize?: number; maxFileSize?: number;
queueLimit?: number; queueLimit?: number;
queueMaxSizeLimit? : number;
removeAfterUpload?: boolean; removeAfterUpload?: boolean;
url?: string; url?: string;
disableMultipart?: boolean; disableMultipart?: boolean;
@@ -39,12 +40,12 @@ export interface FileUploaderOptions {
parametersBeforeFiles?: boolean; parametersBeforeFiles?: boolean;
formatDataFunction?: Function; formatDataFunction?: Function;
formatDataFunctionIsAsync?: boolean; formatDataFunctionIsAsync?: boolean;
parallelUploads?: number;
} }
export class FileUploader { export class FileUploader {
public authToken: string; public authToken: string;
public isUploading: boolean = false;
public queue: FileItem[] = []; public queue: FileItem[] = [];
public progress: number = 0; public progress: number = 0;
public _nextIndex: number = 0; public _nextIndex: number = 0;
@@ -52,10 +53,6 @@ export class FileUploader {
public authTokenHeader: string; public authTokenHeader: string;
public response: EventEmitter<any>; public response: EventEmitter<any>;
public get isUploading(): boolean {
return this.queue.some((item: FileItem) => item.isUploading);
}
public options: FileUploaderOptions = { public options: FileUploaderOptions = {
autoUpload: false, autoUpload: false,
isHTML5: true, isHTML5: true,
@@ -81,6 +78,10 @@ export class FileUploader {
this.autoUpload = this.options.autoUpload; this.autoUpload = this.options.autoUpload;
this.options.filters.unshift({ name: 'queueLimit', fn: this._queueLimitFilter }); this.options.filters.unshift({ name: 'queueLimit', fn: this._queueLimitFilter });
if (this.options.queueMaxSizeLimit) {
this.options.filters.unshift({ name: 'queueMaxSizeLimit', fn: this._queueMaxSizeLimitFilter });
}
if (this.options.maxFileSize) { if (this.options.maxFileSize) {
this.options.filters.unshift({ name: 'fileSize', fn: this._fileSizeFilter }); this.options.filters.unshift({ name: 'fileSize', fn: this._fileSizeFilter });
} }
@@ -93,8 +94,8 @@ export class FileUploader {
this.options.filters.unshift({ name: 'mimeType', fn: this._mimeTypeFilter }); this.options.filters.unshift({ name: 'mimeType', fn: this._mimeTypeFilter });
} }
for (let item of this.queue) { for (let i = 0; i < this.queue.length; i++) {
item.url = this.options.url; this.queue[ i ].url = this.options.url;
} }
} }
@@ -154,6 +155,10 @@ export class FileUploader {
let item = this.queue[ index ]; let item = this.queue[ index ];
let transport = this.options.isHTML5 ? '_xhrTransport' : '_iframeTransport'; let transport = this.options.isHTML5 ? '_xhrTransport' : '_iframeTransport';
item._prepareToUploading(); item._prepareToUploading();
if (this.isUploading) {
return;
}
this.isUploading = true;
(this as any)[ transport ](item); (this as any)[ transport ](item);
} }
@@ -172,10 +177,7 @@ export class FileUploader {
return; return;
} }
items.map((item: FileItem) => item._prepareToUploading()); items.map((item: FileItem) => item._prepareToUploading());
let numberUploadsToStart = Math.min(items.length, this.options.parallelUploads || 1); items[ 0 ].upload();
for (let i = 0; i < numberUploadsToStart; ++i) {
items[ i ].upload();
}
} }
public cancelAll(): void { public cancelAll(): void {
@@ -279,6 +281,7 @@ export class FileUploader {
item._onComplete(response, status, headers); item._onComplete(response, status, headers);
this.onCompleteItem(item, response, status, headers); this.onCompleteItem(item, response, status, headers);
let nextItem = this.getReadyItems()[ 0 ]; let nextItem = this.getReadyItems()[ 0 ];
this.isUploading = false;
if (nextItem) { if (nextItem) {
nextItem.upload(); nextItem.upload();
return; return;
@@ -375,7 +378,7 @@ export class FileUploader {
} }
xhr.onreadystatechange = function () { xhr.onreadystatechange = function () {
if (xhr.readyState == XMLHttpRequest.DONE) { if (xhr.readyState == XMLHttpRequest.DONE) {
that.response.emit(xhr.responseText); that.response.emit(xhr.responseText)
} }
} }
if (this.options.formatDataFunctionIsAsync) { if (this.options.formatDataFunctionIsAsync) {
@@ -422,6 +425,17 @@ 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 _queueMaxSizeLimitFilter(item: FileLikeObject): boolean {
let queueFileSize = 0;
let queueNotProcessedItems = this.queue.filter(queuedItem => !(queuedItem.isSuccess || queuedItem.isCancel || queuedItem.isError));
if(queueNotProcessedItems.length>0)
{
// total size of all queued items that are going to be uploaded
queueFileSize = queueNotProcessedItems.map(queuedItem => queuedItem.file.size).reduce((fileSizeA,fileSizeB)=> fileSizeA + fileSizeB);
}
return this.options.queueMaxSizeLimit === undefined || (queueFileSize + item.size) < this.options.queueMaxSizeLimit;
}
protected _isValidFile(file: FileLikeObject, filters: FilterFunction[], options: FileUploaderOptions): boolean { protected _isValidFile(file: FileLikeObject, filters: FilterFunction[], options: FileUploaderOptions): boolean {
this._failFilterIndex = -1; this._failFilterIndex = -1;
return !filters.length ? true : filters.every((filter: FilterFunction) => { return !filters.length ? true : filters.every((filter: FilterFunction) => {

View File

@@ -63,6 +63,7 @@ describe('Directive: FileSelectDirective', () => {
expect(options.isHTML5).toBeTruthy(); expect(options.isHTML5).toBeTruthy();
expect(options.removeAfterUpload).toBeFalsy(); expect(options.removeAfterUpload).toBeFalsy();
expect(options.disableMultipart).toBeFalsy(); expect(options.disableMultipart).toBeFalsy();
expect(options.queueMaxSizeLimit).toBeUndefined();
}); });
it('can get filters', () => { it('can get filters', () => {