inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* add maxFile size in upload Button

* test button file size in demo shell
This commit is contained in:
Eugenio Romano
2017-10-26 10:52:28 +01:00
committed by Popovics András
parent 3aa2724d25
commit 1cfe43e5d9
6 changed files with 89 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
demo-shell-ng2/resources/i18n/en.json
View File

@@ -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.",

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

@@ -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()"

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

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

1
docs/upload-button.component.md
View File

@@ -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. |

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

@@ -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: 'deimos.png' },
<File> { name: 'ganymede.bmp' }
<File> {name: 'phobos.jpg'},
<File> {name: 'deimos.png'},
<File> {name: 'ganymede.bmp'}
];
let addToQueueSpy;

29
ng2-components/ng2-alfresco-upload/src/components/upload-button.component.ts
View File

@@ -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.
*