diff --git a/demo-shell/src/app/components/app-layout/app-layout.component.html b/demo-shell/src/app/components/app-layout/app-layout.component.html
index dbd001b1f3..e09045e04f 100644
--- a/demo-shell/src/app/components/app-layout/app-layout.component.html
+++ b/demo-shell/src/app/components/app-layout/app-layout.component.html
@@ -87,3 +87,5 @@
+
+
diff --git a/demo-shell/src/app/components/app-layout/app-layout.component.scss b/demo-shell/src/app/components/app-layout/app-layout.component.scss
index 540418b5e9..9e3c8440b8 100644
--- a/demo-shell/src/app/components/app-layout/app-layout.component.scss
+++ b/demo-shell/src/app/components/app-layout/app-layout.component.scss
@@ -14,6 +14,10 @@
}
}
+ adf-file-uploading-dialog {
+ z-index: 1100;
+ }
+
.app-layout {
display: flex;
flex: 1;
diff --git a/demo-shell/src/app/components/files/files.component.html b/demo-shell/src/app/components/files/files.component.html
index 8e0d552894..51205fe69a 100644
--- a/demo-shell/src/app/components/files/files.component.html
+++ b/demo-shell/src/app/components/files/files.component.html
@@ -721,5 +721,3 @@
-
-
diff --git a/docs/core/components/viewer.component.md b/docs/core/components/viewer.component.md
index 902b785af6..abc75cf8cf 100644
--- a/docs/core/components/viewer.component.md
+++ b/docs/core/components/viewer.component.md
@@ -93,7 +93,6 @@ See the [Custom layout](#custom-layout) section for full details of all availabl
| mimeType | `string` | | MIME type of the file content (when not determined by the filename extension). |
| nodeId | `string` | null | Node Id of the file to load. |
| overlayMode | `boolean` | false | If `true` then show the Viewer as a full page over the current content. Otherwise fit inside the parent div. |
-| readOnly | `boolean` | true | Hide or show media management actions for [Image-viewer component](../../../lib/core/viewer/components/img-viewer.component.ts "Defined in img-viewer.component.ts") |
| sharedLinkId | `string` | null | Shared link id (to display shared file). |
| showLeftSidebar | `boolean` | false | Toggles left sidebar visibility. Requires `allowLeftSidebar` to be set to `true`. |
| showRightSidebar | `boolean` | false | Toggles right sidebar visibility. Requires `allowRightSidebar` to be set to `true`. |
@@ -111,7 +110,6 @@ See the [Custom layout](#custom-layout) section for full details of all availabl
| Name | Type | Description |
| ---- | ---- | ----------- |
| extensionChange | `any` | Emitted when the filename extension changes. |
-| fileSubmit | `Blob` | Emitted when media management actions occur. |
| goBack | `any` | Emitted when user clicks the 'Back' button. |
| invalidSharedLink | `any` | Emitted when the shared link used is not valid. |
| navigateBefore | `any` | Emitted when user clicks 'Navigate Before' ("<") button. |
diff --git a/lib/core/viewer/components/img-viewer.component.ts b/lib/core/viewer/components/img-viewer.component.ts
index c88d8704b5..87731933fc 100644
--- a/lib/core/viewer/components/img-viewer.component.ts
+++ b/lib/core/viewer/components/img-viewer.component.ts
@@ -89,7 +89,6 @@ export class ImgViewerComponent implements AfterViewInit, OnChanges {
dragMode: 'move',
background: false,
scalable: true,
- modal: false,
zoomOnWheel: false,
toggleDragModeOnDblclick: false,
viewMode: 1,
@@ -185,8 +184,10 @@ export class ImgViewerComponent implements AfterViewInit, OnChanges {
save() {
this.isEditing = false;
this.cropper.setDragMode('move');
+
this.cropper.getCroppedCanvas().toBlob((blob) => {
this.submit.emit(blob);
+ this.cropper.replace(this.cropper.getCroppedCanvas().toDataURL());
this.cropper.clear();
});
}
diff --git a/lib/core/viewer/components/viewer.component.html b/lib/core/viewer/components/viewer.component.html
index eaadd64559..1c23cb5212 100644
--- a/lib/core/viewer/components/viewer.component.html
+++ b/lib/core/viewer/components/viewer.component.html
@@ -222,7 +222,6 @@
[blobFile]="blobFile"
[readOnly]="readOnly"
(error)="onUnsupportedFile()"
- (submit)="onSubmitFile($event)"
>
diff --git a/lib/core/viewer/components/viewer.component.spec.ts b/lib/core/viewer/components/viewer.component.spec.ts
index 696254be3e..58d24a3033 100644
--- a/lib/core/viewer/components/viewer.component.spec.ts
+++ b/lib/core/viewer/components/viewer.component.spec.ts
@@ -961,13 +961,26 @@ describe('ViewerComponent', () => {
component.ngOnChanges();
});
- it('should emit new blob when emitted by image-viewer ', () => {
- spyOn(component.fileSubmit, 'emit');
+ it('should update version when emitted by image-viewer and user has update permissions', () => {
+ component.readOnly = false;
+ component.nodeEntry = new NodeEntry({ entry: { name: 'fakeImage.png', id: '12', content: { mimeType: 'txt' } } });
const data = atob('iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==');
const fakeBlob = new Blob([data], { type: 'image/png' });
component.onSubmitFile(fakeBlob);
+ fixture.detectChanges();
- expect(component.fileSubmit.emit).toHaveBeenCalledWith(fakeBlob);
+ expect(component.blobFile).toEqual(fakeBlob);
+ });
+
+ it('should not update version when emitted by image-viewer and user doesn`t have update permissions', () => {
+ component.readOnly = true;
+ component.nodeEntry = new NodeEntry({ entry: { name: 'fakeImage.png', id: '12', content: { mimeType: 'txt' } } });
+ const data = atob('iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==');
+ const fakeBlob = new Blob([data], { type: 'image/png' });
+ component.onSubmitFile(fakeBlob);
+ fixture.detectChanges();
+
+ expect(component.blobFile).toEqual(undefined);
});
});
diff --git a/lib/core/viewer/components/viewer.component.ts b/lib/core/viewer/components/viewer.component.ts
index 4a201744e8..0ee3e79e0a 100644
--- a/lib/core/viewer/components/viewer.component.ts
+++ b/lib/core/viewer/components/viewer.component.ts
@@ -33,6 +33,9 @@ import { ViewUtilService } from '../services/view-util.service';
import { AppExtensionService, ViewerExtensionRef } from '@alfresco/adf-extensions';
import { filter, skipWhile, takeUntil } from 'rxjs/operators';
import { MatDialog } from '@angular/material/dialog';
+import { ContentService } from '../../services/content.service';
+import { UploadService } from '../../services/upload.service';
+import { FileModel } from '../../models';
@Component({
selector: 'adf-viewer',
@@ -97,10 +100,6 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
@Input()
showToolbar = true;
- /** Hide or show media management actions for image-viewer component */
- @Input()
- readOnly = true;
-
/** Specifies the name of the file when it is not available from the URL. */
@Input()
displayName: string;
@@ -210,10 +209,6 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
@Output()
invalidSharedLink = new EventEmitter();
- /** Emitted when user updates a node via rotate, crop, etc. */
- @Output()
- fileSubmit = new EventEmitter();
-
TRY_TIMEOUT: number = 10000;
viewerType = 'unknown';
@@ -230,6 +225,7 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
sidebarLeftTemplateContext: { node: Node } = { node: null };
fileTitle: string;
viewerExtensions: Array = [];
+ readOnly = true;
private cacheBusterNumber;
cacheTypeForContent = '';
@@ -258,6 +254,8 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
private viewUtilService: ViewUtilService,
private logService: LogService,
private extensionService: AppExtensionService,
+ private contentService: ContentService,
+ private uploadService: UploadService,
private el: ElementRef,
public dialog: MatDialog) {
viewUtilService.maxRetries = this.maxRetries;
@@ -402,6 +400,8 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
}
private async setUpNodeFile(nodeData: Node, versionData?: Version) {
+ this.readOnly = !this.contentService.hasAllowableOperations(nodeData, 'update');
+
let setupNode;
if (versionData && versionData.content) {
@@ -694,7 +694,22 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
}
onSubmitFile(newImageBlob: Blob) {
- this.fileSubmit.emit(newImageBlob);
+ const newImageFile: File = new File([newImageBlob], this?.nodeEntry?.entry?.name, { type: this?.nodeEntry?.entry?.content?.mimeType });
+ if (this?.nodeEntry?.entry?.id && !this.readOnly) {
+ const newFile = new FileModel(
+ newImageFile,
+ {
+ majorVersion: false,
+ newVersion: true,
+ parentId: this?.nodeEntry?.entry?.parentId,
+ nodeType: this?.nodeEntry?.entry?.content?.mimeType
+ },
+ this?.nodeEntry?.entry?.id
+ );
+ this.blobFile = newImageBlob;
+ this.uploadService.addToQueue(...[newFile]);
+ this.uploadService.uploadFilesInTheQueue();
+ }
}
onUnsupportedFile() {