fix blob input in text viewer (#1942)

demo-shell-ng2/app/components/about/about.component.ts

@@ -72,7 +72,7 @@ export class AboutComponent implements OnInit {
         if (corePackage) {
             let commitIsh = corePackage.version.split('-');
             if (commitIsh.length > 1) {
-                this.githubUrlCommitAlpha = this.githubUrlCommitAlpha + commitIsh;
+                this.githubUrlCommitAlpha = this.githubUrlCommitAlpha + commitIsh[1];
             } else {
                 this.githubUrlCommitAlpha = this.githubUrlCommitAlpha + corePackage.version;
             }

ng2-components/ng2-alfresco-viewer/src/components/imgViewer.component.ts

@@ -29,7 +29,7 @@ export class ImgViewerComponent implements OnChanges {
     urlFile: string;
 
     @Input()
-    blobFile: any;
+    blobFile: Blob;
 
     @Input()
     nameFile: string;

ng2-components/ng2-alfresco-viewer/src/components/txtViewer.component.css

@@ -3,6 +3,7 @@
     overflow: auto;
     font-size: 1em;
     padding: 20px;
+    max-width: 70%;
 }
 
 .full_width{

ng2-components/ng2-alfresco-viewer/src/components/txtViewer.component.spec.ts

@@ -52,16 +52,16 @@ describe('Test ng2-alfresco-viewer Text View component', () => {
         debug = fixture.debugElement;
         element = fixture.nativeElement;
         component = fixture.componentInstance;
-        component.urlFile = require('../assets/fake-test-file.txt');
     });
 
     describe('View', () => {
 
         it('Should text container be present with urlfile', (done) => {
             fixture.detectChanges();
-            let change = new SimpleChange(null, null, true);
+            let urlFile = require('../assets/fake-test-file.txt');
+            let change = new SimpleChange(null, urlFile, true);
 
-            component.ngOnChanges(change).then(() => {
+            component.ngOnChanges({ 'urlFile': change }).then(() => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
                     expect(element.querySelector('#adf-viewer-text-container').textContent).toContain('example');
@@ -69,5 +69,20 @@ describe('Test ng2-alfresco-viewer Text View component', () => {
                 });
             });
         });
+
+        it('Should text container be present with Blob file', (done) => {
+            let blobFile = new Blob(['text example'], {type: 'text/txt'});
+
+            let change = new SimpleChange(null, blobFile, true);
+
+            component.ngOnChanges({ 'blobFile': change }).then(() => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(element.querySelector('#adf-viewer-text-container').textContent).toContain('example');
+                    done();
+                });
+            });
+        });
+
     });
 });

ng2-components/ng2-alfresco-viewer/src/components/txtViewer.component.ts

@@ -16,8 +16,7 @@
  */
 
 import { Component, Input } from '@angular/core';
-import { SimpleChange }    from '@angular/core';
-import { ContentService } from 'ng2-alfresco-core';
+import { SimpleChanges }    from '@angular/core';
 import { Http, Response, RequestOptions, ResponseContentType }  from '@angular/http';
 import 'rxjs/add/operator/toPromise';
 
@@ -32,29 +31,34 @@ export class TxtViewerComponent {
     urlFile: any;
 
     @Input()
-    blobFile: any;
+    blobFile: Blob;
 
     content: string;
 
-    constructor(private http: Http, private contentService: ContentService) {
+    constructor(private http: Http) {
     }
 
-    ngOnChanges(changes: SimpleChange) {
+    ngOnChanges(changes: SimpleChanges): Promise<any> {
+
         let blobFile = changes['blobFile'];
         if (blobFile && blobFile.currentValue) {
-            this.urlFile = this.contentService.createTrustedUrl(this.blobFile);
+            return this.readBlob(blobFile.currentValue);
         }
+
+        let urlFile = changes['urlFile'];
+        if (urlFile && urlFile.currentValue) {
+            return this.getUrlContent(urlFile.currentValue);
+        }
+
         if (!this.urlFile && !this.blobFile) {
             throw new Error('Attribute urlFile or blobFile is required');
         }
-
-        return new Promise((resolve, reject) => {
-            this.getUrlContent(resolve, reject);
-        });
     }
 
-    private getUrlContent(resolve, reject): void {
-        this.http.get(this.urlFile, new RequestOptions({
+    private getUrlContent(url: string): Promise<any> {
+        return new Promise((resolve, reject) => {
+
+            this.http.get(url, new RequestOptions({
                 responseType: ResponseContentType.Text
             })).toPromise().then(
                 (res: Response) => {
@@ -63,5 +67,23 @@ export class TxtViewerComponent {
                 }, (event) => {
                     reject(event);
                 });
+        });
+    }
+
+    private readBlob(blob: Blob): Promise<any> {
+        return new Promise((resolve, reject) => {
+            let reader = new FileReader();
+
+            reader.onload = () => {
+                this.content = reader.result;
+                resolve();
+            };
+
+            reader.onerror = (error: ErrorEvent) => {
+                reject(error);
+            };
+
+            reader.readAsText(blob);
+        });
     }
 }

ng2-components/ng2-alfresco-viewer/src/components/viewer.component.ts

@@ -239,7 +239,7 @@ export class ViewerComponent {
      * @returns {boolean}
      */
     private isText(): boolean {
-        return this.extension === 'txt' || this.mimeType === 'text/txt';
+        return this.extension === 'txt' || this.mimeType === 'text/txt' || this.mimeType === 'text/plain';
     }
 
     /**