Drag and Drop files

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

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>