GO-129 Add drag&drop zone to upload FS drafts

app/components/common/icon_component.rb

@@ -25,6 +25,7 @@ class IconComponent < ViewComponent::Base
       "cloud-arrow-down" => "M12 9.75v6.75m0 0-3-3m3 3 3-3m-8.25 6a4.5 4.5 0 0 1-1.41-8.775 5.25 5.25 0 0 1 10.233-2.33 3 3 0 0 1 3.758 3.848A3.752 3.752 0 0 1 18 19.5H6.75Z",
       "paper-airplane" => "M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5",
       "document-arrow-down" => "M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m.75 12 3 3m0 0 3-3m-3 3v-6m-1.5-9H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z",
+      "document-text" => "M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z",
       "folder-arrow-down" => "m9 13.5 3 3m0 0 3-3m-3 3v-6m1.06-4.19-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
     }.freeze
 

app/javascript/controllers/dropzone_controller.js

@@ -0,0 +1,52 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    const dropzone = document.getElementById('dropzone');
+    const fileInput = document.getElementById('content[]');
+    const fileList = document.getElementById('fileList');
+
+    dropzone.addEventListener('dragover', (e) => {
+      e.preventDefault();
+      dropzone.classList.add('border-blue-500', 'border-2');
+    });
+
+    dropzone.addEventListener('dragleave', () => {
+      dropzone.classList.remove('border-blue-500', 'border-2');
+    });
+
+    dropzone.addEventListener('drop', (e) => {
+      e.preventDefault();
+      dropzone.classList.remove('border-blue-500', 'border-2');
+
+      const files = e.dataTransfer.files;
+      this.handleFiles(files);
+    });
+
+    fileInput.addEventListener('change', (e) => {
+      const files = e.target.files;
+      this.handleFiles(files);
+    });
+  }
+
+  handleFiles(files) {
+    const fileInput = document.getElementById('content[]');
+    fileInput.files = files;
+
+    for (const file of files) {
+      const listItem = document.createElement('div');
+      listItem.textContent = `${file.name} (${this.formatBytes(file.size)})`;
+      fileList.appendChild(listItem);
+    }
+  }
+
+  formatBytes(bytes) {
+    if (bytes === 0) return '0 Bytes';
+
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+  }
+}

app/javascript/controllers/index.js

@@ -28,6 +28,9 @@ application.register("form", FormController)
 import MessageDraftsController from "./message_drafts_controller"
 application.register("message-drafts", MessageDraftsController)
 
+import DropzoneController from "./dropzone_controller"
+application.register("dropzone", DropzoneController)
+
 import TriStateCheckboxController from "./tri_state_checkbox_controller"
 application.register("tri-state-checkbox", TriStateCheckboxController)
 

app/views/fs/message_drafts/_new_form.html.erb

@@ -1,9 +1,24 @@
 <%= form_with url: fs_message_drafts_path, id: form_id, multipart: true, class: 'w-full' do |f| %>
   <div class="self-stretch px-6 pt-6 flex-col justify-start items-start flex">
     <div class="mb-4 w-full">
-      <div>
-        <label for="content[]" class="block mb-2 text-base font-medium text-gray-900">XML obsah správ</label>
-        <%= file_field_tag 'content[]', multiple: true %>
+      <div class="col-span-full">
+        <label for="cover-photo" class="block text-sm font-medium leading-6 text-gray-900">XML obsah správ</label>
+        <div id="dropzone" class="mt-2 flex justify-center rounded-lg border border-dashed border-gray-900/25 px-6 py-10">
+          <%= content_tag(:div, {
+            "data-controller": "dropzone",
+            class: "text-center mt-6"
+          }) do %>
+            <%= render Common::IconComponent.new("document-text", classes: "mx-auto h-12 w-12 text-gray-300") %>
+            <div class="mt-4 text-sm leading-6 text-gray-600">
+              <label for="content[]" class="relative cursor-pointer rounded-md bg-white font-semibold text-indigo-600 focus-within:outline-none focus-within:ring-2 focus-within:ring-indigo-600 focus-within:ring-offset-2 hover:text-indigo-500">
+                <span>Nahrajte súbory</span>
+                <input id="content[]" name="content[]" type="file" class="sr-only" multiple>
+              </label>
+              <p class="pl-1">alebo ich sem presuňte</p>
+            </div>
+            <div class="mt-6 text-center" id="fileList"></div>
+          <% end %>
+        </div>
       </div>
     </div>
   </div>
@@ -19,4 +34,4 @@
       Nahrať správy
     </button>
   <% end %>
-</div>
+</div>