From 9c6749ff36eb8b96bbad36cbd9723299556c52d3 Mon Sep 17 00:00:00 2001 From: beeps Date: Fri, 25 Oct 2024 13:19:26 +0100 Subject: [PATCH] Change dragover to dragenter MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Dragenter is fired only once when the drag first touches the page, whereas dragover fires continuously. As we’re only toggling the visbility of the dropzone, dragenter will suffice for our needs. --- .../src/govuk/components/file-upload/file-upload.mjs | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 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 9eb5c5852a..3cad2a5e4c 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 @@ -120,7 +120,7 @@ export class FileUpload extends GOVUKFrontendComponent { 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('dragenter', this.onDragEnter.bind(this)) document.addEventListener('dragleave', this.onDragLeaveOrDrop.bind(this)) } @@ -175,8 +175,14 @@ export class FileUpload extends GOVUKFrontendComponent { /** * When a file is dragged over the container, show a visual indicator that a * file can be dropped here. + * + * @param {DragEvent} event - the drag event */ - onDragOver() { + onDragEnter(event) { + // Check if the thing being dragged is a file (and not text or something + // else), we only want to indicate files. + console.log(event) + // eslint-disable-next-line // @ts-ignore this.$wrapper.classList.add('govuk-file-upload-wrapper--show-dropzone')