-
Notifications
You must be signed in to change notification settings - Fork 1.2k
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.
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
DropZone always returns error when glb/gltf file triggers dragenter
event
#6644
Comments
👋 Thanks for opening your first issue. A contributor should give feedback soon. If you haven’t already, please check out the contributing guidelines. |
Hey @tawago 👋🏽 Thanks for flagging and investigating this bug! I think solution B is the way to go, the |
Hey @tawago, just doing some backlog cleanup and noticed you mentioned opening a PR and @chloerice gave feedback on which solution would be preferable. Going to add you as an assignee to this issue 😃 |
Hi! We noticed there hasn’t been activity on this issue in a while. After 30 days, it will close automatically. If it’s still relevant, or you have updates, comment and let us know. And don’t worry, you can always re-open later if needed. |
Still relevant, thanks! |
Hi! We noticed there hasn’t been activity on this issue in a while. After 30 days, it will close automatically. If it’s still relevant, or you have updates, comment and let us know. And don’t worry, you can always re-open later if needed. |
Yes, still a problem. |
Coming up on the two year anniversary of this - yes, it's still relevant! |
@chloerice I could give this a go, though I'd like to propose an alternate solution (similar to the first proposed solution): The System OS file picker works with both mime types and file extensions, so if I wanted my dropzone to accept say images and GLB files, I could pass an If there is a value in the
So it is not possible for us to validate by file extension on these events. So only in this case (if the I think it would be worth some docs to recommend using mime types if possible (eg. if they are common mime types), else use file extension but note that on-drag validation is not supported in that case. |
@genevieveluyt @chloerice thanks for addressing this! Has the fix been merged and/or released yet? |
Sorry closed it by accident! PR is here: #12135 |
All good, thanks for picking this up! |
DropZone
The validation error
dragErrorOverlay
fordragenter
event relies onaccept
property orcustomValidator
function property of<DropZone>
polaris/polaris-react/src/components/DropZone/DropZone.tsx
Lines 190 to 210 in b541f54
When
accept
property is present and its!fileAccepted
returns true,customValidator
never gets evaluated.fileAccepted always returns false for glb/gltf file because:
When a file is
dragenter
ed, it is not aFile
instance butDataTransferItem
instance andDataTransferItem
only haskind
andtype
properties. When a glb/gltfdragenter
ed, however,DataTransferItem
'stype
has an empty string; thus an-always validation error. This part is related to a situation whenaccept
property is a mimeType string likemodel/gltf+json
,model/gltf-binary
instead of a dot string like.glb
. The validation works for files likevideo/mp4
becauseDataTransferItem
has a propertype
.When
accept
property is a dot string like.glb,.mp4,.wav
,fileAccepted
always returns false becauseDataTransferItem
does not havename
property.polaris/polaris-react/src/components/DropZone/utils/index.ts
Line 30 in b541f54
Additionally,
File
instance ofdrop
event hastype
property but it is an empty string.name
gets correct information tho.file.name
validation would work only whenaccept
is a dot string.To avoid
dragErrorOverlay
showing up for dragenter event, a file validation needs to rely oncustomValidator
and omitaccept
propertyThis compromises "click and select files" user interaction of System UI outside of browsers because to filter file types on System, it relies on
accept
property of<input type="file">
tag.Examples
dragErrorOverlay
showing up even tho DropZone actually accepts glbBest practices
The DropZone component should either:
fileAccepted
validation fordragenter
event whenDataTransferItem.type
has an empty string. (with a better documentation otherwise coders implicitly have to use a dot string foraccept
prop)customValidator
overfileAccepted
and give coders a better control. If customValidator is present, just skip fileAccepted. (This is because I would rather have a mimetype <=> a dot string extension conversion in the customValidator and check both file.name and file.type with a specified filetypes asaccept
prop)-ps
I would like to create a PR but I wanted to make sure that we have a consensus on which solution would be better.
The text was updated successfully, but these errors were encountered: