[ADF-788] Support for max file size constraints in Upload button component (#2546)

* add maxFile size in upload Button

* test button file size in demo shell

demo-shell-ng2/resources/i18n/en.json

@@ -22,6 +22,7 @@
         "MULTIPLE_FILE_UPLOAD" :"Multiple File Upload",
         "FOLDER_UPLOAD" :"Folder upload",
         "CUSTOM_FILTER" :"Custom extensions filter",
+        "MAX_SIZE" : "Max size filter",
         "ENABLE_VERSIONING" :"Enable versioning",
         "DESCRIPTION_UPLOAD" : "Enable upload (demoing enabled/disabled state only if the permission are not checked dynamically)",
         "MULTISELECT_DESCRIPTION" : "For 'Multiple' selection mode use Cmd (macOS) or Ctrl (Win) to toggle selection of multiple items.",

demo-shell-ng2/src/app/components/files/files.component.html

@@ -269,6 +269,12 @@
             </mat-slide-toggle>
         </section>
 
+        <section>
+          <mat-slide-toggle [color]="'primary'" [(ngModel)]="maxSizeShow">{{'DOCUMENT_LIST.MAX_SIZE' |
+            translate}}
+          </mat-slide-toggle>
+        </section>
+
         <section>
             <mat-slide-toggle [color]="'primary'" [(ngModel)]="versioning">{{'DOCUMENT_LIST.ENABLE_VERSIONING' |
                 translate}}
@@ -282,6 +288,12 @@
                        data-automation-id="accepted-files-type">
             </mat-form-field>
         </section>
+        <section *ngIf="maxSizeShow">
+            <mat-form-field>
+                <input matInput type="number"  placeholder="Max file size" [(ngModel)]="maxFilesSize"
+                       data-automation-id="max-files-size">
+            </mat-form-field>
+        </section>
         <div *ngIf="!acceptedFilesTypeShow">
             <adf-upload-button
                 #uploadButton
@@ -291,6 +303,7 @@
                 [rootFolderId]="documentList.currentFolderId"
                 [multipleFiles]="multipleFileUpload"
                 [uploadFolders]="folderUpload"
+                [maxFilesSize]="maxFilesSize"
                 [versioning]="versioning"
                 [adf-node-permission]="'create'"
                 [adf-nodes]="getCurrentDocumentListNode()"

demo-shell-ng2/src/app/components/files/files.component.ts

@@ -65,12 +65,18 @@ export class FilesComponent implements OnInit {
     @Input()
     acceptedFilesTypeShow: boolean = false;
 
+    @Input()
+    maxSizeShow: boolean = false;
+
     @Input()
     versioning: boolean = false;
 
     @Input()
     acceptedFilesType: string = '.jpg,.pdf,.js';
 
+    @Input()
+    maxFilesSize: number = null;
+
     @Input()
     enableUpload: boolean = true;
 

docs/upload-button.component.md

@@ -38,6 +38,7 @@
 | uploadFolders | boolean | false | Allow/disallow upload folders (only for Chrome) |
 | multipleFiles | boolean | false | Allow/disallow multiple files |
 | acceptedFilesType | string | * |  array of allowed file extensions , example: ".jpg,.gif,.png,.svg" |
+| maxFilesSize | number |  |  if defined allow to upload files only with this max file size. the size of a file is in bytes  |
 | **(deprecated)** currentFolderPath | string | '/Sites/swsdp/documentLibrary' | define the path where the files are uploaded. **Deprecated in 1.6.0: use rootFolderId instead.** |
 | **(deprecated)** rootFolderId | string | '-root-' | The ID of the root folder node. **Deprecated in 1.6.2: use parentId instead.** |
 | parentId | string | empty | The ID of the root. It can be the nodeId if you are using the upload for the Content Service or taskId/processId for the Process Service. |

ng2-components/ng2-alfresco-upload/src/components/upload-button.component.spec.ts

@@ -118,7 +118,7 @@ describe('UploadButtonComponent', () => {
 
         fixture.detectChanges();
 
-        component.permissionEvent.subscribe( permission => {
+        component.permissionEvent.subscribe(permission => {
             expect(permission).toBeDefined();
             expect(permission.type).toEqual('content');
             expect(permission.action).toEqual('upload');
@@ -148,7 +148,7 @@ describe('UploadButtonComponent', () => {
 
         spyOn(component, 'getFolderNode').and.returnValue(Observable.of(fakeFolderNodeWithPermission));
 
-        component.ngOnChanges({ rootFolderId: new SimpleChange(null, component.rootFolderId, true) });
+        component.ngOnChanges({rootFolderId: new SimpleChange(null, component.rootFolderId, true)});
         component.onFilesAdded(fakeEvent);
         let compiled = fixture.debugElement.nativeElement;
         fixture.detectChanges();
@@ -162,7 +162,7 @@ describe('UploadButtonComponent', () => {
 
         spyOn(component, 'getFolderNode').and.returnValue(Observable.of(fakeFolderNodeWithPermission));
 
-        component.ngOnChanges({ rootFolderId: new SimpleChange(null, component.rootFolderId, true) });
+        component.ngOnChanges({rootFolderId: new SimpleChange(null, component.rootFolderId, true)});
         component.onFilesAdded(fakeEvent);
         let compiled = fixture.debugElement.nativeElement;
         fixture.detectChanges();
@@ -177,7 +177,7 @@ describe('UploadButtonComponent', () => {
 
         spyOn(component, 'getFolderNode').and.returnValue(Observable.of(fakeFolderNodeWithPermission));
 
-        component.ngOnChanges({ rootFolderId: new SimpleChange(null, component.rootFolderId, true) });
+        component.ngOnChanges({rootFolderId: new SimpleChange(null, component.rootFolderId, true)});
         uploadService.uploadFilesInTheQueue = jasmine.createSpy('uploadFilesInTheQueue');
 
         fixture.detectChanges();
@@ -192,7 +192,7 @@ describe('UploadButtonComponent', () => {
         component.success = null;
 
         spyOn(component, 'getFolderNode').and.returnValue(Observable.of(fakeFolderNodeWithPermission));
-        component.ngOnChanges({ rootFolderId: new SimpleChange(null, component.rootFolderId, true) });
+        component.ngOnChanges({rootFolderId: new SimpleChange(null, component.rootFolderId, true)});
 
         uploadService.uploadFilesInTheQueue = jasmine.createSpy('uploadFilesInTheQueue');
 
@@ -209,7 +209,7 @@ describe('UploadButtonComponent', () => {
         spyOn(contentService, 'createFolder').and.returnValue(Observable.of(true));
         spyOn(component, 'getFolderNode').and.returnValue(Observable.of(fakeFolderNodeWithPermission));
 
-        component.ngOnChanges({ rootFolderId: new SimpleChange(null, component.rootFolderId, true) });
+        component.ngOnChanges({rootFolderId: new SimpleChange(null, component.rootFolderId, true)});
         fixture.detectChanges();
 
         component.success.subscribe(e => {
@@ -260,12 +260,45 @@ describe('UploadButtonComponent', () => {
         expect(compiled.querySelector('#uploadFolder-label-static').textContent).toEqual('test-text');
     });
 
+    describe('filesize', () => {
+
+        const files: File[] = [
+            <File> {name: 'bigFile.png', size: 1000},
+            <File> {name: 'smallFile.png', size: 10}
+        ];
+
+        let addToQueueSpy;
+
+        beforeEach(() => {
+            addToQueueSpy = spyOn(uploadService, 'addToQueue');
+        });
+
+        it('should filter out file, which are too big if max file size is set', () => {
+            component.maxFilesSize = 100;
+
+            component.uploadFiles(files);
+
+            const filesCalledWith = addToQueueSpy.calls.mostRecent().args;
+            expect(filesCalledWith.length).toBe(1);
+            expect(filesCalledWith[0].name).toBe('smallFile.png');
+        });
+
+        it('should not filter out files if max file size is not set', () => {
+            component.maxFilesSize = null;
+
+            component.uploadFiles(files);
+
+            const filesCalledWith = addToQueueSpy.calls.mostRecent().args;
+            expect(filesCalledWith.length).toBe(2);
+        });
+    });
+
     describe('uploadFiles', () => {
 
         const files: File[] = [
-            <File> { name: 'phobos.jpg' },
+            <File> {name: 'phobos.jpg'},
-            <File> { name: 'deimos.png' },
+            <File> {name: 'deimos.png'},
-            <File> { name: 'ganymede.bmp' }
+            <File> {name: 'ganymede.bmp'}
         ];
 
         let addToQueueSpy;

ng2-components/ng2-alfresco-upload/src/components/upload-button.component.ts

@@ -15,7 +15,17 @@
  * limitations under the License.
  */
 
-import { Component, EventEmitter, forwardRef, Input, OnChanges, OnInit, Output, SimpleChanges, ViewEncapsulation } from '@angular/core';
+import {
+    Component,
+    EventEmitter,
+    forwardRef,
+    Input,
+    OnChanges,
+    OnInit,
+    Output,
+    SimpleChanges,
+    ViewEncapsulation
+} from '@angular/core';
 import { MinimalNodeEntryEntity } from 'alfresco-js-api';
 import {
     AlfrescoApiService,
@@ -36,7 +46,7 @@ import { PermissionModel } from '../models/permissions.model';
     templateUrl: './upload-button.component.html',
     styleUrls: ['./upload-button.component.scss'],
     providers: [
-        { provide: EXTENDIBLE_COMPONENT, useExisting: forwardRef(() => UploadButtonComponent)}
+        {provide: EXTENDIBLE_COMPONENT, useExisting: forwardRef(() => UploadButtonComponent)}
     ],
     encapsulation: ViewEncapsulation.None
 })
@@ -69,6 +79,9 @@ export class UploadButtonComponent implements OnInit, OnChanges, NodePermissionS
     @Input()
     acceptedFilesType: string = '*';
 
+    @Input()
+    maxFilesSize: number;
+
     @Input()
     staticTitle: string;
 
@@ -158,7 +171,8 @@ export class UploadButtonComponent implements OnInit, OnChanges, NodePermissionS
     uploadFiles(files: File[]): void {
         const latestFilesAdded: FileModel[] = files
             .map<FileModel>(this.createFileModel.bind(this))
-            .filter(this.isFileAcceptable.bind(this));
+            .filter(this.isFileAcceptable.bind(this))
+            .filter(this.isFileSizeAcceptable.bind(this));
 
         if (latestFilesAdded.length > 0) {
             this.uploadService.addToQueue(...latestFilesAdded);
@@ -203,6 +217,15 @@ export class UploadButtonComponent implements OnInit, OnChanges, NodePermissionS
         return false;
     }
 
+    /**
+     * Checks if the given file is an acceptable size
+     *
+     * @param file FileModel
+     */
+    private isFileSizeAcceptable(file: FileModel): boolean {
+        return this.maxFilesSize ? file.size <= this.maxFilesSize : true;
+    }
+
     /**
      * Show undo notification bar.
      *