Skip to content

[6.x] Fix asset selector drag-to-upload covering footer but not handling drops#14551

Open
duncanmcclean wants to merge 3 commits into6.xfrom
assets-drag-to-upload
Open

[6.x] Fix asset selector drag-to-upload covering footer but not handling drops#14551
duncanmcclean wants to merge 3 commits into6.xfrom
assets-drag-to-upload

Conversation

@duncanmcclean
Copy link
Copy Markdown
Member

This pull request fixes an issue where dragging a file onto the asset selector flyout's footer area would open the file in a new browser tab instead of uploading it, and leave the "Drop File to Upload" overlay stuck.

This was happening because the drag-to-upload overlay used absolute inset-0 which visually covered the entire stack (including the footer), but the actual drop handler only existed on the Uploader component wrapping the browser content — not the footer. Dropping on the footer had no handler to call preventDefault(), so the browser's default behavior kicked in.

This PR fixes it by moving the Uploader wrapper from inside the Browser component up to the Selector component, so it wraps the entire flyout content including the footer. When an external uploader is provided to the Browser, its internal one is disabled (drag events are unbound so they bubble up to the parent). The standalone asset browser page is unaffected since it still uses its own internal uploader.

An alternate approach would be to confine the overlay to the stack's content area so it doesn't lay on top of the footer, but making the whole stack droppable felt like the better UX.

Fixes #14536

Comment thread resources/js/components/assets/Uploader.vue
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.

Asset browser flyout: dropping files of the bottom the listing area opens image in new tab instead of uploading

2 participants