Skip to content

feat(VFileInput): add visual drag-over feedback#22966

Closed
sridhar-3009 wants to merge 6 commits into
vuetifyjs:masterfrom
sridhar-3009:feat/file-input-drag-feedback-20576
Closed

feat(VFileInput): add visual drag-over feedback#22966
sridhar-3009 wants to merge 6 commits into
vuetifyjs:masterfrom
sridhar-3009:feat/file-input-drag-feedback-20576

Conversation

@sridhar-3009

Copy link
Copy Markdown
Contributor

Closes #20576

Problem

When dragging files over VFileInput, there was no visible indication that the area accepts dropped files. The isDragging state existed and the v-file-input--dragging CSS class was applied, but had no visual styling beyond a z-index change.

Fix

Added drag-over visual feedback styles:

  • For all variants: a primary-colored border appears during drag
  • For outlined variant: full-opacity border with primary color using --v-field-border-opacity
  • Added $file-input-dragging-border-color and $file-input-dragging-opacity SASS variables for customization

Result

Users now get clear visual feedback when dragging files over the input area, similar to other file drop implementations (Quasar, etc.).

@J-Sek

J-Sek commented Jun 28, 2026

Copy link
Copy Markdown
Contributor

closing in favor of #22909

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.

[Feature Request] Add Drag and Drop Visual Feedback to v-file-input Component.

2 participants