vuetifyjs/vuetify

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

Open

#20576 opened on Oct 14, 2024

View on GitHub
 (1 comment) (3 reactions) (0 assignees)TypeScript (40,995 stars) (7,139 forks)batch import
C: New ComponentT: featuregood first issue

Description

Problem to solve

When local files are dragged onto the v-input-file component, there is an absence of clear visual feedback, which might cause confusion. Users will not be certain whether drag and drop functionality is operational.

Proposed solution

I propose adding visual changes, such as a distinct border color when a file is being dragged over the input area, similar to what the Quasar framework does. This would render it more intuitive for users.

image

Contributor guide

Tech stack
vuetypescriptcss
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
under 1 hour
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Basic knowledge of Vue componentsUnderstanding of CSS styling
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
80
Research direction
The issue requests adding visual feedback (e.g., border color change) when files are dragged over the v file input component. The implementation can likely be achieved by adding a CSS class on drag events (dragenter, dragleave, drop) in the component. Refer to the existing Vuetify file input implementation (packages/vuetify/src/components/VFileInput/). Check how other components handle drag states and ensure accessibility (e.g., focus indicators). No linked PRs or maintainer comments indicate a specific approach; the proposed solution references Quasar's design as an example.