From 16960ef59e224a9c134ed5f5a49d0358724df7f5 Mon Sep 17 00:00:00 2001 From: beeps Date: Thu, 24 Oct 2024 09:44:21 +0100 Subject: [PATCH] Show dropzone when dragover page and not input --- .../src/govuk/components/file-upload/file-upload.mjs | 11 ++++++----- 1 file changed, 6 insertions(+), 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 index 919d1689f1..737235c764 100644 --- 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)) } /**