Skip to content

Fixes #18557 - Drag & drop difference between Firefox & Chromium browsers#20189

Open
og-khushalpatel wants to merge 1 commit intophpmyadmin:QA_5_2from
og-khushalpatel:fix/drag-and-drop-diff-between-browsers
Open

Fixes #18557 - Drag & drop difference between Firefox & Chromium browsers#20189
og-khushalpatel wants to merge 1 commit intophpmyadmin:QA_5_2from
og-khushalpatel:fix/drag-and-drop-diff-between-browsers

Conversation

@og-khushalpatel
Copy link
Copy Markdown
Contributor

Description

Fix the drag-and-drop import overlay being incorrectly activated on Chromium-based browsers (Chrome, Edge, Brave, Opera) when users drag internal page elements such as the phpMyAdmin logo, icons, or links. Firefox is not affected because it does not expose Files in dataTransfer.types for in-page drags.

Changes (single file: js/src/drag_drop_import.js)

1. New internalDomDrag flag (property)

Added a boolean property internalDomDrag to the DragDropImport object.
Tracks whether the current drag operation was initiated from within the page DOM (i.e., user dragged a page element, not an OS file).

2. New markInternalDrag(event) method

Bound to the dragstart event on document.
Since OS file drags never trigger dragstart on the page, this reliably distinguishes internal DOM drags from external file drags.

3. New clearInternalDrag() method

Resets internalDomDrag to false.
Bound to dragend and drop events to ensure the flag is always cleaned up.

4. Rewritten hasFiles(event) method (core fix)

The original one-liner:

return !(typeof event.originalEvent.dataTransfer.types === 'undefined' ||
    $.inArray('Files', event.originalEvent.dataTransfer.types) < 0 ||
    $.inArray('application/x-moz-nativeimage', event.originalEvent.dataTransfer.types) >= 0);

was replaced with a multi-layered detection approach:

  • Internal DOM drag check: If internalDomDrag is true, returns false immediately
  • **undefined** types guard: Returns false when dataTransfer.types is undefined.
  • Files type presence: Returns false if Files is not in the types list.
  • Firefox native image exclusion: Returns false if application/x-moz-nativeimage is present (retained from original logic).
  • Chromium internal element heuristic (new): Returns false if text/uri-list or text/html are present — these accompany in-page element drags on Chromium but are absent when dragging real OS files.

5. Updated drop(event) handler

Added an early hasFiles() guard at the top of the drop handler to reject non-file drops cleanly.
Added clearInternalDrag() call at the end of the handler to reset state.

6. New event listeners

$(document).on('dragstart', DragDropImport.markInternalDrag);
$(document).on('dragend drop', DragDropImport.clearInternalDrag);

Fixes #18557

Before submitting pull request, please review the following checklist:

  • [ X ] Make sure you have read our CONTRIBUTING.md document.
  • [ X ] Make sure you are making a pull request against the correct branch. For example, for bug fixes in a released version use the corresponding QA branch and for new features use the master branch. If you have a doubt, you can ask as a comment in the bug report or on the mailing list.
  • [ X ] Every commit has proper Signed-off-by line as described in our DCO. This ensures that the work you're submitting is your own creation.
  • [ X ] Every commit has a descriptive commit message.
  • Every commit is needed on its own, if you have just minor fixes to previous commits, you can squash them.
  • Any new functionality is covered by tests.

Demo

Screen.Recording.2026-02-27.200655.mp4

…um browsers

Signed-off-by: Khushal Patel <khushal.b.patel01@gmail.com>
@og-khushalpatel
Copy link
Copy Markdown
Contributor Author

Hi @MauricioFauth , I’m following up on this PR in case it got buried. Please let me know if any changes are needed from my side. Thank you!

Copy link
Copy Markdown
Member

@williamdes williamdes left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks good
What do you thing @kamil-tekiela and @liviuconcioiu ?

@kamil-tekiela
Copy link
Copy Markdown
Contributor

I'm not very good with JavaScript so I won't review the code but the change looks positive to me.

@liviuconcioiu
Copy link
Copy Markdown
Contributor

Same here

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants