Thanks to visit codestin.com
Credit goes to github.com

Skip to content

fix(useDropZone): validate all file types individually when dropping multiple files #4325

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 2 commits into from
Dec 24, 2024
Merged

fix(useDropZone): validate all file types individually when dropping multiple files #4325

merged 2 commits into from
Dec 24, 2024

Conversation

LouisMazel
Copy link
Contributor

Before submitting the PR, please make sure you do the following

  • Read the Contributing Guidelines.
  • Read the Pull Request Guidelines.
  • Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
  • Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
  • Ideally, include relevant tests that fail without this PR but pass with it.
⚠️ Slowing down new functions

Warning: Slowing down new functions

As the VueUse audience continues to grow, we have been inundated with an overwhelming number of feature requests and pull requests. As a result, maintaining the project has become increasingly challenging and has stretched our capacity to its limits. As such, in the near future, we may need to slow down our acceptance of new features and prioritize the stability and quality of existing functions. Please note that new features for VueUse may not be accepted at this time. If you have any new ideas, we suggest that you first incorporate them into your own codebase, iterate on them to suit your needs, and assess their generalizability. If you strongly believe that your ideas are beneficial to the community, you may submit a pull request along with your use cases, and we would be happy to review and discuss them. Thank you for your understanding.

Description

This PR fixes a bug in the useDropzone composable related to file type validation. Previously, the validation would pass if any of the dropped files matched any of the allowed types, potentially allowing invalid file types to be accepted.

Bug details:

  • In the current implementation, the some() method checks if any file type matches the allowed types, making the validation pass even if some files don't match the criteria
  • This creates a security issue as users could drop files with unauthorized types along with valid ones

Fix:

  • Modified the checkDataTypes function to validate each file type individually
  • Now ensures all dropped files match the allowed types before accepting them
  • Maintains backward compatibility with both function and array validation approaches
  • Preserves the existing API while fixing the validation logic

Additional context

The fix changes the validation approach from an any-match to an all-match strategy, which better aligns with expected dropzone behavior. This is particularly important for security-conscious applications where file type validation is critical.

Example of the issue:
If allowed types are ['image/jpg', 'image/png'] and someone drops both a .jpg and .exe file, the previous implementation would incorrectly validate this as acceptable because at least one file (the .jpg) matched the criteria.

@dosubot dosubot bot added the size:S This PR changes 10-29 lines, ignoring generated files. label Nov 4, 2024
@LouisMazel LouisMazel changed the title fix(useDropzone): check type validity for multiples files fix(useDropZone): check type validity for multiples files Nov 4, 2024
@LouisMazel LouisMazel changed the title fix(useDropZone): check type validity for multiples files fix(useDropZone): validate all file types individually when dropping multiple files Nov 4, 2024
@LouisMazel
fix(useDropzone): check type validity for multiples files
4e7380b 
If you upload multiple files and one of them is invalid, all files will be added
@ilyaliao
Copy link
Member

ilyaliao commented Nov 5, 2024

Hey, can you try the demo result? It doesn't seem to work.

-.Compressed.with.FlexClip.mp4

@LouisMazel
Copy link
Contributor Author

LouisMazel commented Nov 5, 2024 •
edited
Loading

Hey, can you try the demo result? It doesn't seem to work.

-.Compressed.with.FlexClip.mp4

This bug seems to come from the demo, if you try with real images and svgs everything works fine

Check out this video:

Screen.Recording.2024-11-05.at.5.55.18.PM.mp4

ilyaliao
ilyaliao reviewed Nov 6, 2024
View reviewed changes
@ilyaliao
Copy link
Member

ilyaliao commented Nov 6, 2024 •
edited
Loading

Sorry, can you test it in Safari?

After testing, it works well in Chrome, but in Safari, isOverDropZone is always true when dragging because types is empty (I guess this is related to Safari's security policy). However, the drop result is correct.

Please correct me if I'm wrong.

@dosubot dosubot bot added size:M This PR changes 30-99 lines, ignoring generated files. and removed size:S This PR changes 10-29 lines, ignoring generated files. labels Nov 6, 2024
@LouisMazel
Copy link
Contributor Author

LouisMazel commented Nov 6, 2024 •
edited
Loading

@ilyaliao

Yes you are right, we must invalidate if no type is found in the DataTransferList.

I just updated the code :

For Safari, the limitation is that we can check the validity of the files only during the drop event. For other events (drag*), the event.dataTransfer is not transmitted.
In my update, on Safari, isOverDropZone will always be true during the drag (I prefer this solution because the fact is that we are really "over" the drop zone, may be we can have 2 refs: isOverDropZone and isValidatedFiles)
We can explain that with Safari's limitation, we cannot validate the files during the drag.

Concerning the demo, the HTMLElement drop is not a good use case. When using PNG and SVG in HTMLElement, the dataTransfer has several items and therefore several types (e.g. 'text/uri-list', 'text/html', 'image/png' for PNG) because we drag an HTMLElement.
I think we should remove the use of these HTML elements in the demo to tell users to test with real files.

@ilyaliao
Copy link
Member

ilyaliao commented Nov 6, 2024 •
edited
Loading

I agree, I'm looking forward to this PR being merged!

@dosubot dosubot bot added the lgtm This PR has been approved by a maintainer label Dec 24, 2024
@antfu antfu merged commit b01cfd4 into vueuse:main Dec 24, 2024
4 checks passed
@LouisMazel LouisMazel deleted the patch-1 branch January 7, 2025 19:01
@dominic-optimuse dominic-optimuse mentioned this pull request Feb 18, 2025
Open
4 tasks
@renovate renovate bot mentioned this pull request Mar 17, 2025
Open
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ilyaliao ilyaliao ilyaliao left review comments

@antfu antfu antfu approved these changes

Assignees
No one assigned
Labels
lgtm This PR has been approved by a maintainer size:M This PR changes 30-99 lines, ignoring generated files.
Projects
Tasks Tracking
Status: Done
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@LouisMazel @ilyaliao @antfu