fix(upload): fix thumbnail preview (DEV-268) (#619)

Co-authored-by: mdelez <60604010+mdelez@users.noreply.github.com>
dasch-swiss · Dec 14, 2021 · 7cb8505 · 7cb8505
1 parent daa4167
commit 7cb8505
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 10 deletions.
diff --git a/src/app/workspace/resource/representation/upload/upload.component.html b/src/app/workspace/resource/representation/upload/upload.component.html
@@ -22,10 +22,7 @@
 
         <ng-container *ngIf="!isLoading && file">
             <div *ngIf="thumbnailUrl" class="thumbnail">
-                <img src="{{ thumbnailUrl }}" alt="thumbnail" />
-                <button mat-button class="delete-file" title="delete file" (click)="deleteAttachment()">
-                    <mat-icon>close</mat-icon>
-                </button>
+                <img [src]="thumbnailUrl" alt="thumbnail" />
             </div>
 
             <div class="files-list">

diff --git a/src/app/workspace/resource/representation/upload/upload.component.ts b/src/app/workspace/resource/representation/upload/upload.component.ts
@@ -1,5 +1,6 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
 import {
     CreateArchiveFileValue,
     CreateAudioFileValue,
@@ -38,7 +39,7 @@ export class UploadComponent implements OnInit {
     form: FormGroup;
     fileControl: FormControl;
     isLoading = false;
-    thumbnailUrl: string;
+    thumbnailUrl: string | SafeUrl;
 
     allowedFileTypes: string[];
     // todo: maybe we can use this list to display which file format is allowed to
@@ -47,13 +48,10 @@ export class UploadComponent implements OnInit {
     supportedAudioTypes = ['audio/mpeg'];
     supportedArchiveTypes = ['application/zip', 'application/x-tar', 'application/gzip'];
 
-    // readonly fromLabels = {
-    //     upload: 'Upload file',
-    //     drag_drop: 'Drag and drop or click to upload'
-    // };
     constructor(
         private _fb: FormBuilder,
         private _notification: NotificationService,
+        private _sanitizer: DomSanitizer,
         private _upload: UploadFileService
     ) { }
 
@@ -97,7 +95,7 @@ export class UploadComponent implements OnInit {
                             case 'stillImage':
                                 const temporaryUrl = res.uploadedFiles[0].temporaryUrl;
                                 const thumbnailUri = '/full/256,/0/default.jpg';
-                                this.thumbnailUrl = `${temporaryUrl}${thumbnailUri}`;
+                                this.thumbnailUrl = this._sanitizer.bypassSecurityTrustUrl(temporaryUrl + thumbnailUri);
                                 break;
 
                             case 'document':