From 0d95a1811edbf83de3dbe35149088dcd2e1a8da2 Mon Sep 17 00:00:00 2001
From: Ghulammustafa Kakar <145684065+Kakar21@users.noreply.github.com>
Date: Sun, 8 Sep 2024 02:06:56 +0200
Subject: [PATCH] Finished image upload (#152)

* implemented old image upload

* implemented image upload in thread and directmessages, improved image upload style & fixed no upload without text

* fixed failed check
---
 .../dialog-image/dialog-image.component.html  |   1 +
 .../dialog-image/dialog-image.component.scss  |  11 ++
 .../dialog-image.component.spec.ts            |  23 ++++
 .../dialog-image/dialog-image.component.ts    |  17 +++
 src/app/main/chat/chat.component.html         |  21 ++--
 src/app/main/chat/chat.component.scss         | 114 ++++++------------
 src/app/main/chat/chat.component.ts           |  26 ++--
 src/app/main/chat/chat.service.ts             |   1 -
 .../direct-message.component.html             |  13 +-
 .../direct-message.component.scss             |  91 ++++++++++++++
 .../direct-message.component.ts               | 106 ++++++++++------
 .../direct-message/directmessage.service.ts   |   2 +-
 .../conversations.component.scss              |  11 +-
 src/app/main/thread/thread.component.html     |  16 ++-
 src/app/main/thread/thread.component.scss     |  91 ++++++++++++++
 src/app/main/thread/thread.component.ts       |  50 ++++++--
 16 files changed, 433 insertions(+), 161 deletions(-)
 create mode 100644 src/app/dialog-image/dialog-image.component.html
 create mode 100644 src/app/dialog-image/dialog-image.component.scss
 create mode 100644 src/app/dialog-image/dialog-image.component.spec.ts
 create mode 100644 src/app/dialog-image/dialog-image.component.ts

diff --git a/src/app/dialog-image/dialog-image.component.html b/src/app/dialog-image/dialog-image.component.html
new file mode 100644
index 0000000..fb0d80d
--- /dev/null
+++ b/src/app/dialog-image/dialog-image.component.html
@@ -0,0 +1 @@
+<img src="{{ data }}">
diff --git a/src/app/dialog-image/dialog-image.component.scss b/src/app/dialog-image/dialog-image.component.scss
new file mode 100644
index 0000000..3e83947
--- /dev/null
+++ b/src/app/dialog-image/dialog-image.component.scss
@@ -0,0 +1,11 @@
+::ng-deep::ng-deep div.image-dialog {
+    img {
+        max-width: 50vw;  
+        max-height: 70vh;
+        width: auto;
+        height: auto;
+        object-fit: contain;
+        display: block;
+        margin: auto;  
+    }
+}
\ No newline at end of file
diff --git a/src/app/dialog-image/dialog-image.component.spec.ts b/src/app/dialog-image/dialog-image.component.spec.ts
new file mode 100644
index 0000000..b6266c1
--- /dev/null
+++ b/src/app/dialog-image/dialog-image.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DialogImageComponent } from './dialog-image.component';
+
+describe('DialogImageComponent', () => {
+  let component: DialogImageComponent;
+  let fixture: ComponentFixture<DialogImageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DialogImageComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(DialogImageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/dialog-image/dialog-image.component.ts b/src/app/dialog-image/dialog-image.component.ts
new file mode 100644
index 0000000..70cb241
--- /dev/null
+++ b/src/app/dialog-image/dialog-image.component.ts
@@ -0,0 +1,17 @@
+import { Component, Inject } from '@angular/core';
+import {MAT_DIALOG_DATA} from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-dialog-image',
+  standalone: true,
+  imports: [],
+  templateUrl: './dialog-image.component.html',
+  styleUrl: './dialog-image.component.scss'
+})
+export class DialogImageComponent {
+
+
+    constructor(@Inject(MAT_DIALOG_DATA) public data: string) {
+      
+    }
+}
diff --git a/src/app/main/chat/chat.component.html b/src/app/main/chat/chat.component.html
index baffbc6..1299866 100644
--- a/src/app/main/chat/chat.component.html
+++ b/src/app/main/chat/chat.component.html
@@ -89,12 +89,10 @@ <h2>{{ dayDate(message.value.time) }}</h2>
                         <h5 (click)="openProfileById(message.value.id)">{{ message.value.name}}</h5>
                         <span>{{ dayTime(message.value.time) }} Uhr</span>
                     </div>
-                    <div #message class="message-text" [ngClass]="{'current-user-text': message.value.name === currentUser.currentUser.name}"  (click)="onMessageClick($event)"
+                    <div #message class="message-text" [ngStyle]="{ 'display': message.value.message.trim() === '' ? 'none' : 'block' }" [ngClass]="{'current-user-text': message.value.name === currentUser.currentUser.name}"  (click)="onMessageClick($event)"
                         [innerHTML]="message.value.message | highlightMentions"  >
                     </div>     
-                    <div *ngIf="message.value.imageUrl" class="loaded-img" (click)="openModal(message.value.imageUrl)">
-                        <img [src]="message.value.imageUrl" alt="Image Preview" />
-                    </div>
+                    <img *ngIf="message.value.imageUrl" class="loaded-img" [src]="message.value.imageUrl" (click)="openDialogImage(message.value.imageUrl)">
                     <div *ngIf="!noReactions(message.value)">
                         <div class="reaction">
                             @if (message.value.reactions) {
@@ -179,12 +177,6 @@ <h1>{{ chatService.currentChannel.name }}</h1>
             </div>
         </div>
         }
-        <div *ngIf="showModal" class="modal">
-            <div class="modal-content">
-                <span class="close" (click)="closeModal()">&times;</span>
-                <img [src]="modalSrc" alt="Expanded Image Preview">
-            </div>
-        </div>
         <div class="input-container">
             <div class="chat-input">
                 <textarea #messageInput matInput (input)="onInputChange($event)" [formControl]="formCtrl"
@@ -193,15 +185,16 @@ <h1>{{ chatService.currentChannel.name }}</h1>
                         chatService.currentChannel.name
                     }}">
                 </textarea>
-                <div *ngIf="previewUrl" class="loaded-img" (click)="openModal(previewUrl)">
-                    <img class="delete-preview" (click)="clearPreview()"
-                        src="../../../assets/img/icons/close-purple.svg" alt="close-loaded-img">
+                <div *ngIf="previewUrl" class="preview-image" (click)="openDialogImage(previewUrl)">
+                    <button class="closeButton" (click)="clearPreview()" mat-icon-button>
+                        <img src="../../../assets/img/icons/close.svg"/>
+                    </button>
                     <img [src]="previewUrl" alt="Image Preview" />
                 </div>
                 <div class="action-buttons">
                     <div class="button-wrapper">
                         <button class="upload-image input-image" mat-icon-button (click)="upload.click()">
-                            <input id="fileUpload" type="file" #upload (change)="onFileSelected($event)"
+                            <input id="fileUploadChat" type="file" #upload (change)="onFileSelected($event)"
                                 accept=".png,.jpg">
                             <img src="../../../assets/img/icons/add-gray.svg" alt="Add image" />
                         </button>
diff --git a/src/app/main/chat/chat.component.scss b/src/app/main/chat/chat.component.scss
index 4430c1a..dcba106 100644
--- a/src/app/main/chat/chat.component.scss
+++ b/src/app/main/chat/chat.component.scss
@@ -502,16 +502,6 @@
 
 }
 
-.message-image {
-    max-width: 8rem;
-    border-radius: 10px;
-    border: 1px rgba(0, 0, 0, 0.2) solid;
-    position: relative;
-    display: inline-block;
-    overflow: hidden;
-    cursor: pointer;
-}
-
 .upload-image {
     border: none;
     border-radius: 100%;
@@ -535,13 +525,36 @@
 }
 
 .loaded-img {
-    max-width: 8rem;
-    border-radius: 10px;
-    border: 1px rgba(0, 0, 0, 0.2) solid;
+    max-width: 20rem;
+    max-height: 20rem;
+    width: auto;
+    height: auto;
+    object-fit: contain;
+    border: 1px solid var(--light-purple-line);
+    border-radius: 1.25rem;
+    position: relative;
+
+    &:hover {
+        cursor: pointer;
+        border-color: var(--purple-2);
+    }
+
+    &:active {
+        border-color: var(--purple-1);
+    }
+}
+
+.preview-image {
     position: relative;
     display: inline-block;
-    overflow: hidden;
+    width: 8rem; // Feste Vorschau-Breite
+    height: 8rem; // Feste Vorschau-Höhe
+    margin-right: 1rem; // Abstand zur Nachricht
     cursor: pointer;
+    border-radius: 1.25rem;
+    overflow: hidden;
+    border: 1px solid var(--light-purple-line);
+
 
     &::after {
         content: '';
@@ -560,73 +573,26 @@
         opacity: 1;
     }
 
-    img:last-child {
+    img {
         width: 100%;
-        height: auto;
+        height: 100%;
+        object-fit: cover; // Das Bild wird in den Container eingepasst, ohne Verzerrung
+        border-radius: 0.5rem;
     }
 
+    .closeButton {
+        position: absolute;
+        top: 0.5rem;
+        right: 0.5rem;
+        z-index: 10; // Sicherstellen, dass es über dem Bild liegt
+        background-color: rgba(236, 238, 254, 0.5);
 
-}
-
-.delete-preview {
-    position: absolute;
-    top: 0;
-    right: 0;
-    z-index: 10;
-    cursor: default;
-    border-radius: 100%;
-
-    &:hover {
-        background-color: rgba(45, 8, 225, 0.2);
+        &:hover {
+            background-color: rgba(236, 238, 254, 1);
+        }
     }
 }
 
-.modal {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: fixed;
-    z-index: 1000;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    background-color: rgba(0, 0, 0, 0.8);
-}
-
-.modal-content {
-    position: relative;
-    background-color: #fefefe;
-    padding: 20px;
-    border-radius: 10px;
-    max-width: 90%;
-    max-height: 90%;
-    overflow: auto;
-}
-
-.modal-content img {
-    width: 100%;
-    height: auto;
-}
-
-.close {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    color: #aaa;
-    font-size: 28px;
-    font-weight: bold;
-    cursor: pointer;
-}
-
-.close:hover,
-.close:focus {
-    color: #000;
-    text-decoration: none;
-    cursor: pointer;
-}
-
 .input-container {
     padding: 0.5rem 1rem 1rem 1rem;
 }
diff --git a/src/app/main/chat/chat.component.ts b/src/app/main/chat/chat.component.ts
index d1157df..5f4d789 100644
--- a/src/app/main/chat/chat.component.ts
+++ b/src/app/main/chat/chat.component.ts
@@ -38,6 +38,7 @@ import { HighlightMentionsPipe } from "../../pipes/highlist-mentions.pipe";
 import { PofileInfoCardComponent } from "../../pofile-info-card/pofile-info-card.component";
 import { EmojiModule } from "@ctrl/ngx-emoji-mart/ngx-emoji";
 import { ImageService } from "../../image.service";
+import { DialogImageComponent } from "../../dialog-image/dialog-image.component";
 
 @Component({
     selector: "app-chat",
@@ -84,9 +85,6 @@ export class ChatComponent implements AfterViewInit, AfterViewChecked {
     public currentChannel!: Channel;
     currentInputValue: string = "";
     previewUrl: string | ArrayBuffer | null = null;
-    showModal: boolean = false;
-    showImageModal: "preview" | "chatImage" | string = '';
-    modalSrc: string | ArrayBuffer = '';
     pickerPosition = { top: '0px', left: '0px' };
     editMessageId: string | null = null;
 
@@ -254,6 +252,13 @@ export class ChatComponent implements AfterViewInit, AfterViewChecked {
         }
     }
 
+    openDialogImage(imageUrl: string | ArrayBuffer) {
+        this.dialog.open(DialogImageComponent, {
+            panelClass: "image-dialog",
+            data: imageUrl
+        });
+    }
+
     openDialogChannelInfo() {
         this.dialog.open(DialogChannelInfoComponent, {
             panelClass: "custom-dialog-br",
@@ -310,13 +315,13 @@ export class ChatComponent implements AfterViewInit, AfterViewChecked {
         let imageUrl = '';
 
         if (this.previewUrl) {
-            const fileInput = document.getElementById('fileUpload') as HTMLInputElement;
+            const fileInput = document.getElementById('fileUploadChat') as HTMLInputElement;
             imageUrl = await this.imageService.uploadFile(fileInput);
             console.log(imageUrl)
             this.clearPreview();
-
         }
-        if (this.messageText.trim() !== "") {
+
+        if ((this.messageText.trim() !== "") || (imageUrl.trim() !== "")) {
             const message: Message = {
                 id: "",
                 avatar: this.currentUser.currentUser.avatar || '', // Beispiel für das Hinzufügen eines Avatars
@@ -540,15 +545,6 @@ export class ChatComponent implements AfterViewInit, AfterViewChecked {
         this.previewUrl = null;
     }
 
-    openModal(modalURL: string | ArrayBuffer) {
-        this.modalSrc = modalURL;
-        this.showModal = true;
-    }
-
-    closeModal() {
-        this.showModal = false;
-    }
-
     openDialogEditMessage(channelId: string, messageId: string, currentMessage: string): void {
         const dialogRef = this.dialog.open(DialogEditMessageComponent, {
             panelClass: 'edit-message-dialog',
diff --git a/src/app/main/chat/chat.service.ts b/src/app/main/chat/chat.service.ts
index 4d4f9ca..ccffbba 100644
--- a/src/app/main/chat/chat.service.ts
+++ b/src/app/main/chat/chat.service.ts
@@ -262,7 +262,6 @@ export class ChatService {
         const messagesSnapshot = await getDocs(threadRef);
         const messageCount = messagesSnapshot.size;
         const newMessageRef = doc(threadRef, this.padNumber(messageCount, 4));
-
         const messageData: Message = {
             id: this.currentUser.currentUser.id,
             avatar: this.currentUser.currentUser.avatar,
diff --git a/src/app/main/chat/direct-message/direct-message.component.html b/src/app/main/chat/direct-message/direct-message.component.html
index 673e9ab..9f1816e 100644
--- a/src/app/main/chat/direct-message/direct-message.component.html
+++ b/src/app/main/chat/direct-message/direct-message.component.html
@@ -79,8 +79,9 @@ <h2>{{ dayDate(message.value.time) }}</h2>
                         <h5 (click)="openProfileById(message.value.id)">{{ message.value.name }}</h5>
                         <span>{{ dayTime(message.value.time) }} Uhr</span>
                     </div>
-                    <div class="message-text" [innerHTML]="message.value.message | highlightMentions" (click)="onMessageClick($event)">
+                    <div class="message-text" [ngStyle]="{ 'display': message.value.message.trim() === '' ? 'none' : 'block' }" [innerHTML]="message.value.message | highlightMentions" (click)="onMessageClick($event)">
                     </div>
+                    <img *ngIf="message.value.imageUrl" class="loaded-img" [src]="message.value.imageUrl" (click)="openDialogImage(message.value.imageUrl)">
                     <div *ngIf="!noReactions(message.value)">
                         <div class="reaction">
                             @if (message.value.reactions) {
@@ -155,9 +156,17 @@ <h1>{{ chatService.selectedUser.name }}</h1>
                 <textarea type="text" (keydown)="onKeydown($event)" [(ngModel)]="messageText" placeholder="Nachricht an {{
                         chatService.selectedUser.name}}" [matAutocomplete]="auto" (input)="onInputChange($event)"
                     [formControl]="formCtrl"></textarea>
+                <div *ngIf="previewUrl" class="preview-image" (click)="openDialogImage(previewUrl)">
+                    <button class="closeButton" (click)="clearPreview()" mat-icon-button>
+                        <img src="../../../assets/img/icons/close.svg"/>
+                    </button>
+                    <img [src]="previewUrl" alt="Image Preview" />
+                </div>
                 <div class="action-buttons">
                     <div class="button-wrapper">
-                        <button class="input-image" mat-icon-button>
+                        <button class="upload-image input-image" mat-icon-button (click)="upload.click()">
+                            <input id="fileUploadDirectmessage" type="file" #upload (change)="onFileSelected($event)"
+                                accept=".png,.jpg">
                             <img src="../../../assets/img/icons/add-gray.svg" alt="Add image" />
                         </button>
                         <div class="vector"></div>
diff --git a/src/app/main/chat/direct-message/direct-message.component.scss b/src/app/main/chat/direct-message/direct-message.component.scss
index ef24f63..6b163c6 100644
--- a/src/app/main/chat/direct-message/direct-message.component.scss
+++ b/src/app/main/chat/direct-message/direct-message.component.scss
@@ -433,6 +433,97 @@
     }
 }
 
+.upload-image {
+    border: none;
+    border-radius: 100%;
+    transition: all 225ms all ease-in-out;
+
+    input[type="file"] {
+        position: absolute;
+        top: 0;
+        right: 0;
+        margin: 0;
+        padding: 0;
+        font-size: 20px;
+        cursor: pointer;
+        opacity: 0;
+    }
+
+    &:hover {
+        background-color: rgba(0, 0, 0, 0.2);
+    }
+
+}
+
+.loaded-img {
+    max-width: 20rem;
+    max-height: 20rem;
+    width: auto;
+    height: auto;
+    object-fit: contain;
+    border: 1px solid var(--light-purple-line);
+    border-radius: 1.25rem;
+    position: relative;
+
+    &:hover {
+        cursor: pointer;
+        border-color: var(--purple-2);
+    }
+
+    &:active {
+        border-color: var(--purple-1);
+    }
+}
+
+.preview-image {
+    position: relative;
+    display: inline-block;
+    width: 8rem; // Feste Vorschau-Breite
+    height: 8rem; // Feste Vorschau-Höhe
+    margin-right: 1rem; // Abstand zur Nachricht
+    cursor: pointer;
+    border-radius: 1.25rem;
+    overflow: hidden;
+    border: 1px solid var(--light-purple-line);
+
+
+    &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.1);
+        /* Transparente Farbe */
+        opacity: 0;
+        transition: opacity 0.3s ease;
+    }
+
+    &:hover::after {
+        opacity: 1;
+    }
+
+    img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover; // Das Bild wird in den Container eingepasst, ohne Verzerrung
+        border-radius: 0.5rem;
+    }
+
+    .closeButton {
+        position: absolute;
+        top: 0.5rem;
+        right: 0.5rem;
+        z-index: 10; // Sicherstellen, dass es über dem Bild liegt
+        background-color: rgba(236, 238, 254, 0.5);
+
+        &:hover {
+            background-color: rgba(236, 238, 254, 1);
+        }
+    }
+}
+
 .input-container {
     padding: 0.5rem 1rem 1rem 1rem;
 }
diff --git a/src/app/main/chat/direct-message/direct-message.component.ts b/src/app/main/chat/direct-message/direct-message.component.ts
index 8f79254..01d7f99 100644
--- a/src/app/main/chat/direct-message/direct-message.component.ts
+++ b/src/app/main/chat/direct-message/direct-message.component.ts
@@ -24,26 +24,27 @@ import { map, Observable, startWith } from "rxjs";
 import { EmojiModule } from "@ctrl/ngx-emoji-mart/ngx-emoji";
 import { DialogEditMessageComponent } from "../../../dialog-edit-message/dialog-edit-message.component";
 import { HighlightMentionsPipe } from "../../../pipes/highlist-mentions.pipe";
+import { DialogImageComponent } from "../../../dialog-image/dialog-image.component";
 
 @Component({
     selector: "app-direct-message",
     standalone: true,
     imports: [
-    ChatComponent,
-    PickerComponent,
-    EmojiModule,
-    MatButtonModule,
-    MatIconModule,
-    CommonModule,
-    MatDialogModule,
-    ConversationsComponent,
-    MatButtonToggleModule,
-    FormsModule,
-    MatMenuModule,
-    ReactiveFormsModule,
-    MatAutocompleteModule,
-    HighlightMentionsPipe
-],
+        ChatComponent,
+        PickerComponent,
+        EmojiModule,
+        MatButtonModule,
+        MatIconModule,
+        CommonModule,
+        MatDialogModule,
+        ConversationsComponent,
+        MatButtonToggleModule,
+        FormsModule,
+        MatMenuModule,
+        ReactiveFormsModule,
+        MatAutocompleteModule,
+        HighlightMentionsPipe
+    ],
 
     templateUrl: "./direct-message.component.html",
     styleUrl: "./direct-message.component.scss",
@@ -57,6 +58,8 @@ export class DirectMessageComponent {
     @ViewChild("messageInput") messageInput!: ElementRef<HTMLInputElement>;
     pickerContext: string = "";
     currentMessagePadnumber: string = "";
+    previewUrl: string | ArrayBuffer | null = null;
+
 
     constructor(
         public dialog: MatDialog,
@@ -107,8 +110,8 @@ export class DirectMessageComponent {
     }
 
     addOrSubReaction(message: any, reaction: any,) {
-        debugger
-        this.chatService.addOrSubReaction(message, reaction, 'DM', this.chatService.selectedUser.id)
+        debugger;
+        this.chatService.addOrSubReaction(message, reaction, 'DM', this.chatService.selectedUser.id);
     }
 
     openDialogChannelInfo() {
@@ -145,10 +148,19 @@ export class DirectMessageComponent {
 
     noReactions(message: Message): boolean {
         return !message.reactions || Object.keys(message.reactions).length === 0;
-    }    
+    }
 
     async send() {
-        if (this.messageText.trim() !== "") {
+        let imageUrl = '';
+
+        if (this.previewUrl) {
+            const fileInput = document.getElementById('fileUploadDirectmessage') as HTMLInputElement;
+            imageUrl = await this.imageService.uploadFile(fileInput);
+            console.log(imageUrl)
+            this.clearPreview();
+        }
+
+        if ((this.messageText.trim() !== "") || (imageUrl.trim() !== "")) {
             const message: Message = {
                 id: "",
                 avatar: "",
@@ -159,7 +171,7 @@ export class DirectMessageComponent {
                 reactions: {},
                 padNumber: "",
                 btnReactions: [],
-                imageUrl: ''
+                imageUrl: imageUrl
             };
 
             await this.DMSerivce.sendMessage(
@@ -285,26 +297,52 @@ export class DirectMessageComponent {
         this.messageInput.nativeElement.focus();
     }
 
+    openDialogImage(imageUrl: string | ArrayBuffer) {
+        this.dialog.open(DialogImageComponent, {
+            panelClass: "image-dialog",
+            data: imageUrl
+        });
+    }
+
     openDialogEditMessage(messageId: string, currentMessage: string, sendedUserID: string): void {
         const dialogRef = this.dialog.open(DialogEditMessageComponent, {
             panelClass: 'edit-message-dialog',
-          data: { message: currentMessage }
+            data: { message: currentMessage }
         });
-      
+
         dialogRef.afterClosed().subscribe(result => {
-          if (result) {
-            const newContent = result;  // Das ist der neue Inhalt, den der Benutzer eingegeben hat
-            console.log('Updated content:', newContent);
-            this.DMSerivce.updateMessage(sendedUserID, messageId, newContent)
-              .then(() => console.log('Message updated successfully'))
-              .catch(error => console.error('Error updating message:', error));
-          } else {
-            console.log('Dialog closed without saving');
-          }
+            if (result) {
+                const newContent = result;  // Das ist der neue Inhalt, den der Benutzer eingegeben hat
+                console.log('Updated content:', newContent);
+                this.DMSerivce.updateMessage(sendedUserID, messageId, newContent)
+                    .then(() => console.log('Message updated successfully'))
+                    .catch(error => console.error('Error updating message:', error));
+            } else {
+                console.log('Dialog closed without saving');
+            }
         });
-      }
-      
-      
+    }
+
+
+    onFileSelected(event: any) {
+        const input = event.target as HTMLInputElement;
+        if (input.files) {
+            const file = input.files[0];
+            const reader = new FileReader();
+            reader.onload = () => {
+                this.previewUrl = reader.result;
+            };
+            reader.readAsDataURL(file);
+        }
+    }
+
+    uploadFile(input: HTMLInputElement) {
+        this.imageService.uploadFile(input);
+    }
+
+    clearPreview() {
+        this.previewUrl = null;
+    }
 
 
 }
diff --git a/src/app/main/chat/direct-message/directmessage.service.ts b/src/app/main/chat/direct-message/directmessage.service.ts
index b583c0f..501bf97 100644
--- a/src/app/main/chat/direct-message/directmessage.service.ts
+++ b/src/app/main/chat/direct-message/directmessage.service.ts
@@ -41,7 +41,7 @@ export class DirectmessageService {
             reactions: {},
             padNumber: "",
             btnReactions: [],
-            imageUrl: ''
+            imageUrl: message.imageUrl
         };
         try {
             await setDoc(newMessageRef, newMessage, { merge: true });
diff --git a/src/app/main/conversations/conversations.component.scss b/src/app/main/conversations/conversations.component.scss
index 3c30966..1df4abe 100644
--- a/src/app/main/conversations/conversations.component.scss
+++ b/src/app/main/conversations/conversations.component.scss
@@ -78,7 +78,8 @@ main {
     box-shadow: none !important;
 
     > mat-expansion-panel-header {
-        padding: 0 0 1rem 0;
+        padding: 0;
+        margin: 0 0 0.915rem 0;
 
         mat-panel-title {
             display: flex;
@@ -179,8 +180,9 @@ main {
             line-height: normal;
             font-size: 1.125rem;
             font-weight: 400;
-            overflow-wrap: break-word;
-            white-space: break-spaces;
+            overflow: hidden; 
+            text-overflow: ellipsis; 
+            white-space: nowrap;
             max-width: 8.25rem;
         }
     }
@@ -204,7 +206,7 @@ mat-button-toggle {
 .channel-list {
     display: flex;
     flex-direction: column;
-    gap: 1.5rem;
+    gap: 0.8125rem;
 
     .channel {
         display: flex;
@@ -250,6 +252,7 @@ mat-button-toggle {
 }
 
 .new-channel {
+    margin-top: 0.75rem;
     display: flex;
     align-items: center;
     gap: 0.625rem;
diff --git a/src/app/main/thread/thread.component.html b/src/app/main/thread/thread.component.html
index 4fd01b7..22c791f 100644
--- a/src/app/main/thread/thread.component.html
+++ b/src/app/main/thread/thread.component.html
@@ -39,12 +39,13 @@ <h1>Thread</h1>
                         <h5 (click)="openProfileById(initialMessage.id)">{{ initialMessage.name }}</h5>
                         <span>{{ dayTime(initialMessage.time) }} Uhr</span>
                     </div>
-                    <div class="message-text"
+                    <div class="message-text" [ngStyle]="{ 'display': initialMessage.message.trim() === '' ? 'none' : 'block' }"
                             [ngClass]="{'current-user-text': initialMessage.name === currentUser.currentUser.name}" (click)="onMessageClick($event)"
                             [innerHTML]="initialMessage.message | highlightMentions">
                         
 
                     </div>
+                    <img *ngIf="initialMessage.imageUrl" class="loaded-img" [src]="initialMessage.imageUrl" (click)="openDialogImage(initialMessage.imageUrl)">
                     <div *ngIf="!noReactions(initialMessage)">
                         <div class="reaction">
                             @if (initialMessage.reactions) {
@@ -121,12 +122,13 @@ <h5 (click)="openProfileById(initialMessage.id)">{{ initialMessage.name }}</h5>
                             <h5 (click)="openProfileById(message.id)">{{ message.name }}</h5>
                             <span>{{ dayTime(message.time) }} Uhr</span>
                         </div>
-                        <div class="message-text"
+                        <div class="message-text" [ngStyle]="{ 'display': message.message.trim() === '' ? 'none' : 'block' }"
                             [ngClass]="{'current-user-text': message.name === currentUser.currentUser.name}" (click)="onMessageClick($event)"
                             [innerHTML]="message.message | highlightMentions">
                         
 
                     </div>
+                    <img *ngIf="message.imageUrl" class="loaded-img" [src]="message.imageUrl" (click)="openDialogImage(message.imageUrl)">
                     <div *ngIf="!noReactions(message)">
                         <div class="reaction">
                             @if (message.reactions) {
@@ -179,9 +181,17 @@ <h5 (click)="openProfileById(message.id)">{{ message.name }}</h5>
             <textarea #messageInput matInput (input)="onInputChange($event)" [formControl]="formCtrl"
                 [matAutocomplete]="auto" type="text" (keydown)="onKeydown($event)" [(ngModel)]="messageText"
                 placeholder="Antworten..."></textarea>
+                <div *ngIf="previewUrl" class="preview-image" (click)="openDialogImage(previewUrl)">
+                    <button class="closeButton" (click)="clearPreview()" mat-icon-button>
+                        <img src="../../../assets/img/icons/close.svg"/>
+                    </button>
+                    <img [src]="previewUrl" alt="Image Preview" />
+                </div>
             <div class="action-buttons">
                 <div class="button-wrapper">
-                    <button class="input-image" mat-icon-button>
+                    <button class="upload-image input-image" mat-icon-button (click)="upload.click()">
+                        <input id="fileUploadThread" type="file" #upload (change)="onFileSelected($event)"
+                            accept=".png,.jpg">
                         <img src="../../../assets/img/icons/add-gray.svg" alt="Add image" />
                     </button>
                     <div class="vector"></div>
diff --git a/src/app/main/thread/thread.component.scss b/src/app/main/thread/thread.component.scss
index 8dbee9e..719e82d 100644
--- a/src/app/main/thread/thread.component.scss
+++ b/src/app/main/thread/thread.component.scss
@@ -389,6 +389,97 @@ header {
     }
 }
 
+.upload-image {
+    border: none;
+    border-radius: 100%;
+    transition: all 225ms all ease-in-out;
+
+    input[type="file"] {
+        position: absolute;
+        top: 0;
+        right: 0;
+        margin: 0;
+        padding: 0;
+        font-size: 20px;
+        cursor: pointer;
+        opacity: 0;
+    }
+
+    &:hover {
+        background-color: rgba(0, 0, 0, 0.2);
+    }
+
+}
+
+.loaded-img {
+    max-width: 20rem;
+    max-height: 20rem;
+    width: auto;
+    height: auto;
+    object-fit: contain;
+    border: 1px solid var(--light-purple-line);
+    border-radius: 1.25rem;
+    position: relative;
+
+    &:hover {
+        cursor: pointer;
+        border-color: var(--purple-2);
+    }
+
+    &:active {
+        border-color: var(--purple-1);
+    }
+}
+
+.preview-image {
+    position: relative;
+    display: inline-block;
+    width: 8rem; // Feste Vorschau-Breite
+    height: 8rem; // Feste Vorschau-Höhe
+    margin-right: 1rem; // Abstand zur Nachricht
+    cursor: pointer;
+    border-radius: 1.25rem;
+    overflow: hidden;
+    border: 1px solid var(--light-purple-line);
+
+
+    &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.1);
+        /* Transparente Farbe */
+        opacity: 0;
+        transition: opacity 0.3s ease;
+    }
+
+    &:hover::after {
+        opacity: 1;
+    }
+
+    img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover; // Das Bild wird in den Container eingepasst, ohne Verzerrung
+        border-radius: 0.5rem;
+    }
+
+    .closeButton {
+        position: absolute;
+        top: 0.5rem;
+        right: 0.5rem;
+        z-index: 10; // Sicherstellen, dass es über dem Bild liegt
+        background-color: rgba(236, 238, 254, 0.5);
+
+        &:hover {
+            background-color: rgba(236, 238, 254, 1);
+        }
+    }
+}
+
 .input-container {
     padding: 0.5rem 1rem 1rem 1rem;
 }
diff --git a/src/app/main/thread/thread.component.ts b/src/app/main/thread/thread.component.ts
index 89f500c..863d630 100644
--- a/src/app/main/thread/thread.component.ts
+++ b/src/app/main/thread/thread.component.ts
@@ -32,6 +32,7 @@ import { initializeApp } from "@angular/fire/app";
 import { PofileInfoCardComponent } from "../../pofile-info-card/pofile-info-card.component";
 import { HighlightMentionsPipe } from "../../pipes/highlist-mentions.pipe";
 import { DialogEditMessageComponent } from "../../dialog-edit-message/dialog-edit-message.component";
+import { DialogImageComponent } from "../../dialog-image/dialog-image.component";
 
 @Component({
     selector: "app-thread",
@@ -64,6 +65,7 @@ export class ThreadComponent implements OnChanges {
     formCtrl = new FormControl();
     filteredMembers: Observable<UsersList[]>;
     initialMessagePicker = false;
+    previewUrl: string | ArrayBuffer | null = null;
 
     constructor(
         public chatService: ChatService,
@@ -123,7 +125,16 @@ export class ThreadComponent implements OnChanges {
     }
 
     async send() {
-        if (this.messageText.trim() !== "") {
+        let imageUrl = '';
+
+        if (this.previewUrl) {
+            const fileInput = document.getElementById('fileUploadThread') as HTMLInputElement;
+            imageUrl = await this.imageService.uploadFile(fileInput);
+            console.log(imageUrl)
+            this.clearPreview();
+        }
+
+        if ((this.messageText.trim() !== "") || (imageUrl.trim() !== "")) {
             const message: Message = {
                 id: "",
                 avatar: "",
@@ -134,8 +145,9 @@ export class ThreadComponent implements OnChanges {
                 reactions: {},
                 padNumber: "",
                 btnReactions: [],
-                imageUrl: ''
+                imageUrl: imageUrl
             };
+
             await this.chatService.sendThreadMessage(
                 this.channelId,
                 this.messageId,
@@ -146,6 +158,7 @@ export class ThreadComponent implements OnChanges {
             this.loadMessages();
         }
     }
+
     showTooltip(key: string, value: number) {
         const tooltip = document.getElementById("customTooltip");
         if (tooltip) {
@@ -220,6 +233,13 @@ export class ThreadComponent implements OnChanges {
         }
     }
 
+    openDialogImage(imageUrl: string | ArrayBuffer) {
+        this.dialog.open(DialogImageComponent, {
+            panelClass: "image-dialog",
+            data: imageUrl
+        });
+    }
+
     openProfileCard(username: string) {
         const user = this.chatService.usersList.find(
             (u) => u.name === username,
@@ -398,19 +418,23 @@ export class ThreadComponent implements OnChanges {
     
     onFileSelected(event: any) {
         const input = event.target as HTMLInputElement;
-        if (input && input.files && input.files.length > 0) {
-            this.imageService.uploadFile(input).then((url: string) => {
-                if (url) {
-                    // Hier wird das Bild als <img> Tag in die Nachricht eingefügt
-                    this.messageText += `<img src="${url}" alt="Uploaded Image" style="max-width: 400px; height: auto;" />`;
-                } else {
-                    console.error('File upload returned an empty URL.');
-                }
-            }).catch((error) => {
-                console.error('Error uploading file:', error);
-            });
+        if (input.files) {
+            const file = input.files[0];
+            const reader = new FileReader();
+            reader.onload = () => {
+                this.previewUrl = reader.result;
+            };
+            reader.readAsDataURL(file);
         }
     }
+
+    uploadFile(input: HTMLInputElement) {
+        this.imageService.uploadFile(input);
+    }
+
+    clearPreview() {
+        this.previewUrl = null;
+    }