Add Icons for apps

app/javascript/controllers/file_drop_controller.js

@@ -0,0 +1,96 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["input", "dropzone", "preview", "previewImage", "filename", "filesize"]
+
+  connect() {
+    // Prevent default drag behaviors on the whole document
+    ["dragenter", "dragover", "dragleave", "drop"].forEach(eventName => {
+      document.body.addEventListener(eventName, this.preventDefaults, false)
+    })
+  }
+
+  disconnect() {
+    ["dragenter", "dragover", "dragleave", "drop"].forEach(eventName => {
+      document.body.removeEventListener(eventName, this.preventDefaults, false)
+    })
+  }
+
+  preventDefaults(e) {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+
+  dragover(e) {
+    e.preventDefault()
+    e.stopPropagation()
+    this.dropzoneTarget.classList.add("border-blue-500", "bg-blue-50")
+  }
+
+  dragleave(e) {
+    e.preventDefault()
+    e.stopPropagation()
+    this.dropzoneTarget.classList.remove("border-blue-500", "bg-blue-50")
+  }
+
+  drop(e) {
+    e.preventDefault()
+    e.stopPropagation()
+    this.dropzoneTarget.classList.remove("border-blue-500", "bg-blue-50")
+
+    const files = e.dataTransfer.files
+    if (files.length > 0) {
+      // Set the file to the input element
+      this.inputTarget.files = files
+      this.handleFiles()
+    }
+  }
+
+  handleFiles() {
+    const file = this.inputTarget.files[0]
+    if (!file) return
+
+    // Validate file type
+    const validTypes = ["image/png", "image/jpg", "image/jpeg", "image/gif", "image/svg+xml"]
+    if (!validTypes.includes(file.type)) {
+      alert("Please upload a PNG, JPG, GIF, or SVG image")
+      this.clear()
+      return
+    }
+
+    // Validate file size (2MB)
+    if (file.size > 2 * 1024 * 1024) {
+      alert("File size must be less than 2MB")
+      this.clear()
+      return
+    }
+
+    // Show preview
+    this.filenameTarget.textContent = file.name
+    this.filesizeTarget.textContent = this.formatFileSize(file.size)
+
+    // Create preview image
+    const reader = new FileReader()
+    reader.onload = (e) => {
+      this.previewImageTarget.src = e.target.result
+      this.previewTarget.classList.remove("hidden")
+    }
+    reader.readAsDataURL(file)
+  }
+
+  clear(e) {
+    if (e) {
+      e.preventDefault()
+    }
+    this.inputTarget.value = ""
+    this.previewTarget.classList.add("hidden")
+  }
+
+  formatFileSize(bytes) {
+    if (bytes === 0) return "0 Bytes"
+    const k = 1024
+    const sizes = ["Bytes", "KB", "MB"]
+    const i = Math.floor(Math.log(bytes) / Math.log(k))
+    return Math.round(bytes / Math.pow(k, i) * 100) / 100 + " " + sizes[i]
+  }
+}