Show dropzone when dragover page and not input

alphagov · Oct 24, 2024 · 16960ef · 16960ef
1 parent 33891bc
commit 16960ef
Showing 1 changed file with 6 additions and 5 deletions.
diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.mjs b/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.mjs
@@ -116,12 +116,13 @@ export class FileUpload extends GOVUKFrontendComponent {
 
     // Bind change event to the underlying input
     this.$root.addEventListener('change', this.onChange.bind(this))
-    this.$wrapper.addEventListener('dragover', this.onDragOver.bind(this))
-    this.$wrapper.addEventListener(
-      'dragleave',
-      this.onDragLeaveOrDrop.bind(this)
-    )
+
+    // When a file is dropped on the input
     this.$wrapper.addEventListener('drop', this.onDragLeaveOrDrop.bind(this))
+
+    // When a file is dragged over the page (or dragged off the page)
+    document.addEventListener('dragover', this.onDragOver.bind(this))
+    document.addEventListener('dragleave', this.onDragLeaveOrDrop.bind(this))
   }
 
   /**