[ADF-2563] Upload new version information dialog (#3235)

* add majorVersion param
move common part in base class

* refactor upload queue

* fix after refactoring

* add comment functionality in versioning
add minor and major option in versioning
add animation in versioning
add new functionality in demo shell

* add animation test

* add missing properties test and base upload class

* fix reload after new version upload [ADF-2582]

* update documentation

* update doc and fix minor style issues

* fix tslint error

* change cachebuster

* ADF-2672 version manager disable buttons

* [ADF-2649] hide show actions in version list

* fix tests

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

@@ -0,0 +1,268 @@
+/*!
+ * @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 { Component } from '@angular/core';
+import { ComponentFixture, TestBed } 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';
+
+@Component({
+    selector: 'adf-upload-button-test',
+    template: 'test componente';
+})
+
+export class UploadTestComponent extends UploadBase {
+
+    constructor(protected uploadService: UploadService,
+                protected translationService: TranslationService) {
+        super(uploadService, translationService);
+    }
+}
+
+describe('UploadBase', () => {
+
+    let component: UploadTestComponent;
+    let fixture: ComponentFixture<UploadTestComponent>;
+    let uploadService: UploadService;
+
+    setupTestBed({
+        imports: [
+            NoopAnimationsModule,
+            CoreModule.forRoot()
+        ],
+        declarations: [
+            UploadTestComponent
+        ],
+        providers: [
+            UploadService,
+            { provide: TranslationService, useClass: TranslationMock }
+        ]
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(UploadTestComponent);
+        uploadService = TestBed.get(UploadService);
+
+        spyOn(FileModel.prototype, 'generateId').and.returnValue('test');
+
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    afterEach(() => {
+        fixture.destroy();
+        TestBed.resetTestingModule();
+    });
+
+    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 filter out all files if maxFilesSize is 0', () => {
+            component.maxFilesSize = 0;
+
+            component.uploadFiles(files);
+
+            expect(addToQueueSpy.calls.mostRecent()).toBeUndefined();
+        });
+
+        it('should allow file of 0 size when the max file size is set to 0', () => {
+            const zeroFiles: File[] = [
+                <File> { name: 'zeroFile.png', size: 0 }
+            ];
+            component.maxFilesSize = 0;
+
+            component.uploadFiles(zeroFiles);
+
+            expect(addToQueueSpy.calls.mostRecent()).toBeDefined();
+        });
+
+        it('should filter out all files if maxFilesSize is <0', () => {
+            component.maxFilesSize = -2;
+
+            component.uploadFiles(files);
+
+            expect(addToQueueSpy.calls.mostRecent()).toBeUndefined();
+        });
+
+        it('should output an error when you try to upload a file too big', (done) => {
+            component.maxFilesSize = 100;
+
+            component.error.subscribe(() => {
+                done();
+            });
+
+            component.uploadFiles(files);
+        });
+
+        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' }
+        ];
+
+        let addToQueueSpy;
+
+        beforeEach(() => {
+            addToQueueSpy = spyOn(uploadService, 'addToQueue');
+        });
+
+        it('should filter out file, which is not part of the acceptedFilesType', () => {
+            component.acceptedFilesType = '.jpg';
+
+            component.uploadFiles(files);
+
+            const filesCalledWith = addToQueueSpy.calls.mostRecent().args;
+            expect(filesCalledWith.length).toBe(1, 'Files should contain only one element');
+            expect(filesCalledWith[0].name).toBe('phobos.jpg', 'png file should be filtered out');
+        });
+
+        it('should filter out files, which are not part of the acceptedFilesType', () => {
+            component.acceptedFilesType = '.jpg,.png';
+
+            component.uploadFiles(files);
+
+            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.png');
+        });
+
+        it('should not filter out anything if acceptedFilesType is wildcard', () => {
+            component.acceptedFilesType = '*';
+
+            component.uploadFiles(files);
+
+            const filesCalledWith = addToQueueSpy.calls.mostRecent().args;
+            expect(filesCalledWith.length).toBe(3, 'Files should contain all elements');
+            expect(filesCalledWith[0].name).toBe('phobos.jpg');
+            expect(filesCalledWith[1].name).toBe('deimos.png');
+            expect(filesCalledWith[2].name).toBe('ganymede.bmp');
+        });
+
+        it('should not add any file to que if everything is filtered out', () => {
+            component.acceptedFilesType = 'doc';
+
+            component.uploadFiles(files);
+
+            expect(addToQueueSpy).not.toHaveBeenCalled();
+        });
+    });
+
+    describe('Comments', () => {
+
+        let addToQueueSpy;
+
+        const files: File[] = [
+            <File> { name: 'phobos.jpg' }
+        ];
+
+        beforeEach(() => {
+            addToQueueSpy = spyOn(uploadService, 'addToQueue');
+        });
+
+        it('should add the comment in the uploaded files', () => {
+            component.comment = 'example-comment';
+
+            component.uploadFiles(files);
+
+            expect(addToQueueSpy).toHaveBeenCalledWith(new FileModel(files[0], {
+                comment: 'example-comment'
+                newVersion: false,
+                majorVersion: false,
+                parentId: '-root-',
+                path: ''
+            }));
+        });
+    });
+
+    describe('Versions', () => {
+
+        let addToQueueSpy;
+
+        const files: File[] = [
+            <File> { name: 'phobos.jpg' }
+        ];
+
+        beforeEach(() => {
+            addToQueueSpy = spyOn(uploadService, 'addToQueue');
+        });
+
+        it('should be a mahor version upload if majorVersion is true', () => {
+            component.majorVersion = true;
+            component.versioning = true;
+
+            component.uploadFiles(files);
+
+            expect(addToQueueSpy).toHaveBeenCalledWith(new FileModel(files[0], {
+                comment: undefined,
+                newVersion: true,
+                majorVersion: true,
+                parentId: '-root-',
+                path: ''
+            }));
+        });
+
+        it('should not  be a mahor version upload if majorVersion is false', () => {
+            component.majorVersion = false;
+            component.versioning = true;
+
+            component.uploadFiles(files);
+
+            expect(addToQueueSpy).toHaveBeenCalledWith(new FileModel(files[0], {
+                comment: undefined,
+                newVersion: true,
+                majorVersion: false,
+                parentId: '-root-',
+                path: ''
+            }));
+        });
+    });
+});

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

@@ -15,16 +15,98 @@
  * limitations under the License.
  */
 
-import { FileModel } from '@alfresco/adf-core';
-import { Input } from '@angular/core';
+import { FileModel, FileInfo } from '@alfresco/adf-core';
+import { EventEmitter, Input, Output } from '@angular/core';
+import { UploadService, TranslationService } from '@alfresco/adf-core';
 
 export abstract class UploadBase {
 
+    /** Sets a limit on the maximum size (in bytes) of a file to be uploaded.
+     * Has no effect if undefined.
+     */
+    @Input()
+    maxFilesSize: number;
+
+    /** The ID of the root. Use the nodeId for
+     * Content Services or the taskId/processId for Process Services.
+     */
+    @Input()
+    rootFolderId: string = '-root-';
+
+    /** Toggles component disabled state (if there is no node permission checking). */
+    @Input()
+    disabled: boolean = false;
+
     /** Filter for accepted file types. */
     @Input()
     acceptedFilesType: string = '*';
 
-    constructor() {}
+    /** Toggles versioning. */
+    @Input()
+    versioning: boolean = false;
+
+    /** majorVersion boolean field to true to indicate a major version should be created. */
+    @Input()
+    majorVersion: boolean = false;
+
+    /** When you overwrite existing content, you can use the comment field to add a version comment that appears in the version history */
+    @Input()
+    comment: string;
+
+    /** Emitted when the file is uploaded successfully. */
+    @Output()
+    success = new EventEmitter();
+
+    /** @deprecated 2.4.0 */
+    /** Emitted when a folder is created. */
+    @Output()
+    createFolder = new EventEmitter();
+
+    /** Emitted when an error occurs. */
+    @Output()
+    error = new EventEmitter();
+
+    constructor(protected uploadService: UploadService,
+                protected translationService: TranslationService) {
+    }
+
+    /**
+     * Upload a list of file in the specified path
+     * @param files
+     * @param path
+     */
+    uploadFiles(files: File[]): void {
+        const filteredFiles: FileModel[] = files
+            .map<FileModel>((file: File) => {
+                return this.createFileModel(file, this.rootFolderId, (file.webkitRelativePath || '').replace(/\/[^\/]*$/, ''));
+            });
+
+        this.uploadQueue(filteredFiles);
+    }
+
+    uploadFilesInfo(files: FileInfo[]): void {
+        const filteredFiles: FileModel[] = files
+            .map<FileModel>((fileInfo: FileInfo) => {
+                return this.createFileModel(fileInfo.file, this.rootFolderId, fileInfo.relativeFolder);
+            });
+
+        this.uploadQueue(filteredFiles);
+    }
+
+    private uploadQueue(files: FileModel[]) {
+        let filteredFiles = files
+            .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);
+            });
+        }
+    }
+
     /**
      * Checks if the given file is allowed by the extension filters
      *
@@ -45,4 +127,56 @@ export abstract class UploadBase {
 
         return false;
     }
+
+    /**
+     * Creates FileModel from File
+     *
+     * @param file
+     */
+    protected createFileModel(file: File, parentId: string, path: string): FileModel {
+        return new FileModel(file, {
+            comment: this.comment,
+            majorVersion: this.majorVersion,
+            newVersion: this.versioning,
+            parentId: parentId,
+            path: path
+        });
+    }
+
+    protected isFileSizeAllowed(file: FileModel) {
+        let isFileSizeAllowed = true;
+        if (this.isMaxFileSizeDefined()) {
+            isFileSizeAllowed = this.isFileSizeCorrect(file);
+        }
+
+        return isFileSizeAllowed;
+    }
+
+    protected isMaxFileSizeDefined() {
+        return this.maxFilesSize !== undefined && this.maxFilesSize !== null;
+    }
+
+    protected isFileSizeCorrect(file: FileModel) {
+        return this.maxFilesSize >= 0 && file.size <= this.maxFilesSize;
+    }
+
+    /**
+     * Checks if the given file is an acceptable size
+     *
+     * @param file FileModel
+     */
+    private isFileSizeAcceptable(file: FileModel): boolean {
+        let acceptableSize = true;
+
+        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);
+            });
+        }
+
+        return acceptableSize;
+    }
+
 }

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

@@ -15,11 +15,14 @@
  * limitations under the License.
  */
 
-import { ContentService, EXTENDIBLE_COMPONENT, FileModel, FileUtils,
-    LogService, NodePermissionSubject, TranslationService, UploadService
+import {
+    ContentService, EXTENDIBLE_COMPONENT, FileUtils,
+    LogService, NodePermissionSubject, TranslationService, UploadService, PermissionsEnum
 } from '@alfresco/adf-core';
-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 { Subject } from 'rxjs/Subject';
 import { PermissionModel } from '../../document-list/models/permissions.model';
 import 'rxjs/add/observable/throw';
@@ -36,10 +39,6 @@ import { UploadBase } from './base-upload/upload-base';
 })
 export class UploadButtonComponent extends UploadBase implements OnInit, OnChanges, NodePermissionSubject {
 
-    /** Toggles component disabled state (if there is no node permission checking). */
-    @Input()
-    disabled: boolean = false;
-
     /** Allows/disallows upload folders (only for Chrome). */
     @Input()
     uploadFolders: boolean = false;
@@ -48,16 +47,6 @@ export class UploadButtonComponent extends UploadBase implements OnInit, OnChang
     @Input()
     multipleFiles: boolean = false;
 
-    /** Toggles versioning. */
-    @Input()
-    versioning: boolean = false;
-
-    /** Sets a limit on the maximum size (in bytes) of a file to be uploaded.
-     * Has no effect if undefined.
-     */
-    @Input()
-    maxFilesSize: number;
-
     /** Defines the text of the upload button. */
     @Input()
     staticTitle: string;
@@ -66,25 +55,7 @@ export class UploadButtonComponent extends UploadBase implements OnInit, OnChang
     @Input()
     tooltip: string = null;
 
-    /** The ID of the root. Use the nodeId for
-     * Content Services or the taskId/processId for Process Services.
-     */
-    @Input()
-    rootFolderId: string = '-root-';
-
-    /** Emitted when the file is uploaded successfully. */
-    @Output()
-    success = new EventEmitter();
-
-    /** Emitted when an error occurs. */
-    @Output()
-    error = new EventEmitter();
-
-    /** Emitted when a folder is created. */
-    @Output()
-    createFolder = new EventEmitter();
-
-    /** Emitted when delete permission is missing. */
+    /** Emitted when create permission is missing. */
     @Output()
     permissionEvent: EventEmitter<PermissionModel> = new EventEmitter<PermissionModel>();
 
@@ -92,12 +63,11 @@ export class UploadButtonComponent extends UploadBase implements OnInit, OnChang
 
     private permissionValue: Subject<boolean> = new Subject<boolean>();
 
-    constructor(private uploadService: UploadService,
+    constructor(protected uploadService: UploadService,
                 private contentService: ContentService,
-                protected translateService: TranslationService,
-                protected logService: LogService
-            ) {
-                super();
+                protected translationService: TranslationService,
+                protected logService: LogService) {
+        super(uploadService, translationService);
     }
 
     ngOnInit() {
@@ -123,7 +93,7 @@ export class UploadButtonComponent extends UploadBase implements OnInit, OnChang
         if (this.hasPermission) {
             this.uploadFiles(files);
         } else {
-            this.permissionEvent.emit(new PermissionModel({type: 'content', action: 'upload', permission: 'create'}));
+            this.permissionEvent.emit(new PermissionModel({ type: 'content', action: 'upload', permission: 'create' }));
         }
         // reset the value of the input file
         $event.target.value = '';
@@ -134,73 +104,12 @@ export class UploadButtonComponent extends UploadBase implements OnInit, OnChang
             let files: File[] = FileUtils.toFileArray($event.currentTarget.files);
             this.uploadFiles(files);
         } else {
-            this.permissionEvent.emit(new PermissionModel({type: 'content', action: 'upload', permission: 'create'}));
+            this.permissionEvent.emit(new PermissionModel({ type: 'content', action: 'upload', permission: 'create' }));
         }
         // reset the value of the input file
         $event.target.value = '';
     }
 
-    /**
-     * Upload a list of file in the specified path
-     * @param files
-     * @param path
-     */
-    uploadFiles(files: File[]): void {
-        const latestFilesAdded: FileModel[] = files
-            .map<FileModel>(this.createFileModel.bind(this))
-            .filter(this.isFileAcceptable.bind(this))
-            .filter(this.isFileSizeAcceptable.bind(this));
-
-        if (latestFilesAdded.length > 0) {
-            this.uploadService.addToQueue(...latestFilesAdded);
-            this.uploadService.uploadFilesInTheQueue(this.success);
-        }
-    }
-
-    /**
-     * Creates FileModel from File
-     *
-     * @param file
-     */
-    protected createFileModel(file: File): FileModel {
-        return new FileModel(file, {
-            newVersion: this.versioning,
-            parentId: this.rootFolderId,
-            path: (file.webkitRelativePath || '').replace(/\/[^\/]*$/, '')
-        });
-    }
-
-    /**
-     * Checks if the given file is an acceptable size
-     *
-     * @param file FileModel
-     */
-    private isFileSizeAcceptable(file: FileModel): boolean {
-        let acceptableSize = true;
-
-        if (this.isFileSizeAllowed(file)) {
-            acceptableSize = false;
-
-            this.translateService.get('FILE_UPLOAD.MESSAGES.EXCEED_MAX_FILE_SIZE', {fileName: file.name}).subscribe((message: string) => {
-                this.error.emit(message);
-            });
-        }
-
-        return acceptableSize;
-    }
-
-    private isFileSizeAllowed(file: FileModel) {
-        return this.isMaxFileSizeDefined() && this.isFileSizeCorrect(file);
-    }
-
-    private isMaxFileSizeDefined() {
-        return this.maxFilesSize !== undefined && this.maxFilesSize !== null;
-    }
-
-    private isFileSizeCorrect(file: FileModel) {
-        return this.maxFilesSize < 0 || file.size > this.maxFilesSize;
-    }
-
     checkPermission() {
         if (this.rootFolderId) {
             let opts: any = {
@@ -209,16 +118,9 @@ export class UploadButtonComponent extends UploadBase implements OnInit, OnChang
             };
 
             this.contentService.getNode(this.rootFolderId, opts).subscribe(
-                res => this.permissionValue.next(this.hasCreatePermission(res.entry)),
+                res => this.permissionValue.next(this.contentService.hasPermission(res.entry, PermissionsEnum.CREATE)),
                 error => this.error.emit(error)
             );
         }
     }
-
-    private hasCreatePermission(node: any): boolean {
-        if (node && node.allowableOperations) {
-            return node.allowableOperations.find(permission => permission === 'create') ? true : false;
-        }
-        return false;
-    }
 }

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

@@ -16,23 +16,17 @@
  */
 
 import {
-    EXTENDIBLE_COMPONENT,
-    FileInfo,
-    FileModel,
-    FileUtils,
-    NodePermissionSubject,
-    NotificationService,
-    TranslationService,
-    UploadService
+    EXTENDIBLE_COMPONENT, FileInfo, FileModel, FileUtils, NodePermissionSubject,
+    NotificationService, TranslationService, UploadService, ContentService, PermissionsEnum
 } from '@alfresco/adf-core';
-import { Component, EventEmitter, forwardRef, Input, Output, ViewEncapsulation } from '@angular/core';
+import { Component, forwardRef, Input, ViewEncapsulation } from '@angular/core';
 import { UploadBase } from './base-upload/upload-base';
 
 @Component({
     selector: 'adf-upload-drag-area',
     templateUrl: './upload-drag-area.component.html',
     styleUrls: ['./upload-drag-area.component.css'],
-    host: {'class': 'adf-upload-drag-area'},
+    host: { 'class': 'adf-upload-drag-area' },
     viewProviders: [
         { provide: EXTENDIBLE_COMPONENT, useExisting: forwardRef(() => UploadDragAreaComponent) }
     ],
@@ -40,32 +34,17 @@ import { UploadBase } from './base-upload/upload-base';
 })
 export class UploadDragAreaComponent extends UploadBase implements NodePermissionSubject {
 
-    /** Toggle component disabled state. */
+    /** @deprecaretd 2.4.0  use rootFolderId ID of parent folder node. */
     @Input()
-    disabled: boolean = false;
+    set parentId(nodeId: string) {
+        this.rootFolderId = nodeId;
+    }
 
-    /** When false, renames the file using an integer suffix if there is a name clash.
-     * Set to true to indicate that a major version should be created instead.
-     */
-    @Input()
-    versioning: boolean = false;
-
-    /** ID of parent folder node. */
-    @Input()
-    parentId: string;
-
-    /** Emitted when the file is uploaded. */
-    @Output()
-    success = new EventEmitter();
-
-    /** Raised when the file upload goes in error. */
-    @Output()
-    error = new EventEmitter();
-
-    constructor(private uploadService: UploadService,
-                private translateService: TranslationService,
-                private notificationService: NotificationService) {
-                    super();
+    constructor(protected uploadService: UploadService,
+                protected translationService: TranslationService,
+                private notificationService: NotificationService,
+                private contentService: ContentService) {
+        super(uploadService, translationService);
     }
 
     /**
@@ -75,12 +54,7 @@ export class UploadDragAreaComponent extends UploadBase implements NodePermissio
      */
     onFilesDropped(files: File[]): void {
         if (!this.disabled && files.length) {
-            const fileModels = files.map(file => new FileModel(file, {
-                newVersion: this.versioning,
-                path: '/',
-                parentId: this.parentId
-            })).filter(this.isFileAcceptable.bind(this));
-            this.addNodeInUploadQueue(fileModels);
+            this.uploadFiles(files);
         }
     }
 
@@ -92,14 +66,9 @@ export class UploadDragAreaComponent extends UploadBase implements NodePermissio
     onFilesEntityDropped(item: any): void {
         if (!this.disabled) {
             item.file((file: File) => {
-                const fileModel = new FileModel(file, {
-                    newVersion: this.versioning,
-                    parentId: this.parentId,
-                    path: item.fullPath.replace(item.name, '')
-                });
-                if (this.isFileAcceptable(fileModel)) {
-                    this.addNodeInUploadQueue([fileModel]);
-                }
+                // const fileModel = this.createFileModel(file, this.rootFolderId, item.fullPath.replace(item.name, ''));
+
+                this.uploadFiles([file]);
             });
         }
     }
@@ -111,29 +80,12 @@ export class UploadDragAreaComponent extends UploadBase implements NodePermissio
      */
     onFolderEntityDropped(folder: any): void {
         if (!this.disabled && folder.isDirectory) {
-            FileUtils.flattern(folder).then(entries => {
-                let files = entries.map(entry => {
-                    return new FileModel(entry.file, {
-                        newVersion: this.versioning,
-                        parentId: this.parentId,
-                        path: entry.relativeFolder
-                    });
-                }).filter(this.isFileAcceptable.bind(this));
-                this.addNodeInUploadQueue(files);
+            FileUtils.flattern(folder).then(filesInfo => {
+                this.uploadFilesInfo(filesInfo);
             });
         }
     }
 
-    private addNodeInUploadQueue(files: FileModel[]) {
-        if (files.length) {
-            this.uploadService.addToQueue(...files);
-            this.uploadService.uploadFilesInTheQueue(this.success);
-            this.uploadService.fileUploadError.subscribe((error) => {
-                this.error.emit(error);
-                });
-        }
-    }
-
     /**
      * Show undo notification bar.
      *
@@ -141,8 +93,8 @@ export class UploadDragAreaComponent extends UploadBase implements NodePermissio
      */
     showUndoNotificationBar(latestFilesAdded: FileModel[]) {
         let messageTranslate: any, actionTranslate: any;
-        messageTranslate = this.translateService.get('FILE_UPLOAD.MESSAGES.PROGRESS');
-        actionTranslate = this.translateService.get('FILE_UPLOAD.ACTION.UNDO');
+        messageTranslate = this.translationService.get('FILE_UPLOAD.MESSAGES.PROGRESS');
+        actionTranslate = this.translationService.get('FILE_UPLOAD.ACTION.UNDO');
 
         this.notificationService.openSnackMessageAction(messageTranslate.value, actionTranslate.value, 3000).onAction().subscribe(() => {
             this.uploadService.cancelUpload(...latestFilesAdded);
@@ -162,35 +114,13 @@ export class UploadDragAreaComponent extends UploadBase implements NodePermissio
     onUploadFiles(event: CustomEvent) {
         event.stopPropagation();
         event.preventDefault();
-        let isAllowed: boolean = this.hasCreatePermission(event.detail.data.obj.entry);
+        let isAllowed: boolean = this.contentService.hasPermission(event.detail.data.obj.entry, PermissionsEnum.CREATE);
         if (isAllowed) {
-            let files: FileInfo[] = event.detail.files;
-            if (files && files.length > 0) {
-                let parentId = this.parentId;
-                if (event.detail.data && event.detail.data.obj.entry.isFolder) {
-                    parentId = event.detail.data.obj.entry.id || this.parentId;
-                }
-                const fileModels = files.map(fileInfo => new FileModel(fileInfo.file, {
-                    newVersion: this.versioning,
-                    path: fileInfo.relativeFolder,
-                    parentId: parentId
-                })).filter(this.isFileAcceptable.bind(this));
-                this.addNodeInUploadQueue(fileModels);
+            let fileInfo: FileInfo[] = event.detail.files;
+            if (fileInfo && fileInfo.length > 0) {
+                this.uploadFilesInfo(fileInfo);
             }
         }
     }
 
-    /**
-     * Check if "create" permission is present on the given node
-     *
-     * @param node
-     */
-    private hasCreatePermission(node: any): boolean {
-        let isPermitted = false;
-        if (node && node['allowableOperations']) {
-            let permFound = node['allowableOperations'].find(element => element === 'create');
-            isPermitted = permFound ? true : false;
-        }
-        return isPermitted;
-    }
 }

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

@@ -39,18 +39,19 @@ export class UploadVersionButtonComponent extends UploadButtonComponent implemen
         super.ngOnChanges(changes);
 
         if (changes['acceptedFilesType']) {
-            const message = this.translateService.instant('FILE_UPLOAD.VERSION.MESSAGES.NO_ACCEPTED_FILE_TYPES');
+            const message = this.translationService.instant('FILE_UPLOAD.VERSION.MESSAGES.NO_ACCEPTED_FILE_TYPES');
             this.logService.error(message);
         }
         this.acceptedFilesType = '.' + this.node.name.split('.').pop();
     }
 
     protected createFileModel(file: File): FileModel {
-        const fileModel = super.createFileModel(file);
+        const fileModel = super.createFileModel(file, this.rootFolderId, (file.webkitRelativePath || '').replace(/\/[^\/]*$/, ''));
+
         fileModel.options.newVersionBaseName = this.node.name;
 
         if (!this.isFileAcceptable(fileModel)) {
-            const message = this.translateService.instant('FILE_UPLOAD.VERSION.MESSAGES.INCOMPATIBLE_VERSION');
+            const message = this.translationService.instant('FILE_UPLOAD.VERSION.MESSAGES.INCOMPATIBLE_VERSION');
             this.error.emit(message);
         }