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-711] Drag and drop doesn't have the acceptedFilesType property (#3104)

Browse Source 
* Added acceptedFilesType property for upload-drag-area component.
* Only those files will be uploaded which are included in acceptedFilesType.
This commit is contained in:
camorra-skk
2018-03-22 15:05:40 +05:30
committed by Eugenio Romano
parent 36625c1af6
commit 7358563b09
6 changed files with 166 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/content-services/upload-drag-area.component.md
View File

@@ -34,6 +34,7 @@ export class AppComponent {
| disabled | boolean | false | Toggle component disabled state |
| parentId | string | '-root-' | The ID of the folder in which the files will be uploaded. |
| versioning | boolean | false | Versioning false is the default uploader behaviour and it renames the file using an integer suffix if there is a name clash. Versioning true to indicate that a major version should be created |
| acceptedFilesType | `string` | `'*'` | List of allowed file extensions, for example: ".jpg,.gif,.png,.svg". |
### Events

47
lib/content-services/upload/components/base-upload/upload-base.ts Normal file
View File

@@ -0,0 +1,47 @@
/*!
* @license
* Copyright 2016 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { FileModel } from '@alfresco/adf-core';
import { Input } from '@angular/core';
export abstract class UploadBase {
@Input()
acceptedFilesType: string = '*';
constructor() {}
/**
* Checks if the given file is allowed by the extension filters
*
* @param file FileModel
*/
protected isFileAcceptable(file: FileModel): boolean {
if (this.acceptedFilesType === '*') {
return true;
}
const allowedExtensions = this.acceptedFilesType
.split(',')
.map(ext => ext.replace(/^\./, ''));
if (allowedExtensions.indexOf(file.extension) !== -1) {
return true;
}
return false;
}
}

29
lib/content-services/upload/components/upload-button.component.ts
View File

@@ -41,6 +41,7 @@ import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import { PermissionModel } from '../../document-list/models/permissions.model';
import 'rxjs/add/observable/throw';
import { UploadBase } from './base-upload/upload-base';
@Component({
selector: 'adf-upload-button',
@@ -51,7 +52,7 @@ import 'rxjs/add/observable/throw';
],
encapsulation: ViewEncapsulation.None
})
export class UploadButtonComponent implements OnInit, OnChanges, NodePermissionSubject {
export class UploadButtonComponent extends UploadBase implements OnInit, OnChanges, NodePermissionSubject {
/** Toggles component disabled state (if there is no node permission checking). */
@Input()
@@ -69,10 +70,6 @@ export class UploadButtonComponent implements OnInit, OnChanges, NodePermissionS
@Input()
versioning: boolean = false;
/** List of allowed file extensions, for example: ".jpg,.gif,.png,.svg". */
@Input()
acceptedFilesType: string = '*';
/** Sets a limit on the maximum size (in bytes) of a file to be uploaded.
* Has no effect if undefined.
*/
@@ -118,6 +115,7 @@ export class UploadButtonComponent implements OnInit, OnChanges, NodePermissionS
protected translateService: TranslationService,
protected logService: LogService
) {
super();
}
ngOnInit() {
@@ -190,27 +188,6 @@ export class UploadButtonComponent implements OnInit, OnChanges, NodePermissionS
});
}
/**
* Checks if the given file is allowed by the extension filters
*
* @param file FileModel
*/
protected isFileAcceptable(file: FileModel): boolean {
if (this.acceptedFilesType === '*') {
return true;
}
const allowedExtensions = this.acceptedFilesType
.split(',')
.map(ext => ext.replace(/^\./, ''));
if (allowedExtensions.indexOf(file.extension) !== -1) {
return true;
}
return false;
}
/**
* Checks if the given file is an acceptable size
*

84
lib/content-services/upload/components/upload-drag-area.component.spec.ts
View File

@@ -178,25 +178,72 @@ describe('UploadDragAreaComponent', () => {
});
});
it('should upload the list of files dropped', (done) => {
describe('Upload Files', () => {
let addToQueueSpy;
beforeEach(async(() => {
addToQueueSpy = spyOn(uploadService, 'addToQueue');
}));
it('should upload the list of files dropped', async(() => {
component.success = null;
uploadService.uploadFilesInTheQueue = jasmine.createSpy('uploadFilesInTheQueue');
fixture.detectChanges();
const file = <File> { name: 'fake-name-1', size: 10, webkitRelativePath: 'fake-folder1/fake-name-1.json' };
let filesList = [file];
spyOn(uploadService, 'addToQueue').and.callFake((f: FileModel) => {
fixture.detectChanges();
fixture.whenStable().then(() => {
addToQueueSpy.and.callFake((f: FileModel) => {
expect(f.file).toBe(file);
done();
});
component.onFilesDropped(filesList);
});
}));
it('should upload a file when dropped', () => {
it('should only upload those files whose fileTypes are in acceptedFilesType', async(() => {
spyOn(uploadService, 'uploadFilesInTheQueue');
component.success = null;
component.acceptedFilesType = '.jpg,.pdf';
fixture.detectChanges();
const files: File[] = [
<File> { name: 'phobos.jpg' },
<File> { name: 'deimos.pdf' },
<File> { name: 'ganymede.bmp' }
];
component.onFilesDropped(files);
fixture.whenStable().then(() => {
expect(uploadService.uploadFilesInTheQueue).toHaveBeenCalledWith(null);
const filesCalledWith = addToQueueSpy.calls.mostRecent().args;
expect(filesCalledWith.length).toBe(2, 'Files should contain two elements');
expect(filesCalledWith[0].name).toBe('phobos.jpg');
expect(filesCalledWith[1].name).toBe('deimos.pdf');
});
}));
it('should upload a file if fileType is in acceptedFilesType', async(() => {
spyOn(uploadService, 'uploadFilesInTheQueue');
component.success = null;
component.acceptedFilesType = '.png';
fixture.detectChanges();
let itemEntity = {
fullPath: '/folder-fake/file-fake.png',
isDirectory: false,
isFile: true,
name: 'file-fake.png',
file: (callbackFile) => {
let fileFake = new File(['fakefake'], 'file-fake.png', {type: 'image/png'});
callbackFile(fileFake);
}
};
fixture.whenStable().then(() => {
component.onFilesEntityDropped(itemEntity);
expect(uploadService.uploadFilesInTheQueue).toHaveBeenCalledWith(null);
});
}));
it('should not upload a file if fileType is not in acceptedFilesType', async(() => {
component.success = null;
component.acceptedFilesType = '.pdf';
fixture.detectChanges();
spyOn(uploadService, 'uploadFilesInTheQueue');
@@ -206,18 +253,18 @@ describe('UploadDragAreaComponent', () => {
isFile: true,
name: 'file-fake.png',
file: (callbackFile) => {
let fileFake = new File(['fakefake'], 'file-fake.png', { type: 'image/png' });
let fileFake = new File(['fakefake'], 'file-fake.png', {type: 'image/png'});
callbackFile(fileFake);
}
};
fixture.whenStable().then(() => {
component.onFilesEntityDropped(itemEntity);
expect(uploadService.uploadFilesInTheQueue).toHaveBeenCalledWith(null);
expect(uploadService.uploadFilesInTheQueue).not.toHaveBeenCalledWith(null);
});
}));
it('should upload a file with a custom root folder ID when dropped', () => {
it('should upload a file with a custom root folder ID when dropped', async(() => {
component.success = null;
fixture.detectChanges();
spyOn(uploadService, 'uploadFilesInTheQueue');
@@ -227,14 +274,13 @@ describe('UploadDragAreaComponent', () => {
isFile: true,
name: 'file-fake.png',
file: (callbackFile) => {
let fileFake = new File(['fakefake'], 'file-fake.png', { type: 'image/png' });
let fileFake = new File(['fakefake'], 'file-fake.png', {type: 'image/png'});
callbackFile(fileFake);
}
};
component.onFilesEntityDropped(itemEntity);
expect(uploadService.uploadFilesInTheQueue).toHaveBeenCalledWith(null);
});
}));
it('should upload a file when user has create permission on target folder', async(() => {
let fakeItem = {
@@ -248,12 +294,6 @@ describe('UploadDragAreaComponent', () => {
}
};
fixture.detectChanges();
spyOn(uploadService, 'uploadFilesInTheQueue').and.returnValue(Promise.resolve(fakeItem));
component.success.subscribe((val) => {
expect(val).not.toBeNull();
});
let fakeCustomEvent: CustomEvent = new CustomEvent('CustomEvent', {
detail: {
data: getFakeShareDataRow(),
@@ -263,7 +303,7 @@ describe('UploadDragAreaComponent', () => {
component.onUploadFiles(fakeCustomEvent);
}));
});
describe('Events', () => {
it('should raise an error if upload a file goes wrong', (done) => {
let fakeItem = {

17
lib/content-services/upload/components/upload-drag-area.component.ts
View File

@@ -26,6 +26,7 @@ import {
UploadService
} from '@alfresco/adf-core';
import { Component, EventEmitter, forwardRef, Input, Output, ViewEncapsulation } from '@angular/core';
import { UploadBase } from './base-upload/upload-base';
@Component({
selector: 'adf-upload-drag-area',
@@ -36,7 +37,7 @@ import { Component, EventEmitter, forwardRef, Input, Output, ViewEncapsulation }
],
encapsulation: ViewEncapsulation.None
})
export class UploadDragAreaComponent implements NodePermissionSubject {
export class UploadDragAreaComponent extends UploadBase implements NodePermissionSubject {
/** Toggle component disabled state. */
@Input()
@@ -63,6 +64,7 @@ export class UploadDragAreaComponent implements NodePermissionSubject {
constructor(private uploadService: UploadService,
private translateService: TranslationService,
private notificationService: NotificationService) {
super();
}
/**
@@ -76,9 +78,8 @@ export class UploadDragAreaComponent implements NodePermissionSubject {
newVersion: this.versioning,
path: '/',
parentId: this.parentId
}));
this.uploadService.addToQueue(...fileModels);
this.uploadService.uploadFilesInTheQueue(this.success);
})).filter(this.isFileAcceptable.bind(this));
this.addNodeInUploadQueue(fileModels);
}
}
@@ -95,8 +96,9 @@ export class UploadDragAreaComponent implements NodePermissionSubject {
parentId: this.parentId,
path: item.fullPath.replace(item.name, '')
});
if (this.isFileAcceptable(fileModel)) {
this.addNodeInUploadQueue([fileModel]);
}
});
}
}
@@ -115,8 +117,7 @@ export class UploadDragAreaComponent implements NodePermissionSubject {
parentId: this.parentId,
path: entry.relativeFolder
});
});
}).filter(this.isFileAcceptable.bind(this));
this.addNodeInUploadQueue(files);
});
}
@@ -172,7 +173,7 @@ export class UploadDragAreaComponent implements NodePermissionSubject {
newVersion: this.versioning,
path: fileInfo.relativeFolder,
parentId: parentId
}));
})).filter(this.isFileAcceptable.bind(this));
this.addNodeInUploadQueue(fileModels);
}
}

2
lib/content-services/upload/public-api.ts
View File

@@ -23,3 +23,5 @@ export * from './components/file-uploading-list.component';
export * from './components/file-uploading-list-row.component';
export * from './directives/file-draggable.directive';
export * from './components/base-upload/upload-base';