feat: uploadxDrop directive

src/app/directive-way/directive-way.component.html

@@ -1,7 +1,7 @@
 <div class="container">
   <div class="btns">
     <div class="btn-col">
-      <label class="upload-btn"
+      <label class="upload-btn" uploadxDrop
         >+
         <input
           #files

src/app/on-push/on-push.component.html

@@ -1,7 +1,7 @@
 <div class="container">
   <div class="btns">
     <div class="btn-col">
-      <label class="upload-btn"
+      <label class="upload-btn" uploadxDrop
         >+
         <input type="file" uploadx accept="image/*,video/*" style="display:none" />
       </label>

src/styles.scss

@@ -43,7 +43,10 @@ body {
     background-color: lighten($red, 5%);
   }
 }
-
+.uploadx-drop-active {
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
+  background-color: lighten($red, 10%);
+}
 .container {
   margin: 0;
   padding: 0;

src/uploadx/src/uploadx-drop.directive.ts

@@ -0,0 +1,38 @@
+import { ContentChild, Directive, HostBinding, HostListener } from '@angular/core';
+import { UploadxDirective } from './uploadx.directive';
+import { UploadxService } from './uploadx.service';
+
+@Directive({
+  selector: '[uploadxDrop]'
+})
+export class UploadxDropDirective {
+  @HostBinding('class.uploadx-drop-active')
+  active = false;
+
+  @ContentChild(UploadxDirective, { static: true })
+  fileInput: UploadxDirective;
+  constructor(private uploadService: UploadxService) {}
+
+  @HostListener('drop', ['$event'])
+  dropHandler(event: DragEvent) {
+    event.stopPropagation();
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'copy';
+    this.active = false;
+    const files = event.dataTransfer.files;
+    if (files && files.item(0)) {
+      this.uploadService.handleFileList(files, this.fileInput.uploadx);
+    }
+  }
+  @HostListener('dragover', ['$event'])
+  onDragOver(event: DragEvent) {
+    event.stopPropagation();
+    event.preventDefault();
+    this.active = true;
+  }
+
+  @HostListener('dragleave', ['$event'])
+  onDragLeave(event: DragEvent) {
+    this.active = false;
+  }
+}

src/uploadx/src/uploadx.module.ts

@@ -2,10 +2,11 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 import { UploadxDirective } from './uploadx.directive';
+import { UploadxDropDirective } from './uploadx-drop.directive';
 
 @NgModule({
   imports: [CommonModule],
-  declarations: [UploadxDirective],
-  exports: [UploadxDirective]
+  declarations: [UploadxDirective, UploadxDropDirective],
+  exports: [UploadxDirective, UploadxDropDirective]
 })
 export class UploadxModule {}