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-3095] ability to intercept, pause and resume upload process (#3416)

Browse Source 
* prevent and resume upload process

* upload fixes and confirmation dialog demo

* ability to toggle the upload confirmation demo

* fix tests

* unit tests

* docs update

* remove deprecation

* fix test name
This commit is contained in:
Denys Vuika
2018-05-31 10:21:32 +01:00
committed by Eugenio Romano
parent 64a8c66103
commit 54e80e7863
11 changed files with 273 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
lib/content-services/upload/components/base-upload/upload-base.spec.ts
View File

@@ -15,22 +15,24 @@
* limitations under the License.
*/
import { Component } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { Component, NgZone } from '@angular/core';
import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
import { TranslationService, UploadService, setupTestBed, CoreModule, FileModel } from '@alfresco/adf-core';
import { UploadBase } from './upload-base';
import { TranslationMock } from '@alfresco/adf-core';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { UploadFilesEvent } from '../upload-files.event';
@Component({
selector: 'adf-upload-button-test',
template: 'test componente'
template: 'test component'
})
export class UploadTestComponent extends UploadBase {
constructor(protected uploadService: UploadService,
protected translationService: TranslationService) {
super(uploadService, translationService);
protected translationService: TranslationService,
protected ngZone: NgZone) {
super(uploadService, translationService, ngZone);
}
}
@@ -67,6 +69,66 @@ describe('UploadBase', () => {
TestBed.resetTestingModule();
});
describe('beginUpload', () => {
it('should raise event', done => {
spyOn(uploadService, 'addToQueue').and.stub();
spyOn(uploadService, 'uploadFilesInTheQueue').and.stub();
component.beginUpload.subscribe(() => done());
const file = <File> { name: 'bigFile.png', size: 1000 };
component.uploadFiles([file]);
fixture.detectChanges();
});
it('should pause upload', fakeAsync(() => {
spyOn(uploadService, 'addToQueue').and.stub();
spyOn(uploadService, 'uploadFilesInTheQueue').and.stub();
let prevented = false;
component.beginUpload.subscribe(event => {
event.preventDefault();
prevented = true;
});
const file = <File> { name: 'bigFile.png', size: 1000 };
component.uploadFiles([file]);
tick();
expect(prevented).toBeTruthy();
expect(uploadService.addToQueue).not.toHaveBeenCalled();
expect(uploadService.uploadFilesInTheQueue).not.toHaveBeenCalled();
}));
it('should resume upload', fakeAsync(() => {
const addToQueue = spyOn(uploadService, 'addToQueue').and.stub();
const uploadFilesInTheQueue = spyOn(uploadService, 'uploadFilesInTheQueue').and.stub();
let prevented = false;
let uploadEvent: UploadFilesEvent;
component.beginUpload.subscribe(event => {
uploadEvent = event;
event.preventDefault();
prevented = true;
});
const file = <File> { name: 'bigFile.png', size: 1000 };
component.uploadFiles([file]);
tick();
expect(prevented).toBeTruthy();
expect(addToQueue).not.toHaveBeenCalled();
expect(uploadFilesInTheQueue).not.toHaveBeenCalled();
addToQueue.calls.reset();
uploadFilesInTheQueue.calls.reset();
uploadEvent.resumeUpload();
expect(addToQueue).toHaveBeenCalled();
expect(uploadFilesInTheQueue).toHaveBeenCalled();
}));
});
describe('filesize', () => {
const files: File[] = [

60
lib/content-services/upload/components/base-upload/upload-base.ts
View File

@@ -16,10 +16,12 @@
*/
import { FileModel, FileInfo } from '@alfresco/adf-core';
import { EventEmitter, Input, Output } from '@angular/core';
import { EventEmitter, Input, Output, OnInit, OnDestroy, NgZone } from '@angular/core';
import { UploadService, TranslationService } from '@alfresco/adf-core';
import { Subscription } from 'rxjs/Rx';
import { UploadFilesEvent } from '../upload-files.event';
export abstract class UploadBase {
export abstract class UploadBase implements OnInit, OnDestroy {
/** Sets a limit on the maximum size (in bytes) of a file to be uploaded.
* Has no effect if undefined.
@@ -61,7 +63,7 @@ export abstract class UploadBase {
@Output()
success = new EventEmitter();
/** @deprecated 2.4.0 */
/** @deprecated 2.4.0 No longer used by the framework */
/** Emitted when a folder is created. */
@Output()
createFolder = new EventEmitter();
@@ -70,8 +72,28 @@ export abstract class UploadBase {
@Output()
error = new EventEmitter();
@Output()
beginUpload = new EventEmitter<UploadFilesEvent>();
protected subscriptions: Subscription[] = [];
constructor(protected uploadService: UploadService,
protected translationService: TranslationService) {
protected translationService: TranslationService,
protected ngZone: NgZone) {
}
ngOnInit() {
this.subscriptions.push(
this.uploadService.fileUploadError.subscribe((error) => {
this.error.emit(error);
})
);
}
ngOnDestroy() {
this.subscriptions.forEach(subscription => subscription.unsubscribe());
this.subscriptions = [];
}
/**
@@ -102,13 +124,20 @@ export abstract class UploadBase {
.filter(this.isFileAcceptable.bind(this))
.filter(this.isFileSizeAcceptable.bind(this));
if (filteredFiles.length > 0) {
this.uploadService.addToQueue(...filteredFiles);
this.uploadService.uploadFilesInTheQueue(this.success);
this.uploadService.fileUploadError.subscribe((error) => {
this.error.emit(error);
});
}
this.ngZone.run(() => {
const event = new UploadFilesEvent(
[...filteredFiles],
this.uploadService
);
this.beginUpload.emit(event);
if (!event.defaultPrevented) {
if (filteredFiles.length > 0) {
this.uploadService.addToQueue(...filteredFiles);
this.uploadService.uploadFilesInTheQueue(this.success);
}
}
});
}
/**
@@ -176,9 +205,12 @@ export abstract class UploadBase {
if (!this.isFileSizeAllowed(file)) {
acceptableSize = false;
this.translationService.get('FILE_UPLOAD.MESSAGES.EXCEED_MAX_FILE_SIZE', { fileName: file.name }).subscribe((message: string) => {
this.error.emit(message);
});
const message = this.translationService.instant(
'FILE_UPLOAD.MESSAGES.EXCEED_MAX_FILE_SIZE',
{ fileName: file.name }
);
this.error.emit(message);
}
return acceptableSize;

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

@@ -21,7 +21,7 @@ import {
} from '@alfresco/adf-core';
import {
Component, EventEmitter, forwardRef, Input,
OnChanges, OnInit, Output, SimpleChanges, ViewEncapsulation
OnChanges, OnInit, Output, SimpleChanges, ViewEncapsulation, NgZone
} from '@angular/core';
import { MinimalNodeEntryEntity } from 'alfresco-js-api';
import { Subject } from 'rxjs/Subject';
@@ -67,8 +67,9 @@ export class UploadButtonComponent extends UploadBase implements OnInit, OnChang
constructor(protected uploadService: UploadService,
private contentService: ContentService,
protected translationService: TranslationService,
protected logService: LogService) {
super(uploadService, translationService);
protected logService: LogService,
protected ngZone: NgZone) {
super(uploadService, translationService, ngZone);
}
ngOnInit() {

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

@@ -19,7 +19,7 @@ import {
EXTENDIBLE_COMPONENT, FileInfo, FileModel, FileUtils, NodePermissionSubject,
NotificationService, TranslationService, UploadService, ContentService, PermissionsEnum
} from '@alfresco/adf-core';
import { Component, forwardRef, Input, ViewEncapsulation } from '@angular/core';
import { Component, forwardRef, Input, ViewEncapsulation, NgZone } from '@angular/core';
import { UploadBase } from './base-upload/upload-base';
@Component({
@@ -43,8 +43,9 @@ export class UploadDragAreaComponent extends UploadBase implements NodePermissio
constructor(protected uploadService: UploadService,
protected translationService: TranslationService,
private notificationService: NotificationService,
private contentService: ContentService) {
super(uploadService, translationService);
private contentService: ContentService,
protected ngZone: NgZone) {
super(uploadService, translationService, ngZone);
}
/**

45
lib/content-services/upload/components/upload-files.event.ts Normal file
View File

@@ -0,0 +1,45 @@
/*!
* @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, UploadService } from '@alfresco/adf-core';
export class UploadFilesEvent {
private isDefaultPrevented: boolean = false;
get defaultPrevented() {
return this.isDefaultPrevented;
}
preventDefault() {
this.isDefaultPrevented = true;
}
constructor(public files: Array<FileModel>, private uploadService: UploadService) {
}
pauseUpload() {
this.preventDefault();
}
resumeUpload() {
if (this.files && this.files.length > 0) {
this.uploadService.addToQueue(...this.files);
this.uploadService.uploadFilesInTheQueue();
}
}
}

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

@@ -21,6 +21,7 @@ export * from './components/file-uploading-dialog.component';
export * from './components/upload-drag-area.component';
export * from './components/file-uploading-list.component';
export * from './components/file-uploading-list-row.component';
export * from './components/upload-files.event';
export * from './directives/file-draggable.directive';