From 1cfe43e5d949adba56172a1f47d3157b4dbeb7f4 Mon Sep 17 00:00:00 2001 From: Eugenio Romano Date: Thu, 26 Oct 2017 10:52:28 +0100 Subject: [PATCH] [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 | 1 + .../app/components/files/files.component.html | 13 +++++ .../app/components/files/files.component.ts | 6 +++ docs/upload-button.component.md | 1 + .../upload-button.component.spec.ts | 51 +++++++++++++++---- .../src/components/upload-button.component.ts | 29 +++++++++-- 6 files changed, 89 insertions(+), 12 deletions(-) diff --git a/demo-shell-ng2/resources/i18n/en.json b/demo-shell-ng2/resources/i18n/en.json index da8c12e1ce..fefc1511c1 100644 --- a/demo-shell-ng2/resources/i18n/en.json +++ b/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.", diff --git a/demo-shell-ng2/src/app/components/files/files.component.html b/demo-shell-ng2/src/app/components/files/files.component.html index 6fd083fd5e..5a8dd2cb62 100644 --- a/demo-shell-ng2/src/app/components/files/files.component.html +++ b/demo-shell-ng2/src/app/components/files/files.component.html @@ -269,6 +269,12 @@ +
+ {{'DOCUMENT_LIST.MAX_SIZE' | + translate}} + +
+
{{'DOCUMENT_LIST.ENABLE_VERSIONING' | translate}} @@ -282,6 +288,12 @@ data-automation-id="accepted-files-type">
+
+ + + +
{ 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[] = [ + {name: 'bigFile.png', size: 1000}, + {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[] = [ - { name: 'phobos.jpg' }, - { name: 'deimos.png' }, - { name: 'ganymede.bmp' } + {name: 'phobos.jpg'}, + {name: 'deimos.png'}, + {name: 'ganymede.bmp'} ]; let addToQueueSpy; diff --git a/ng2-components/ng2-alfresco-upload/src/components/upload-button.component.ts b/ng2-components/ng2-alfresco-upload/src/components/upload-button.component.ts index ed2903a117..4743a6dd74 100644 --- a/ng2-components/ng2-alfresco-upload/src/components/upload-button.component.ts +++ b/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(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. *