Support drag and drop for video upload and torrent file import

1 files changed, 30 insertions, 0 deletions

diff --git a/client/src/app/videos/+video-edit/video-add-components/drag-drop.directive.ts b/client/src/app/videos/+video-edit/video-add-components/drag-drop.directive.ts
new file mode 100644
index 000000000..07c7d34ac
--- /dev/null
+++ b/client/src/app/videos/+video-edit/video-add-components/drag-drop.directive.ts
@@ -0,0 +1,30 @@
+import { Directive, Output, EventEmitter, HostBinding, HostListener } from '@angular/core'
+
+@Directive({
+  selector: '[dragDrop]'
+})
+export class DragDropDirective {
+  @Output() onFileDropped = new EventEmitter<FileList>()
+
+  @HostBinding('class.dragover') dragover = false
+
+  @HostListener('dragover', ['$event']) onDragOver(e: Event) {
+    e.preventDefault()
+    e.stopPropagation()
+    this.dragover = true
+  }
+
+  @HostListener('dragleave', ['$event']) public onDragLeave(e: Event) {
+    e.preventDefault()
+    e.stopPropagation()
+    this.dragover = false
+  }
+
+  @HostListener('drop', ['$event']) public ondrop(e: DragEvent) {
+    e.preventDefault()
+    e.stopPropagation()
+    this.dragover = false
+    let files = e.dataTransfer.files
+    if (files.length > 0) this.onFileDropped.emit(files)
+  }
+}