Skip to content

fix(VFileUpload): adding/replacing files with dropzone click#22741

Merged
J-Sek merged 3 commits intovuetifyjs:v3-stablefrom
Abdulqudus001:fix/allow-click-handler-for-nondefault-input
Mar 23, 2026
Merged

fix(VFileUpload): adding/replacing files with dropzone click#22741
J-Sek merged 3 commits intovuetifyjs:v3-stablefrom
Abdulqudus001:fix/allow-click-handler-for-nondefault-input

Conversation

@Abdulqudus001
Copy link
Copy Markdown
Contributor

Description

The file upload input component previously checked if the hasBrowse and hasFiles is enabled and subsequently disables the click handler. This created a weird behaviour where users are not able to select a different file after the first selection. This PR removes the hasFiles check to allow users click the file upload to re-upload another file
Resolves #22737

Markup:

<v-container>
      <v-file-upload density="compact" />
</v-container>

@J-Sek J-Sek added T: bug Functionality that does not work as intended/expected C: VFileUpload labels Mar 21, 2026
@J-Sek
Copy link
Copy Markdown
Contributor

J-Sek commented Mar 21, 2026

  • should not break with inset-file-list
  • existing problem of clearing the field when user closes file dialog without selection.. it is easier to accidentally click on the drop area than the Browse button, so it would be nice to include a fix

Copy link
Copy Markdown
Contributor

@J-Sek J-Sek left a comment

Choose a reason for hiding this comment

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

At the very least, we should avoid breaking "inset" variant. The clearing is up for analysis and might need some discussion.

@Abdulqudus001
Copy link
Copy Markdown
Contributor Author

@J-Sek

  • I have resolved the bug with the inset-file list
  • For the field clearing when user doesn't select an item, I added a check to only allow setting the model value when the selectedFile array is not empty

@J-Sek J-Sek changed the title fix(VFileUpload): maintain the click handler after a file is selected fix(VFileUpload): adding/replacing files with dropzone click Mar 23, 2026
@J-Sek J-Sek merged commit 86f3568 into vuetifyjs:v3-stable Mar 23, 2026
9 checks passed
J-Sek pushed a commit that referenced this pull request Mar 23, 2026
- drop area should still be clickable after file selection (unless it shows the files within)
- accidental click should not clear the field (this behavior is aligned with other UI frameworks)

resolves #22737
'v-file-upload-dropzone',
{
'v-file-upload-dropzone--clickable': !hasBrowse && !hasFiles,
'v-file-upload-dropzone--clickable': !hasBrowse,
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Question: Shouldn't this have the same condition as the onClick-Listener?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

With the inset-file-list prop enabled, this section gets hidden when a file is selected, so we don't need to apply the logic here

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

Labels

C: VFileUpload T: bug Functionality that does not work as intended/expected

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug Report][3.12.3] VFileUpload with multiple not clickable for density="compact" when file is added

3 participants