Fix drag and drop

hschne · Jan 4, 2024 · ebfc120 · ebfc120
1 parent da69ae1
commit ebfc120
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/app/javascript/controllers/drop_controller.js b/app/javascript/controllers/drop_controller.js
@@ -3,6 +3,10 @@ import { Controller } from "@hotwired/stimulus";
 export default class extends Controller {
   static targets = ["input", "text", "uploadIcon", "fileIcon"];
 
+  acceptDrop(event) {
+    event.preventDefault();
+  }
+
   drop(event) {
     event.preventDefault();
     if (event.dataTransfer.items) {

diff --git a/app/views/uploads/_form.html.erb b/app/views/uploads/_form.html.erb
@@ -16,7 +16,7 @@
                  class:
                    "flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300
                       border-dashed rounded-lg cursor-pointer border border-gray-800 background-white", 
-        data: { controller: "drop", action: "drop->drop#drop" } do %>
+        data: { controller: "drop", action: "dragover->drop#acceptDrop drop->drop#drop" } do %>
     <div class="flex flex-col items-center justify-center pt-5 pb-6 text-gray-500">
       <%= inline_svg "upload.svg",
       class: "icon-upload w-8 h-8 mb-4",
@@ -72,6 +72,6 @@
     <%= form.submit "Upload",
                 class:
                   "block text-white font-semibold outline-none bg-gray-800 w-full rounded-full grow px-12 py-3 text-sm focus:outline-none focus:ring sm:w-auto
-                                                                                                                                                                                                                                          " %>
+                                                                                                                                                                                                                                              " %>
   </div>
 <% end %>