Added file uploading + drag'n'drop

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;
 }
 
 /**