Alfresco · eromano · May 20, 2020 · May 18, 2020 · May 18, 2020 · May 18, 2020
@@ -120,6 +120,7 @@
     "MULTISELECT_CHECKBOXES": "Multiselect (with checkboxes)",
     "THUMBNAILS": "Enable Thumbnails",
     "ALLOW_DROP_FILES": "Enable Drop Files in a folder",
+    "ALLOW_DROP_FILE_VERSION": "Enable Drop File in a file to change version",
     "MULTIPLE_FILE_UPLOAD": "Multiple File Upload",
     "FOLDER_UPLOAD": "Folder upload",
     "CUSTOM_FILTER": "Custom extensions filter",

@@ -41,7 +41,8 @@
                               [versioning]="versioning"
                               [adf-check-allowable-operation]="'create'"
                               [adf-nodes]="disableDragArea ? getCurrentDocumentListNode() : []"
-                              (beginUpload)="onBeginUpload($event)">
+                              (beginUpload)="onBeginUpload($event)"
+                              (updateFileVersion)="onUploadNewVersion($event)">
             <div *ngIf="errorMessage" class="app-error-message">
                 <button (click)="resetError()" mat-icon-button>
                     <mat-icon>highlight_off</mat-icon>
@@ -226,6 +227,7 @@
                 [contextMenuActions]="true"
                 [contentActions]="true"
                 [allowDropFiles]="allowDropFiles"
+                [allowDropFileVersion]="allowDropFileVersion"
                 [selectionMode]="selectionMode"
                 [multiselect]="multiselect"
                 [display]="displayMode"
@@ -571,6 +573,13 @@ <h1>You don't have permissions</h1>
             </mat-slide-toggle>
         </section>
 
+        <section>
+            <mat-slide-toggle id="adf-document-list-enable-drop-file-version" [color]="'primary'" [(ngModel)]="allowDropFileVersion"
+                              (click)="toggleAllowDropFileVersion()">
+                {{'DOCUMENT_LIST.ALLOW_DROP_FILE_VERSION' | translate}}
+            </mat-slide-toggle>
+        </section>
+
         <section>
             <mat-slide-toggle id="adf-version-upload-switch" [color]="'primary'" [(ngModel)]="versioning">
                 {{'DOCUMENT_LIST.ENABLE_VERSIONING' | translate}}

@@ -65,6 +65,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
     showViewer = false;
     showVersions = false;
     allowDropFiles = true;
+    allowDropFileVersion = true;
     displayMode = DisplayMode.List;
     includeFields = ['isFavorite', 'isLocked', 'aspectNames'];
 
@@ -75,9 +76,9 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
     toolbarColor = 'default';
 
     selectionModes = [
-        { value: 'none', viewValue: 'None' },
-        { value: 'single', viewValue: 'Single' },
-        { value: 'multiple', viewValue: 'Multiple' }
+        {value: 'none', viewValue: 'None'},
+        {value: 'single', viewValue: 'Single'},
+        {value: 'multiple', viewValue: 'Multiple'}
     ];
 
     // The identifier of a node. You can also use one of these well-known aliases: -my- | -shared- | -root-
@@ -240,6 +241,10 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
         this.documentList.reload();
     }
 
+    toggleAllowDropFileVersion() {
+        this.documentList.reload();
+    }
+
     ngOnInit() {
         if (!this.pagination) {
             this.pagination = <Pagination> {
@@ -322,7 +327,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
 
     getCurrentDocumentListNode(): MinimalNodeEntity[] {
         if (this.documentList.folderNode) {
-            return [{ entry: this.documentList.folderNode }];
+            return [{entry: this.documentList.folderNode}];
         } else {
             return [];
         }
@@ -427,7 +432,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
 
         if (this.contentService.hasAllowableOperations(contentEntry, 'update')) {
             this.dialog.open(VersionManagerDialogAdapterComponent, {
-                data: { contentEntry: contentEntry, showComments: showComments, allowDownload: allowDownload },
+                data: {contentEntry: contentEntry, showComments: showComments, allowDownload: allowDownload},
                 panelClass: 'adf-version-manager-dialog',
                 width: '630px'
             });
@@ -591,6 +596,27 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
         this.logService.log(event);
     }
 
+    onUploadNewVersion(ev) {
+        const contentEntry = ev.detail.data.node.entry;
+        const showComments = this.showVersionComments;
+        const allowDownload = this.allowVersionDownload;
+        const newFileVersion = ev.detail.files[0].file;
+
+        if (this.contentService.hasAllowableOperations(contentEntry, 'update')) {
+            this.dialog.open(VersionManagerDialogAdapterComponent, {
+                data: {
+                    contentEntry: contentEntry, showComments: showComments, allowDownload: allowDownload,
+                    newFileVersion: newFileVersion, showComparison: true
+                },
+                panelClass: 'adf-version-manager-dialog',
+                width: '630px'
+            });
+        } else {
+            const translatedErrorMessage: any = this.translateService.instant('OPERATION.ERROR.PERMISSION');
+            this.openSnackMessage(translatedErrorMessage);
+        }
+    }
+
     getFileFiltering(): string {
         return this.acceptedFilesTypeShow ? this.acceptedFilesType : '*';
     }

@@ -19,7 +19,7 @@
 </section>
 
 <section mat-dialog-content *ngIf="!readOnly">
-    <adf-version-manager [node]="contentEntry" [allowDownload]="allowDownload" [showComments]="showComments" (uploadError)="uploadError($event)"></adf-version-manager>
+    <adf-version-manager [node]="contentEntry" [newFileVersion]="newFileVersion" [allowDownload]="allowDownload" [showComments]="showComments" (uploadError)="uploadError($event)"></adf-version-manager>
 </section>
 <section mat-dialog-content *ngIf="readOnly">
     <adf-version-list [node]="contentEntry" [showActions]="false" ></adf-version-list>

@@ -27,6 +27,7 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 export class VersionManagerDialogAdapterComponent {
 
     public contentEntry: MinimalNodeEntryEntity;
+    public newFileVersion: File;
 
     showComments = true;
     allowDownload = true;
@@ -36,6 +37,7 @@ export class VersionManagerDialogAdapterComponent {
                 private snackBar: MatSnackBar,
                 private containingDialog?: MatDialogRef<VersionManagerDialogAdapterComponent>) {
         this.contentEntry = data.contentEntry;
+        this.newFileVersion = data.hasOwnProperty('newFileVersion') ? data.newFileVersion : this.newFileVersion;
         this.showComments = data.hasOwnProperty('showComments') ? data.showComments : this.showComments;
         this.allowDownload = data.hasOwnProperty('allowDownload') ? data.allowDownload : this.allowDownload;
     }

@@ -6,6 +6,7 @@
     [actionsPosition]="contentActionsPosition"
     [multiselect]="multiselect"
     [allowDropFiles]="allowDropFiles"
+    [allowDropFileVersion]="allowDropFileVersion"
     [contextMenu]="contextMenuActions"
     [rowStyle]="rowStyle"
     [rowStyleClass]="rowStyleClass"

@@ -161,6 +161,17 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
     @Input()
     emptyFolderImageUrl: string = './assets/images/empty_doc_lib.svg';
 
+    /**
+     * When true, this enables you to drop one file directly into a file
+     * as item in the list and then create a new version for that file.
+     * When false, the dropped file will be added to the
+     * current folder (ie, the one containing all the items shown in the list).
+     * See the Upload directive for further details about how the file drop is
+     * handled.
+     */
+    @Input()
+    allowDropFileVersion: boolean = false;
+
     /**
      * When true, this enables you to drop files directly into subfolders shown
      * as items in the list. When false, the dropped file will be added to the

@@ -45,8 +45,7 @@ export class ShareDataRow implements DataRow {
             throw new Error(ShareDataRow.ERR_OBJECT_NOT_FOUND);
         }
 
-        this.isDropTarget = this.isFolderAndHasPermissionToUpload(obj);
-
+        this.isDropTarget = this.isFolderAndHasPermissionToUpload(obj) || this.isFileAndHasParentFolderPermissionToUpload(obj);
         if (permissionsStyle) {
             this.cssClass = this.getPermissionClass(obj);
         }
@@ -81,6 +80,14 @@ export class ShareDataRow implements DataRow {
         return this.isFolder(nodeEntry) && this.contentService.hasAllowableOperations(nodeEntry.entry, 'create');
     }
 
+    isFileAndHasParentFolderPermissionToUpload(nodeEntry: NodeEntry): boolean {
+        return this.isFile(nodeEntry) && this.contentService.hasAllowableOperations(nodeEntry.entry, 'update');
+    }
+
+    isFile(nodeEntry: NodeEntry): boolean {
+        return nodeEntry.entry && nodeEntry.entry.isFile;
+    }
+
     isFolder(nodeEntry: NodeEntry): boolean {
         return nodeEntry.entry && nodeEntry.entry.isFolder;
     }

@@ -71,6 +71,10 @@ export abstract class UploadBase implements OnInit, OnDestroy {
     @Output()
     beginUpload = new EventEmitter<UploadFilesEvent>();
 
+    /** Emitted when dropping a file over another file to update the version. */
+    @Output()
+    updateFileVersion = new EventEmitter<CustomEvent>();
+
     protected onDestroy$ = new Subject<boolean>();
 
     constructor(protected uploadService: UploadService,

@@ -15,12 +15,13 @@
             <input #uploadSingleFile
                 id="upload-single-file"
                 data-automation-id="upload-single-file"
-                type="file"
+                [type]="file ? 'button' : 'file'"
                 name="uploadFiles"
                 accept="{{acceptedFilesType}}"
                 [attr.disabled]="isButtonDisabled()"
                 [title]="tooltip"
-                (change)="onFilesAdded($event)">
+                (change)="onFilesAdded($event)"
+                (click)="onClickUploadButton()">
         </button>
 
         <!--Multiple Files Upload-->

@@ -100,6 +100,19 @@ describe('UploadButtonComponent', () => {
         expect(compiled.querySelector('#uploadFolder')).toBeDefined();
     });
 
+    it('should have input type as button if receiving a file as input', () => {
+        component.multipleFiles = false;
+        component.file = new File([], 'Fake file name');
+        const compiled = fixture.debugElement.nativeElement;
+        fixture.detectChanges();
+        const inputButton = compiled.querySelector('#upload-single-file');
+        expect(inputButton.type).toBe('button');
+
+        component.file = undefined;
+        fixture.detectChanges();
+        expect(inputButton.type).toBe('file');
+    });
+
     it('should disable uploadFolder button if disabled is true', () => {
         component.disabled = true;
         component.uploadFolders = true;

@@ -55,6 +55,10 @@ export class UploadButtonComponent extends UploadBase implements OnInit, OnChang
     @Input()
     tooltip: string = null;
 
+    /** Custom added file. The upload button type will be 'button' instead of 'file' */
+    @Input()
+    file: File;
+
     /** Emitted when create permission is missing. */
     @Output()
     permissionEvent: EventEmitter<PermissionModel> = new EventEmitter<PermissionModel>();
@@ -100,6 +104,16 @@ export class UploadButtonComponent extends UploadBase implements OnInit, OnChang
         $event.target.value = '';
     }
 
+    onClickUploadButton(): void {
+        const files: File[] = [this.file];
+
+        if (this.hasAllowableOperations) {
+            this.uploadFiles(files);
+        } else {
+            this.permissionEvent.emit(new PermissionModel({ type: 'content', action: 'upload', permission: 'create' }));
+        }
+    }
+
     onDirectoryAdded($event: any): void {
         if (this.hasAllowableOperations) {
             const files: File[] = FileUtils.toFileArray($event.currentTarget.files);

@@ -266,6 +266,34 @@ describe('UploadDragAreaComponent', () => {
             });
         }));
 
+        it('should NOT upload the file if it is dropped on another file', () => {
+            const fakeItem = {
+                fullPath: '/folder-fake/file-fake.png',
+                isDirectory: false,
+                isFile: true,
+                name: 'file-fake.png',
+                relativeFolder: '/',
+                file: (callbackFile) => {
+                    const fileFake = new File(['fakefake'], 'file-fake.png', { type: 'image/png' });
+                    callbackFile(fileFake);
+                }
+            };
+
+            addToQueueSpy.and.callFake((fileList) => {
+                expect(fileList.name).toBe('file');
+                expect(fileList.options.path).toBe('pippo/');
+            });
+
+            const fakeCustomEvent: CustomEvent = new CustomEvent('CustomEvent', {
+                detail: {
+                    data: getFakeShareDataRow(),
+                    files: [fakeItem]
+                }
+            });
+
+            component.onUploadFiles(fakeCustomEvent);
+        });
+
         it('should not upload a file if fileType is not in acceptedFilesType', async(() => {
             component.success = null;
             component.acceptedFilesType = '.pdf';
@@ -369,8 +397,8 @@ describe('UploadDragAreaComponent', () => {
             component.onUploadFiles(fakeCustomEvent);
         }));
 
-        it('should upload the file in the current folder when the target is file', async(() => {
-
+        it('should trigger updating the file version when we drop a file over another file', async(() => {
+            spyOn(component.updateFileVersion, 'emit');
             const fakeItem = {
                 fullPath: '/folder-fake/file-fake.png',
                 isDirectory: false,
@@ -396,6 +424,7 @@ describe('UploadDragAreaComponent', () => {
             });
 
             component.onUploadFiles(fakeCustomEvent);
+            expect(component.updateFileVersion.emit).toHaveBeenCalledWith(fakeCustomEvent);
         }));
     });
 

@@ -26,9 +26,9 @@ import { UploadBase } from './base-upload/upload-base';
     selector: 'adf-upload-drag-area',
     templateUrl: './upload-drag-area.component.html',
     styleUrls: ['./upload-drag-area.component.scss'],
-    host: { 'class': 'adf-upload-drag-area' },
+    host: {'class': 'adf-upload-drag-area'},
     viewProviders: [
-        { provide: EXTENDIBLE_COMPONENT, useExisting: forwardRef(() => UploadDragAreaComponent) }
+        {provide: EXTENDIBLE_COMPONENT, useExisting: forwardRef(() => UploadDragAreaComponent)}
     ],
     encapsulation: ViewEncapsulation.None
 })
@@ -94,15 +94,21 @@ export class UploadDragAreaComponent extends UploadBase implements NodeAllowable
     onUploadFiles(event: CustomEvent) {
         event.stopPropagation();
         event.preventDefault();
-        const isAllowed: boolean = this.contentService.hasAllowableOperations(event.detail.data.obj.entry, AllowableOperationsEnum.CREATE);
+        const isAllowed: boolean = this.isTargetNodeFolder(event) ?
+            this.contentService.hasAllowableOperations(event.detail.data.obj.entry, AllowableOperationsEnum.CREATE)
+            : this.contentService.hasAllowableOperations(event.detail.data.obj.entry, AllowableOperationsEnum.UPDATE);
         if (isAllowed) {
-            const fileInfo: FileInfo[] = event.detail.files;
-            if (this.isTargetNodeFolder(event)) {
-                const destinationFolderName = event.detail.data.obj.entry.name;
-                fileInfo.map((file) => file.relativeFolder = destinationFolderName ? destinationFolderName.concat(file.relativeFolder) : file.relativeFolder);
-            }
-            if (fileInfo && fileInfo.length > 0) {
-                this.uploadFilesInfo(fileInfo);
+            if (!this.isTargetNodeFolder(event) && event.detail.files.length === 1) {
+                this.updateFileVersion.emit(event);
+            } else {
+                const fileInfo: FileInfo[] = event.detail.files;
+                if (this.isTargetNodeFolder(event)) {
+                    const destinationFolderName = event.detail.data.obj.entry.name;
+                    fileInfo.map((file) => file.relativeFolder = destinationFolderName ? destinationFolderName.concat(file.relativeFolder) : file.relativeFolder);
+                }
+                if (fileInfo && fileInfo.length > 0) {
+                    this.uploadFilesInfo(fileInfo);
+                }
             }
         }
     }

diff --git a/lib/content-services/src/lib/upload/components/upload-version-button.component.ts b/lib/content-services/src/lib/upload/components/upload-version-button.component.ts
@@ -35,6 +35,10 @@ export class UploadVersionButtonComponent extends UploadButtonComponent implemen
     @Input()
     node: Node;
 
+    /** (**Required**) The drag&dropped new file to be versioned. */
+    @Input()
+    newFileVersion: File;
+
     protected createFileModel(file: File): FileModel {
         const fileModel = super.createFileModel(file, this.rootFolderId, ((<any> file).webkitRelativePath || '').replace(/\/[^\/]*$/, ''), this.node.id);
 
@@ -47,6 +51,7 @@ export class UploadVersionButtonComponent extends UploadButtonComponent implemen
     }
 
     ngOnInit() {
+        this.file = this.newFileVersion;
         super.ngOnInit();
         this.checkPermission();
     }

@@ -6,6 +6,7 @@
                     <adf-version-upload
                         id="adf-version-upload-button"
                         [node]="node"
+                        [newFileVersion]="newFileVersion"
                         (success)="onUploadSuccess($event)"
                         (cancel)="onUploadCancel()"
                         (error)="onUploadError($event)">