diff --git a/src/assets/styles/common-file-upload.scss b/src/assets/styles/common-file-upload.scss
new file mode 100644
index 0000000..b324daf
--- /dev/null
+++ b/src/assets/styles/common-file-upload.scss
@@ -0,0 +1,60 @@
+.iqser-upload-file {
+    .upload-area,
+    .file-area {
+        display: flex;
+        align-items: center;
+        border-radius: 8px;
+        width: 100%;
+        box-sizing: border-box;
+        background: var(--iqser-alt-background);
+
+        &.drag-over {
+            background-color: var(--iqser-file-drop-drag-over);
+        }
+    }
+
+    .upload-area {
+        gap: 16px;
+        height: 88px;
+        cursor: pointer;
+        padding: 0 32px;
+
+        mat-icon,
+        div {
+            opacity: 0.5;
+            transition: 0.1s;
+        }
+
+        div {
+            font-size: 16px;
+            font-weight: 500;
+        }
+    }
+
+    .file-area {
+        gap: 10px;
+        height: 48px;
+
+        mat-icon:first-child {
+            opacity: 0.5;
+            margin-left: 16px;
+        }
+
+        mat-icon:last-child {
+            margin-left: auto;
+            margin-right: 16px;
+            cursor: pointer;
+        }
+
+        mat-icon {
+            transform: scale(0.7);
+        }
+
+        p {
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+            max-width: 490px;
+        }
+    }
+}
diff --git a/src/assets/styles/common-styles.scss b/src/assets/styles/common-styles.scss
index 4e98daa..05d1501 100644
--- a/src/assets/styles/common-styles.scss
+++ b/src/assets/styles/common-styles.scss
@@ -28,6 +28,7 @@
 @use 'common-toggle-button';
 @use 'common-tooltips';
 @use 'common-file-drop';
+@use 'common-file-upload';
 @use 'common-side-nav';
 @use 'common-color-picker';
 @use 'common-skeleton';
diff --git a/src/lib/upload-file/upload-file.component.html b/src/lib/upload-file/upload-file.component.html
index 4dd42fb..ae52c17 100644
--- a/src/lib/upload-file/upload-file.component.html
+++ b/src/lib/upload-file/upload-file.component.html
@@ -1,24 +1,22 @@
-<div>
-    <div (click)="triggerAttachFile()" (fileDropped)="attachFile($event)" *ngIf="!file" class="upload-area" iqserDragDropFileUpload>
-        <mat-icon svgIcon="iqser:upload"></mat-icon>
+<div (click)="triggerAttachFile()" (fileDropped)="attachFile($event)" *ngIf="!file" class="upload-area" iqserDragDropFileUpload>
+    <mat-icon svgIcon="iqser:upload"></mat-icon>
 
-        <div translate="upload-file.upload-area-text"></div>
-    </div>
-    <div *ngIf="file" class="file-area">
-        <mat-icon svgIcon="iqser:document"></mat-icon>
-
-        <p>{{ file.name }}</p>
-
-        <mat-icon (click)="removeFile()" *ngIf="!readonly" svgIcon="iqser:trash"></mat-icon>
-    </div>
-
-    <input
-        #attachFileInput
-        id="file-upload-input"
-        (change)="attachFile($event)"
-        [accept]="accept"
-        [hidden]="true"
-        class="file-upload-input"
-        type="file"
-    />
+    <div translate="upload-file.upload-area-text"></div>
 </div>
+<div *ngIf="file" class="file-area">
+    <mat-icon svgIcon="iqser:document"></mat-icon>
+
+    <p>{{ file.name }}</p>
+
+    <mat-icon (click)="removeFile()" *ngIf="!readonly" svgIcon="iqser:trash"></mat-icon>
+</div>
+
+<input
+    #attachFileInput
+    id="file-upload-input"
+    (change)="attachFile($event)"
+    [accept]="accept"
+    [hidden]="true"
+    class="file-upload-input"
+    type="file"
+/>
diff --git a/src/lib/upload-file/upload-file.component.scss b/src/lib/upload-file/upload-file.component.scss
deleted file mode 100644
index 83d7b43..0000000
--- a/src/lib/upload-file/upload-file.component.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-.upload-area,
-.file-area {
-    display: flex;
-    align-items: center;
-    border-radius: 8px;
-    width: 100%;
-    box-sizing: border-box;
-    background: var(--iqser-alt-background);
-
-    &.drag-over {
-        background-color: var(--iqser-file-drop-drag-over);
-    }
-}
-
-.upload-area {
-    gap: 16px;
-    height: 88px;
-    cursor: pointer;
-    padding: 0 32px;
-
-    mat-icon,
-    div {
-        opacity: 0.5;
-        transition: 0.1s;
-    }
-
-    div {
-        font-size: 16px;
-        font-weight: 500;
-    }
-}
-
-.file-area {
-    gap: 10px;
-    height: 48px;
-
-    mat-icon:first-child {
-        opacity: 0.5;
-        margin-left: 16px;
-    }
-
-    mat-icon:last-child {
-        margin-left: auto;
-        margin-right: 16px;
-        cursor: pointer;
-    }
-
-    mat-icon {
-        transform: scale(0.7);
-    }
-
-    p {
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
-        max-width: 490px;
-    }
-}
diff --git a/src/lib/upload-file/upload-file.component.ts b/src/lib/upload-file/upload-file.component.ts
index 864b0f7..e021dce 100644
--- a/src/lib/upload-file/upload-file.component.ts
+++ b/src/lib/upload-file/upload-file.component.ts
@@ -1,9 +1,11 @@
-import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
 
 @Component({
     selector: 'iqser-upload-file',
     templateUrl: './upload-file.component.html',
-    styleUrls: ['./upload-file.component.scss'],
+    // eslint-disable-next-line @angular-eslint/no-host-metadata-property
+    host: { '[class.iqser-upload-file]': 'true' },
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class UploadFileComponent {
     @ViewChild('attachFileInput', { static: true }) attachFileInput!: ElementRef;
@@ -17,12 +19,13 @@ export class UploadFileComponent {
         this.attachFileInput.nativeElement.click();
     }
 
-    attachFile(event: any) {
-        const files = event?.target?.files;
+    attachFile(event: Event) {
+        const target = event.target as HTMLInputElement;
+        const files = target?.files || [];
         this.file = files[0];
 
         // input field needs to be set as empty in case the same file will be selected second time
-        event.target.value = '';
+        target.value = '';
 
         if (!this.file) {
             console.error('No file to import!');