implemented old image upload

Co-Authored-By: Kaser Mahmood <[email protected]>
Kakar21 · Sep 6, 2024 · c276dc3 · c276dc3
1 parent 9acc61c
commit c276dc3
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 21 deletions.
diff --git a/src/app/main/chat/chat.component.html b/src/app/main/chat/chat.component.html
@@ -92,6 +92,9 @@ <h5 (click)="openProfileById(message.value.id)">{{ message.value.name}}</h5>
                     <div #message class="message-text" [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>
                     <div *ngIf="!noReactions(message.value)">
                         <div class="reaction">
                             @if (message.value.reactions) {
@@ -149,7 +152,7 @@ <h5 (click)="openProfileById(message.value.id)">{{ message.value.name}}</h5>
                 </div>
             </div>
             }
-            <div class="emoji-picker" *ngIf="isPickerVisible && pickerContext === 'reaction'">
+            <div class="emoji-picker" *ngIf="isPickerVisible && pickerContext === 'reaction'" [ngStyle]="{ top: pickerPosition.top, left: pickerPosition.left }">
                 <emoji-mart (emojiClick)="addEmoji($event)"></emoji-mart>
             </div>
 
@@ -176,19 +179,32 @@ <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"
                     [matAutocomplete]="auto" type="text" (keydown)="onKeydown($event)" [(ngModel)]="messageText"
                     placeholder="Nachricht an #{{
                         chatService.currentChannel.name
-                    }}"></textarea>
+                    }}">
+                </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">
+                    <img [src]="previewUrl" alt="Image Preview" />
+                </div>
                 <div class="action-buttons">
                     <div class="button-wrapper">
-                        <button class="input-image" mat-icon-button (click)="fileInput.click()">
+                        <button class="upload-image input-image" mat-icon-button (click)="upload.click()">
+                            <input id="fileUpload" type="file" #upload (change)="onFileSelected($event)"
+                                accept=".png,.jpg">
                             <img src="../../../assets/img/icons/add-gray.svg" alt="Add image" />
                         </button>
-                        <input type="file" #fileInput style="display: none;" (change)="onFileSelected($event)" accept="image/*"/>
                         <div class="vector"></div>
                         <button class="input-emoji" mat-icon-button (click)="
                                 togglePicker('input', '', $event);
@@ -197,14 +213,14 @@ <h1>{{ chatService.currentChannel.name }}</h1>
                             <img src="../../../assets/img/icons/sentiment_satisfied.svg" alt="Add emoji" />
                         </button>
 
-                        <div class="emoji-picker" *ngIf="isPickerVisible && pickerContext === 'input'">
+                        <div class="emoji-picker" *ngIf="isPickerVisible && pickerContext === 'input'" style="bottom: 1rem; left: 3.5rem;">
                             <emoji-mart (emojiClick)="addEmoji($event)"></emoji-mart>
                         </div>
                         <button class="input-at" mat-icon-button (click)="addAtSymbol()">
                             <img src="../../../assets/img/icons/alternate_email.svg" alt="Tag someone" />
                         </button>
                     </div>
-                    <button class="input-send" (click)="send()" mat-icon-button>
+                    <button class="input-send" (click)="send()" (click)="uploadFile(upload)" mat-icon-button>
                         <img src="../../../assets/img/icons/send-button.svg" alt="Send message" />
                     </button>
                 </div>

diff --git a/src/app/main/chat/chat.component.ts b/src/app/main/chat/chat.component.ts
@@ -307,6 +307,15 @@ export class ChatComponent implements AfterViewInit, AfterViewChecked {
     }
 
     async send() {
+        let imageUrl = '';
+
+        if (this.previewUrl) {
+            const fileInput = document.getElementById('fileUpload') as HTMLInputElement;
+            imageUrl = await this.imageService.uploadFile(fileInput);
+            console.log(imageUrl)
+            this.clearPreview();
+
+        }
         if (this.messageText.trim() !== "") {
             const message: Message = {
                 id: "",
@@ -318,15 +327,15 @@ export class ChatComponent implements AfterViewInit, AfterViewChecked {
                 reactions: {},
                 padNumber: "",
                 btnReactions: [],
-                imageUrl: '' // Dies könnte genutzt werden, wenn Sie eine separate Feld für das Bild in Ihrer Datenbank haben
+                imageUrl: imageUrl
             };
 
             await this.chatService.sendMessage(
                 this.chatService.currentChannelID,
                 message,
             );
             this.messageText = ""; // Leert das Textfeld nach dem Senden der Nachricht
-            this.scrollToBottom(); // Scrollt das Chatfenster nach unten
+            await this.scrollToBottom(); // Scrollt das Chatfenster nach unten
         }
     }
 
@@ -513,16 +522,13 @@ export class ChatComponent implements AfterViewInit, AfterViewChecked {
 
     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) {
-                    this.messageText += `<img src="${url}" alt="Uploaded Image"/>`;
-                } 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);
         }
     }
 

diff --git a/src/app/main/thread/thread.component.html b/src/app/main/thread/thread.component.html
@@ -181,11 +181,9 @@ <h5 (click)="openProfileById(message.id)">{{ message.name }}</h5>
                 placeholder="Antworten..."></textarea>
             <div class="action-buttons">
                 <div class="button-wrapper">
-                    <button class="input-image" mat-icon-button (click)="fileInput.click()">
+                    <button class="input-image" mat-icon-button>
                         <img src="../../../assets/img/icons/add-gray.svg" alt="Add image" />
                     </button>
-                    <input type="file" #fileInput style="display: none;" (change)="onFileSelected($event)"
-                        accept="image/*" />
                     <div class="vector"></div>
                     <button class="input-emoji" mat-icon-button (click)="togglePicker('input', '',$event, false);$event.stopPropagation()">
                         <img src="../../../assets/img/icons/sentiment_satisfied.svg" alt="Add emoji" />

diff --git a/src/app/start/avatar/avatar.component.scss b/src/app/start/avatar/avatar.component.scss
@@ -73,6 +73,7 @@ h1 {
     > img {
         width: 100%;
         height: 100%;
+        object-fit: cover;
     }
 }