adjust dropoze border style

app/javascript/elements/file_dropzone.js

@@ -5,19 +5,37 @@ export default actionable(targetable(class extends HTMLElement {
   static [target.static] = [
     'loading',
     'icon',
-    'input'
+    'input',
+    'area'
   ]
 
   connectedCallback () {
-    this.addEventListener('drop', this.onDrop)
-
     this.addEventListener('dragover', (e) => e.preventDefault())
-
+    this.addEventListener('drop', this.onDrop)
     document.addEventListener('turbo:submit-end', this.toggleLoading)
+    this.area?.addEventListener('dragover', this.onDragover)
+    this.area?.addEventListener('dragleave', this.onDragleave)
   }
 
   disconnectedCallback () {
+    this.removeEventListener('drop', this.onDrop)
     document.removeEventListener('turbo:submit-end', this.toggleLoading)
+    this.area?.removeEventListener('dragover', this.onDragover)
+    this.area?.removeEventListener('dragleave', this.onDragleave)
+  }
+
+  onDragover (e) {
+    if (e.dataTransfer?.types?.includes('Files')) {
+      this.style.backgroundColor = '#F7F3F0'
+      this.classList.remove('border-base-300', 'hover:bg-base-200/30')
+      this.classList.add('border-base-content/50')
+    }
+  }
+
+  onDragleave () {
+    this.style.backgroundColor = null
+    this.classList.remove('border-base-content/50')
+    this.classList.add('border-base-300', 'hover:bg-base-200/30')
   }
 
   onDrop (e) {