[ADF-3095] ability to intercept, pause and resume upload process (#3416)

* 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

demo-shell/resources/i18n/en.json

@@ -12,7 +12,8 @@
       "ALLOW_DOWNLOAD" :"Enable version download",
       "READ_ONLY" : "Read only"
     },
-    "PERSONAL-FILES": "Personal Files"
+    "PERSONAL-FILES": "Personal Files",
+    "WARN-MULTIPLE-UPLOADS": "Warn on multiple uploads"
   },
     "title": "Welcome",
     "VERSION": {

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

@@ -39,7 +39,8 @@
                               [rootFolderId]="getDocumentListCurrentFolderId()"
                               [versioning]="versioning"
                               [adf-node-permission]="'create'"
-                              [adf-nodes]="disableDragArea ? getCurrentDocumentListNode() : []">
+                              [adf-nodes]="disableDragArea ? getCurrentDocumentListNode() : []"
+                              (beginUpload)="onBeginUpload($event)">
             <div *ngIf="errorMessage" class="error-message">
                 <button (click)="resetError()" mat-icon-button>
                     <mat-icon>highlight_off</mat-icon>
@@ -500,6 +501,12 @@
             </mat-slide-toggle>
         </section>
 
+        <section>
+            <mat-slide-toggle color="primary" [(ngModel)]="warnOnMultipleUploads">
+                {{'APP.WARN-MULTIPLE-UPLOADS' | translate}}
+            </mat-slide-toggle>
+        </section>
+
         <h5>Upload</h5>
         <section *ngIf="acceptedFilesTypeShow">
             <mat-form-field floatPlaceholder="float">

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

@@ -31,7 +31,7 @@ import {
     PaginationComponent, FormValues, DisplayMode, UserPreferenceValues, InfinitePaginationComponent
 } from '@alfresco/adf-core';
 
-import { DocumentListComponent, PermissionStyleModel } from '@alfresco/adf-content-services';
+import { DocumentListComponent, PermissionStyleModel, UploadFilesEvent, ConfirmDialogComponent } from '@alfresco/adf-content-services';
 
 import { SelectAppsDialogComponent } from '@alfresco/adf-process-services';
 
@@ -177,6 +177,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
     infiniteScrolling: boolean;
     supportedPages: number[];
     currentSiteid = '';
+    warnOnMultipleUploads = false;
 
     private onCreateFolder: Subscription;
     private onEditFolder: Subscription;
@@ -513,4 +514,27 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
         }
         return false;
     }
+
+    onBeginUpload(event: UploadFilesEvent) {
+        if (this.warnOnMultipleUploads && event) {
+            const files = event.files || [];
+            if (files.length > 1) {
+                event.pauseUpload();
+
+                const dialogRef = this.dialog.open(ConfirmDialogComponent, {
+                    data: {
+                        title: 'Upload',
+                        message: `Are you sure you want to upload ${files.length} file(s)?`
+                    },
+                    minWidth: '250px'
+                });
+
+                dialogRef.afterClosed().subscribe(result => {
+                    if (result === true) {
+                        event.resumeUpload();
+                    }
+                });
+            }
+        }
+    }
 }

docs/content-services/upload-drag-area.component.md

@@ -48,7 +48,64 @@ export class AppComponent {
 ### Events
 
 | Name | Type | Description |
-| -- | -- | -- |
+| --- | --- | --- |
-| createFolder | `EventEmitter<Object>` | Emitted when a folder is created. |
+| beginUpload | `EventEmitter<UploadFilesEvent>()` | Raised after files or folders dropped and before the upload process starts. |
-| error | `EventEmitter<Object>` | Emitted when an error occurs. |
+| createFolder | `EventEmitter<Object>` | **Deprecated:** No longer used by the framework |
-| success | `EventEmitter<Object>` | Emitted when the file is uploaded successfully. |
+| error | `EventEmitter<Object>` | Emitted when the file is uploaded successfully. |
+| success | `EventEmitter<Object>` | Emitted when an error occurs. |
+
+## Intercepting uploads
+
+You can intercept the upload process by utilizing the `beginUpload` event. 
+
+The event has a type of `UploadFilesEvent` and provides the following APIs:
+
+* **files**: get access to the FileInfo objects that are prepared for the upload
+* **pauseUpload**: pause the upload and perform additional tasks, like showing the confirmation dialog
+* **resumeUpload**: resume the upload process
+
+## Example
+
+Wire the `beginUpload` event at the template level
+
+```html
+<adf-upload-drag-area (beginUpload)="onBeginUpload($event)" ...>
+    ...
+</adf-upload-drag-area>
+```
+
+Create the `onBeginUpload` handler that invokes a confirmation dialog
+
+```ts
+import { UploadFilesEvent, ConfirmDialogComponent } from '@alfresco/adf-content-services';
+
+@Component({...})
+export class MyComponent {
+
+    onBeginUpload(event: UploadFilesEvent) {
+        const files = event.files || [];
+
+        if (files.length > 1) {
+            event.pauseUpload();
+
+            const dialogRef = this.dialog.open(ConfirmDialogComponent, {
+                data: {
+                    title: 'Upload',
+                    message: `Are you sure you want to upload ${files.length} file(s)?`
+                },
+                minWidth: '250px'
+            });
+
+            dialogRef.afterClosed().subscribe(result => {
+                if (result === true) {
+                    event.resumeUpload();
+                }
+            });
+        }
+    }
+
+}
+```
+
+The example above is going to raise confirmation dialog every time a user uploads more than 1 file.
+That can be either 2 or more files, or a folder with multiple entries.

lib/content-services/upload/components/base-upload/upload-base.spec.ts

@@ -15,22 +15,24 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
+import { Component, NgZone } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+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) {
+                protected translationService: TranslationService,
-        super(uploadService, 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[] = [

lib/content-services/upload/components/base-upload/upload-base.ts

@@ -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,14 +124,21 @@ export abstract class UploadBase {
             .filter(this.isFileAcceptable.bind(this))
             .filter(this.isFileSizeAcceptable.bind(this));
 
+        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);
-            this.uploadService.fileUploadError.subscribe((error) => {
-                this.error.emit(error);
-            });
                 }
             }
+        });
+    }
 
     /**
      * Checks if the given file is allowed by the extension filters
@@ -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) => {
+            const message = this.translationService.instant(
+                'FILE_UPLOAD.MESSAGES.EXCEED_MAX_FILE_SIZE',
+                { fileName: file.name }
+            );
+
             this.error.emit(message);
-            });
         }
 
         return acceptableSize;

lib/content-services/upload/components/upload-button.component.ts

@@ -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) {
+                protected logService: LogService,
-        super(uploadService, translationService);
+                protected ngZone: NgZone) {
+        super(uploadService, translationService, ngZone);
     }
 
     ngOnInit() {

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

@@ -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) {
+                private contentService: ContentService,
-        super(uploadService, translationService);
+                protected ngZone: NgZone) {
+        super(uploadService, translationService, ngZone);
     }
 
     /**

lib/content-services/upload/components/upload-files.event.ts

@@ -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();
+        }
+    }
+}

lib/content-services/upload/public-api.ts

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

lib/core/services/upload.service.ts

@@ -98,7 +98,7 @@ export class UploadService {
      * Finds all the files in the queue that are not yet uploaded and uploads them into the directory folder.
      * @param emitter (Deprecated) Emitter to invoke on file status change
      */
-    uploadFilesInTheQueue(emitter: EventEmitter<any>): void {
+    uploadFilesInTheQueue(emitter?: EventEmitter<any>): void {
         if (!this.activeTask) {
             let file = this.queue.find(currentFile => currentFile.status === FileUploadStatus.Pending);
             if (file) {
@@ -200,15 +200,21 @@ export class UploadService {
         })
             .on('abort', () => {
                 this.onUploadAborted(file);
+                if (emitter) {
                     emitter.emit({ value: 'File aborted' });
+                }
             })
             .on('error', err => {
                 this.onUploadError(file, err);
+                if (emitter) {
                     emitter.emit({ value: 'Error file uploaded' });
+                }
             })
             .on('success', data => {
                 this.onUploadComplete(file, data);
+                if (emitter) {
                     emitter.emit({ value: data });
+                }
             })
             .catch(err => {
                 throw err;