From 6c5df3bbf1d5e522b40c7095dabfc2377a76ff33 Mon Sep 17 00:00:00 2001
From: Avi Flombaum <4515+aviflombaum@users.noreply.github.com>
Date: Mon, 7 Aug 2023 06:08:07 -0400
Subject: [PATCH] Drag and Drop files

---
 .../controllers/uploadzone_controller.js      | 22 +++++++++++++++++--
 app/views/tracks/new.html.erb                 |  2 +-
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/app/javascript/controllers/uploadzone_controller.js b/app/javascript/controllers/uploadzone_controller.js
index 245585a..5b4f1ee 100644
--- a/app/javascript/controllers/uploadzone_controller.js
+++ b/app/javascript/controllers/uploadzone_controller.js
@@ -1,11 +1,29 @@
 import { Controller } from "@hotwired/stimulus";
 
-// Connects to data-controller="uploadzone"
 export default class extends Controller {
   static targets = ["fileInput"];
-  connect() {}
+  connect() {
+    this.element.addEventListener("dragover", this.preventDragDefaults);
+    this.element.addEventListener("dragenter", this.preventDragDefaults);
+  }
+
+  disconnect() {
+    this.element.removeEventListener("dragover", this.preventDragDefaults);
+    this.element.removeEventListener("dragenter", this.preventDragDefaults);
+  }
+
+  preventDragDefaults(e) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
 
   trigger() {
     this.fileInputTarget.click();
   }
+
+  acceptFiles(event) {
+    event.preventDefault();
+    const files = event.dataTransfer ? event.dataTransfer.files : event.target.files;
+    debugger;
+  }
 }
diff --git a/app/views/tracks/new.html.erb b/app/views/tracks/new.html.erb
index 13a8f24..a7fed54 100644
--- a/app/views/tracks/new.html.erb
+++ b/app/views/tracks/new.html.erb
@@ -1,6 +1,6 @@
 <div class="w-full">
   <div class="p-6">
-    <div id="uploadzone" data-controller="uploadzone" data-action="click->uploadzone#trigger">
+    <div id="uploadzone" data-controller="uploadzone" data-action="click->uploadzone#trigger drop->uploadzone#acceptFiles">
       <button
         class="w-full rounded-lg bg-muted border-2 border-dashed border-gray-300 p-8 text-center hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
         <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mx-auto h-12 w-12 text-gray-400"><path d="M17.5 22h.5c.5 0 1-.2 1.4-.6.4-.4.6-.9.6-1.4V7.5L14.5 2H6c-.5 0-1 .2-1.4.6C4.2 3 4 3.5 4 4v3"></path><polyline points="14 2 14 8 20 8"></polyline><path d="M10 20v-1a2 2 0 1 1 4 0v1a2 2 0 1 1-4 0Z"></path><path d="M6 20v-1a2 2 0 1 0-4 0v1a2 2 0 1 0 4 0Z"></path><path d="M2 19v-3a6 6 0 0 1 12 0v3"></path></svg>