feat: drag and drop files handling

Author: wfpena

projects/angular-editor/src/lib/angular-editor.component.html

@@ -27,6 +27,8 @@
 
      <div
           class="angular-editor-wrapper"
+          draggable="true"
+          ngClass="{{dragAreaClass}}"
           #editorWrapper
      >
           <div

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;
 

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);
+  }
 }