From a0b8781209575f16a2287fcbf7ca04d326736659 Mon Sep 17 00:00:00 2001 From: Maurizio Vitale Date: Mon, 6 Mar 2017 16:50:28 +0000 Subject: [PATCH] Fix Thumbnail preview (#1689) * Fix Thumbnail preview * Fix thumbnail unit test * Remove the fix prexif --- .../activiti-content.component.html | 4 +- .../components/activiti-content.component.ts | 57 ++++++++++++++----- .../src/services/form.service.spec.ts | 25 +++++++- .../src/services/form.service.ts | 4 +- 4 files changed, 68 insertions(+), 22 deletions(-) diff --git a/ng2-components/ng2-activiti-form/src/components/activiti-content.component.html b/ng2-components/ng2-activiti-form/src/components/activiti-content.component.html index b47019dd21..72435d7454 100644 --- a/ng2-components/ng2-activiti-form/src/components/activiti-content.component.html +++ b/ng2-components/ng2-activiti-form/src/components/activiti-content.component.html @@ -14,9 +14,9 @@ - +
file_download - +
diff --git a/ng2-components/ng2-activiti-form/src/components/activiti-content.component.ts b/ng2-components/ng2-activiti-form/src/components/activiti-content.component.ts index 6055fcc37c..577ba69763 100644 --- a/ng2-components/ng2-activiti-form/src/components/activiti-content.component.ts +++ b/ng2-components/ng2-activiti-form/src/components/activiti-content.component.ts @@ -78,18 +78,26 @@ export class ActivitiContent implements OnChanges { } loadThumbnailUrl(content: ContentLinkModel) { - if (this.content.isTypeImage()) { - this.formService.getFileRawContent(content.id).subscribe( - (response: Blob) => { - this.content.thumbnailUrl = this.createUrlPreview(response); - }, - error => { - this.logService.error(error); - } - ); - } else if (this.content.isThumbnailSupported()) { - this.content.contentRawUrl = this.formService.getFileRawContentUrl(content.id); - this.content.thumbnailUrl = this.formService.getContentThumbnailUrl(content.id); + if (this.content.isThumbnailSupported()) { + if (this.content.isTypeImage()) { + this.formService.getFileRawContent(content.id).subscribe( + (response: Blob) => { + this.content.thumbnailUrl = this.createUrlPreview(response); + }, + error => { + this.logService.error(error); + } + ); + } else { + this.formService.getContentThumbnailUrl(content.id).subscribe( + (response: Blob) => { + this.content.thumbnailUrl = this.createUrlPreview(response); + }, + error => { + this.logService.error(error); + } + ); + } } } @@ -101,12 +109,31 @@ export class ActivitiContent implements OnChanges { /** * Download file opening it in a new window */ - download($event) { - $event.stopPropagation(); + download(content) { + this.formService.getFileRawContent(content.id).subscribe( + (response: Blob) => { + let thumbnailUrl = this.createUrlPreview(response); + this.createDownloadElement(thumbnailUrl, content.name); + }, + error => { + this.logService.error(error); + } + ); + } + + createDownloadElement(url: string, name: string) { + let downloadElement = window.document.createElement('a'); + downloadElement.setAttribute('id', 'export-download'); + downloadElement.setAttribute('href', url); + downloadElement.setAttribute('download', name); + downloadElement.setAttribute('target', '_blank'); + window.document.body.appendChild(downloadElement); + downloadElement.click(); + window.document.body.removeChild(downloadElement); } private sanitizeUrl(url: string) { - return this.sanitizer.bypassSecurityTrustUrl(url); + return this.sanitizer.bypassSecurityTrustResourceUrl(url); } private createUrlPreview(blob: Blob) { diff --git a/ng2-components/ng2-activiti-form/src/services/form.service.spec.ts b/ng2-components/ng2-activiti-form/src/services/form.service.spec.ts index 1e042a453f..805ab8ea35 100644 --- a/ng2-components/ng2-activiti-form/src/services/form.service.spec.ts +++ b/ng2-components/ng2-activiti-form/src/services/form.service.spec.ts @@ -16,6 +16,7 @@ */ import { TestBed } from '@angular/core/testing'; +import { Observable } from 'rxjs/Rx'; import { CoreModule, AlfrescoApiService, LogService, LogServiceMock } from 'ng2-alfresco-core'; import { FormService } from './form.service'; import { EcmModelService } from './ecm-model.service'; @@ -32,6 +33,17 @@ describe('FormService', () => { let logService: LogService; let bpmCli: any; + function createFakeBlob() { + let data = 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg=='; + + let bytes = new Uint8Array(data.length / 2); + + for (let i = 0; i < data.length; i += 2) { + bytes[i / 2] = parseInt(data.substring(i, i + 2), /* base = */ 16); + } + return new Blob([bytes], {type: 'image/png'}); + } + beforeEach(() => { TestBed.configureTestingModule({ imports: [ @@ -444,11 +456,18 @@ describe('FormService', () => { expect(contentRawUrl).toEqual(`${bpmCli.basePath}/api/enterprise/content/${contentId}/raw`); }); - it('should return the thumbnail URL', () => { + it('should return a Blob as thumbnail', (done) => { let contentId: number = 999; - let contentRawUrl = service.getContentThumbnailUrl(contentId); - expect(contentRawUrl).toEqual(`${bpmCli.basePath}/app/rest/content/${contentId}/rendition/thumbnail`); + let blob = createFakeBlob(); + spyOn(service, 'getContentThumbnailUrl').and.returnValue(Observable.of(blob)); + + service.getContentThumbnailUrl(contentId).subscribe(result => { + expect(result).toEqual(jasmine.any(Blob)); + expect(result.size).toEqual(48); + expect(result.type).toEqual('image/png'); + done(); + }); }); it('should create a Form form a Node', (done) => { diff --git a/ng2-components/ng2-activiti-form/src/services/form.service.ts b/ng2-components/ng2-activiti-form/src/services/form.service.ts index a142f492ad..fb2a4a14db 100644 --- a/ng2-components/ng2-activiti-form/src/services/form.service.ts +++ b/ng2-components/ng2-activiti-form/src/services/form.service.ts @@ -267,9 +267,9 @@ export class FormService { return alfrescoApi.activiti.contentApi.getRawContentUrl(contentId); } - getContentThumbnailUrl(contentId: number): string { + getContentThumbnailUrl(contentId: number): Observable { let alfrescoApi = this.apiService.getInstance(); - return alfrescoApi.activiti.contentApi.getContentThumbnailUrl(contentId); + return Observable.fromPromise(alfrescoApi.activiti.contentApi.getContentThumbnailUrl(contentId)); } getRestFieldValues(taskId: string, field: string): Observable {