From 04abcf075e6faf6b1b91fc7665ef68a0a5839246 Mon Sep 17 00:00:00 2001 From: olshansky Date: Sun, 28 Jul 2019 15:02:59 +0300 Subject: [PATCH] feat: max file size validation --- projects/ngx-uploader/README.md | 3 ++- projects/ngx-uploader/src/lib/interfaces.ts | 1 + .../ngx-uploader/src/lib/ng-file-drop.directive.ts | 3 ++- .../src/lib/ng-file-select.directive.ts | 3 ++- .../ngx-uploader/src/lib/ngx-uploader.class.ts | 14 ++++++++++++-- src/app/app.component.ts | 2 +- 6 files changed, 20 insertions(+), 6 deletions(-) diff --git a/projects/ngx-uploader/README.md b/projects/ngx-uploader/README.md index 61c8c225..87b4517f 100644 --- a/projects/ngx-uploader/README.md +++ b/projects/ngx-uploader/README.md @@ -89,6 +89,7 @@ export interface UploaderOptions { concurrency: number; // number of files uploaded at the same time allowedContentTypes?: string[]; // content types allowed (default *) maxUploads?: number; // max number of files the user can upload + maxFileSize?: number; // max size of the file in bytes the user can upload } export interface UploadProgress { @@ -200,7 +201,7 @@ export class AppHomeComponent { dragOver: boolean; constructor() { - this.options = { concurrency: 1, maxUploads: 3 }; + this.options = { concurrency: 1, maxUploads: 3, maxFileSize: 1000000 }; this.files = []; // local uploading files array this.uploadInput = new EventEmitter(); // input events, we use this to emit data to ngx-uploader this.humanizeBytes = humanizeBytes; diff --git a/projects/ngx-uploader/src/lib/interfaces.ts b/projects/ngx-uploader/src/lib/interfaces.ts index ca3067f6..12663e52 100644 --- a/projects/ngx-uploader/src/lib/interfaces.ts +++ b/projects/ngx-uploader/src/lib/interfaces.ts @@ -4,6 +4,7 @@ export interface UploaderOptions { concurrency: number; allowedContentTypes?: string[]; maxUploads?: number; + maxFileSize?: number; } export interface BlobFile extends Blob { diff --git a/projects/ngx-uploader/src/lib/ng-file-drop.directive.ts b/projects/ngx-uploader/src/lib/ng-file-drop.directive.ts index d56e9bfd..ee6f2e1d 100644 --- a/projects/ngx-uploader/src/lib/ng-file-drop.directive.ts +++ b/projects/ngx-uploader/src/lib/ng-file-drop.directive.ts @@ -25,7 +25,8 @@ export class NgFileDropDirective implements OnInit, OnDestroy { const concurrency = this.options && this.options.concurrency || Number.POSITIVE_INFINITY; const allowedContentTypes = this.options && this.options.allowedContentTypes || ['*']; const maxUploads = this.options && this.options.maxUploads || Number.POSITIVE_INFINITY; - this.upload = new NgUploaderService(concurrency, allowedContentTypes, maxUploads); + const maxFileSize = this.options && this.options.maxFileSize || Number.POSITIVE_INFINITY; + this.upload = new NgUploaderService(concurrency, allowedContentTypes, maxUploads, maxFileSize); this.el = this.elementRef.nativeElement; diff --git a/projects/ngx-uploader/src/lib/ng-file-select.directive.ts b/projects/ngx-uploader/src/lib/ng-file-select.directive.ts index 71be90c9..71eb5a0e 100644 --- a/projects/ngx-uploader/src/lib/ng-file-select.directive.ts +++ b/projects/ngx-uploader/src/lib/ng-file-select.directive.ts @@ -25,7 +25,8 @@ export class NgFileSelectDirective implements OnInit, OnDestroy { const concurrency = this.options && this.options.concurrency || Number.POSITIVE_INFINITY; const allowedContentTypes = this.options && this.options.allowedContentTypes || ['*']; const maxUploads = this.options && this.options.maxUploads || Number.POSITIVE_INFINITY; - this.upload = new NgUploaderService(concurrency, allowedContentTypes, maxUploads); + const maxFileSize = this.options && this.options.maxFileSize || Number.POSITIVE_INFINITY; + this.upload = new NgUploaderService(concurrency, allowedContentTypes, maxUploads, maxFileSize); this.el = this.elementRef.nativeElement; this.el.addEventListener('change', this.fileListener, false); diff --git a/projects/ngx-uploader/src/lib/ngx-uploader.class.ts b/projects/ngx-uploader/src/lib/ngx-uploader.class.ts index ca5109a6..97375e88 100644 --- a/projects/ngx-uploader/src/lib/ngx-uploader.class.ts +++ b/projects/ngx-uploader/src/lib/ngx-uploader.class.ts @@ -22,11 +22,13 @@ export class NgUploaderService { subs: { id: string, sub: Subscription }[]; contentTypes: string[]; maxUploads: number; + maxFileSize: number; constructor( concurrency: number = Number.POSITIVE_INFINITY, contentTypes: string[] = ['*'], - maxUploads: number = Number.POSITIVE_INFINITY + maxUploads: number = Number.POSITIVE_INFINITY, + maxFileSize: number = Number.POSITIVE_INFINITY ) { this.queue = []; this.serviceEvents = new EventEmitter(); @@ -34,6 +36,7 @@ export class NgUploaderService { this.subs = []; this.contentTypes = contentTypes; this.maxUploads = maxUploads; + this.maxFileSize = maxFileSize; this.uploadScheduler .pipe( @@ -45,7 +48,7 @@ export class NgUploaderService { handleFiles(incomingFiles: FileList): void { const allowedIncomingFiles: File[] = [].reduce.call(incomingFiles, (acc: File[], checkFile: File, i: number) => { const futureQueueLength = acc.length + this.queue.length + 1; - if (this.isContentTypeAllowed(checkFile.type) && futureQueueLength <= this.maxUploads) { + if (this.isContentTypeAllowed(checkFile.type) && futureQueueLength <= this.maxUploads && this.isFileSizeAllowed(checkFile.size)) { acc = acc.concat(checkFile); } else { const rejectedFile: UploadFile = this.makeUploadFile(checkFile, i); @@ -291,6 +294,13 @@ export class NgUploaderService { return this.contentTypes.find((type: string) => type === mimetype) !== undefined; } + isFileSizeAllowed(fileSize: number): boolean { + if (!this.maxFileSize) { + return true; + } + return fileSize <= this.maxFileSize; + } + makeUploadFile(file: File, index: number): UploadFile { return { fileIndex: index, diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 4c103067..d1fc4c55 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -15,7 +15,7 @@ export class AppComponent { options: UploaderOptions; constructor() { - this.options = { concurrency: 1, maxUploads: 3 }; + this.options = { concurrency: 1, maxUploads: 3, maxFileSize: 1000000 }; this.files = []; this.uploadInput = new EventEmitter(); this.humanizeBytes = humanizeBytes;