From 6b1378b4df61e7aa92b0903873bc947d5aa3e56c Mon Sep 17 00:00:00 2001
From: Wilson Fernando Pena <wilsonf.pena@gmail.com>
Date: Tue, 6 Feb 2024 06:56:31 -0300
Subject: [PATCH] feat: drag and drop files handling

---
 .../src/lib/angular-editor.component.html     |  2 +
 .../src/lib/angular-editor.component.scss     | 17 ++++++
 .../src/lib/angular-editor.component.ts       | 57 +++++++++++++++++++
 3 files changed, 76 insertions(+)

diff --git a/projects/angular-editor/src/lib/angular-editor.component.html b/projects/angular-editor/src/lib/angular-editor.component.html
index 321bed9..84ad89e 100644
--- a/projects/angular-editor/src/lib/angular-editor.component.html
+++ b/projects/angular-editor/src/lib/angular-editor.component.html
@@ -27,6 +27,8 @@
 
      <div
           class="angular-editor-wrapper"
+          draggable="true"
+          ngClass="{{dragAreaClass}}"
           #editorWrapper
      >
           <div
diff --git a/projects/angular-editor/src/lib/angular-editor.component.scss b/projects/angular-editor/src/lib/angular-editor.component.scss
index b30d741..6fe17ae 100644
--- a/projects/angular-editor/src/lib/angular-editor.component.scss
+++ b/projects/angular-editor/src/lib/angular-editor.component.scss
@@ -1,5 +1,22 @@
 @import "style";
 
+.droparea {
+  font-size: 1.5rem;
+  border: 3px dashed #bbb;
+  padding: 1.5rem;
+  background-color: #eff;
+  color: #aaa;
+}
+
+.dragarea {
+  font-size: 1.5rem;
+  border: 3px solid #bbb;
+  padding: 1.5rem;
+  background-color: #fff;
+  color: #bbb;
+}
+
+
 .angular-editor {
   position: relative;
 
diff --git a/projects/angular-editor/src/lib/angular-editor.component.ts b/projects/angular-editor/src/lib/angular-editor.component.ts
index 9149b15..0dde3a1 100644
--- a/projects/angular-editor/src/lib/angular-editor.component.ts
+++ b/projects/angular-editor/src/lib/angular-editor.component.ts
@@ -803,4 +803,61 @@ export class AngularEditorComponent
     html = html.replace('position: fixed;', '');
     return html;
   }
+
+  // TODO: Improve event handling
+  // TODO: Improve styles
+  dragAreaClass = '';
+  @HostListener('dragover', ['$event']) onDragOver(event: any) {
+    this.dragAreaClass = 'droparea';
+    event.preventDefault();
+  }
+  @HostListener('dragenter', ['$event']) onDragEnter(event: any) {
+    this.dragAreaClass = 'droparea';
+    event.preventDefault();
+  }
+  @HostListener('dragend', ['$event']) onDragEnd(event: any) {
+    this.dragAreaClass = '';
+    event.preventDefault();
+  }
+  @HostListener('dragleave', ['$event']) onDragLeave(event: any) {
+    this.dragAreaClass = '';
+    event.preventDefault();
+  }
+  @HostListener('drop', ['$event']) onDrop(event: any) {
+    this.dragAreaClass = '';
+    event.preventDefault();
+    event.stopPropagation();
+    if (event.dataTransfer.files) {
+      let files: FileList = event.dataTransfer.files;
+      this.saveFiles(files);
+    }
+  }
+
+  // TODO: Use error
+  error: string;
+
+  isValidFile(file): boolean {
+    const fileType = file['type'];
+    const validImageTypes = ['image/gif', 'image/jpeg', 'image/png'];
+    if (!validImageTypes.includes(fileType)) {
+      return false;
+    }
+    return true;
+  }
+
+  saveFiles(files: FileList): void {
+    if (files.length > 1) {
+      this.error = 'Only one file at time allow';
+      return;
+    }
+
+    const file = files[0];
+    if (!this.isValidFile(file)) {
+      this.error = `Invalid file type`;
+      return;
+    }
+
+    this.error = '';
+    this.editorService.uploadImage(file);
+  }
 }