diff --git a/src/app/home/file-upload/drag-drop-file-upload.directive.ts b/src/app/home/file-upload/drag-drop-file-upload.directive.ts
new file mode 100644
index 000000000..3ae9f731b
--- /dev/null
+++ b/src/app/home/file-upload/drag-drop-file-upload.directive.ts
@@ -0,0 +1,37 @@
+import {
+    Directive,
+    EventEmitter,
+    HostBinding,
+    HostListener,
+    Output,
+} from '@angular/core';
+@Directive({
+    selector: '[appDragDropFileUpload]',
+})
+export class DragDropFileUploadDirective {
+    defaultColor = 'rgb(255 255 255 / 15%)';
+    @Output() fileDropped = new EventEmitter<any>();
+    @HostBinding('style.background-color') background = this.defaultColor;
+
+    @HostListener('dragover', ['$event']) dragOver(event: any) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.background = 'rgb(255 255 255 / 25%)';
+    }
+
+    @HostListener('dragleave', ['$event']) public dragLeave(event: any) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.background = this.defaultColor;
+    }
+
+    @HostListener('drop', ['$event']) public drop(event: any) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.background = this.defaultColor;
+        const files = event.dataTransfer.files;
+        if (files.length > 0) {
+            this.fileDropped.emit(files);
+        }
+    }
+}
diff --git a/src/app/home/home.module.ts b/src/app/home/home.module.ts
index 98a95f54e..32e4fd7e6 100644
--- a/src/app/home/home.module.ts
+++ b/src/app/home/home.module.ts
@@ -2,16 +2,17 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { NgxUploaderModule } from 'ngx-uploader';
 import { SharedModule } from '../shared/shared.module';
+import { DragDropFileUploadDirective } from './file-upload/drag-drop-file-upload.directive';
 import { FileUploadComponent } from './file-upload/file-upload.component';
 import { HomeComponent } from './home.component';
 import { HomeRoutingModule } from './home.routing';
 import { PlaylistInfoComponent } from './recent-playlists/playlist-info/playlist-info.component';
 import { TextImportComponent } from './text-import/text-import.component';
 import { UrlUploadComponent } from './url-upload/url-upload.component';
-
 @NgModule({
     imports: [CommonModule, HomeRoutingModule, NgxUploaderModule, SharedModule],
     declarations: [
+        DragDropFileUploadDirective,
         HomeComponent,
         FileUploadComponent,
         PlaylistInfoComponent,