From 7cb8505dd6886c22996bf6d2121e5eedae51f980 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Kilchenmann?= <github@milchkannen.ch>
Date: Tue, 14 Dec 2021 11:52:02 +0100
Subject: [PATCH] fix(upload): fix thumbnail preview (DEV-268) (#619)

Co-authored-by: mdelez <60604010+mdelez@users.noreply.github.com>
---
 .../representation/upload/upload.component.html        |  5 +----
 .../resource/representation/upload/upload.component.ts | 10 ++++------
 2 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/src/app/workspace/resource/representation/upload/upload.component.html b/src/app/workspace/resource/representation/upload/upload.component.html
index 396534d866..b71bd12cb9 100644
--- 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
index ef20e430e9..eaea937489 100644
--- 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':