Added file uploading + drag'n'drop

src/app/chat/elements/message-box/message-box-viewmodel.ts

@@ -11,11 +11,5 @@ export class MessageBoxViewModel {
 
   message = signal<string>("")
   files = signal<FileDataWithPreview[]>([])
-
-  get dialogOpen() {
-    return this.files().length != 0
-  }
-  set dialogOpen(value: boolean) {
-    this.files.set([])
-  }
+  dialogOpen = signal<boolean>(false)
 }

src/app/chat/elements/message-box/message-box.html

@@ -1,5 +1,5 @@
 <div id="dragOverlay" tuiGroup orientation="vertical" [class.show]="isDraggingOverWindow">
-  <div class="method">
+  <div class="method" (drop)="onDrop($event)" (dragover)="onDragOver($event)">
     <div class="icon-holder">
       <tui-icon icon="@tui.file-up"/>
     </div>
@@ -33,7 +33,7 @@
       ></textarea>
     </tui-textfield>
 
-    <button tuiButton iconStart="@tui.send" (click)="sendMessageWithCaption(caption)"></button>
+    <button tuiButton iconStart="@tui.send" (click)="sendMessageWithCaption()"></button>
   </div>
 </ng-template>
 

src/app/chat/elements/message-box/message-box.ts

@@ -1,4 +1,4 @@
-import {Component, HostListener, inject, input} from '@angular/core';
+import {ChangeDetectorRef, Component, HostListener, inject, input} from '@angular/core';
 import {
   TuiAppearance,
   TuiButton,
@@ -40,6 +40,8 @@ import {TuiTextarea, TuiTextareaComponent} from '@taiga-ui/kit';
 export class MessageBox {
   viewModel = input.required<MessageBoxViewModel>()
 
+  cdr = inject(ChangeDetectorRef)
+
   textareaHeight = 25
   messageBoxRadius = 200
 
@@ -68,6 +70,22 @@ export class MessageBox {
     }
   }
 
+  onDragOver(event: DragEvent) {
+    // This is the "magic" line that enables the drop event to fire
+    event.preventDefault();
+    event.stopPropagation();
+  }
+
+  onDrop(event: DragEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    const files = event.dataTransfer?.files;
+    if (files) this.processFiles(files)
+    this.isDraggingOverWindow = false
+    this.cdr.detectChanges();
+  }
+
   onTextAreaInput(e: HTMLTextAreaElement) {
     const calculatedHeight = e.value.split(/\r?\n/).length * 25
     const calculatedRadius = (200 - this.textareaHeight)
@@ -79,8 +97,10 @@ export class MessageBox {
     this.processFiles(event.target.files)
   }
 
-  sendMessageWithCaption(e: TuiTextareaComponent) {
-    this.viewModel().onMessageSend((e.content() as string), this.viewModel().files())
+  sendMessageWithCaption() {
+    this.viewModel().onMessageSend(this.viewModel().message(), this.viewModel().files())
+    this.viewModel().files.set([])
+    this.viewModel().dialogOpen.set(false)
   }
 
   async processFiles(fileList: FileList) {
@@ -116,8 +136,8 @@ export class MessageBox {
         height: height,
         width: width,
       })
-      console.log(this.viewModel().files())
     }
+    this.viewModel().dialogOpen.set(true)
 
     function makePicturePreview(file: File): Promise<{ preview: string, height: number, width: number }> {
       return new Promise((resolve, reject) => {
@@ -143,6 +163,8 @@ export class MessageBox {
       });
     }
   }
+
+  protected readonly console = console;
 }
 
 /**