feat: max file size validation

Author: artolshansky

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<UploadInput>(); // input events, we use this to emit data to ngx-uploader
     this.humanizeBytes = humanizeBytes;

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 {

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;
 

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);

projects/ngx-uploader/src/lib/ngx-uploader.class.ts

@@ -22,18 +22,21 @@ 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<UploadOutput>();
     this.uploadScheduler = new Subject();
     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,

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<UploadInput>();
     this.humanizeBytes = humanizeBytes;