Fix drop

hschne · Dec 23, 2023 · be999de · be999de
1 parent 703e43b
commit be999de
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 4 deletions.
diff --git a/app/javascript/controllers/drop_controller.js b/app/javascript/controllers/drop_controller.js
@@ -1,7 +1,22 @@
 import { Controller } from "@hotwired/stimulus";
 
 export default class extends Controller {
-  static targets = ["text", "uploadIcon", "fileIcon"];
+  static targets = ["input", "text", "uploadIcon", "fileIcon"];
+
+  drop(event) {
+    event.preventDefault();
+    if (event.dataTransfer.items) {
+      const files = event.dataTransfer.items;
+      const file = files[0].getAsFile();
+      const dataTransfer = new DataTransfer();
+      dataTransfer.items.add(file);
+      this.inputTarget.files = dataTransfer.files;
+
+      this.textTarget.innerHTML = file.name;
+      this.uploadIconTarget.classList.toggle("hidden");
+      this.fileIconTarget.classList.toggle("hidden");
+    }
+  }
 
   display(event) {
     const file = event.target.files[0];

diff --git a/app/views/uploads/_form.html.erb b/app/views/uploads/_form.html.erb
@@ -17,7 +17,7 @@
                    "
                       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" } do %>
+        data: { controller: "drop", action: "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",
@@ -37,7 +37,12 @@
       </div>
     </div>
 
-    <%= form.file_field :data, class: "hidden", data: { action: "change->drop#display" } %>
+    <%= form.file_field :data,
+                    class: "hidden h-full w-full",
+                    data: {
+                      drop_target: "input",
+                      action: "change->drop#display",
+                    } %>
   <% end %>
 
   <div class="flex flex-col w-full sm:flex-row align-center grow gap-4">
@@ -68,6 +73,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 %>