Skip to content
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

FileUploadDropContainer returns wrong mimeType when drag and drop is used #9431

Open
1 task done
conormcafee opened this issue Aug 6, 2021 · 3 comments
Open
1 task done
Labels
adopter: external Work-stream that directly helps a team outside of IBM. component: file-uploader needs: community contribution Due to roadmap and resource availability, we are looking for outside contributions on this issue. package: @carbon/react @carbon/react proposal: accepted This request has gone through triaging and we are accepting PR's against it. type: enhancement 💡

Comments

@conormcafee
Copy link

Brief description

FileUploadDropContainer does return the correct file details whenever it is dragged and dropped.

What package(s) are you using?

  • carbon-components-react

Detailed description

I have noticed an issue with the FileUploadDropContainer component. We have the ability to pass an array of strings to the accept prop to specify what files the user is allowed to upload. This works perfectly when using the "click to upload" method. Also, when we go to upload the file selected, it gets upload with the correct mimeType as expect.

However, when I drag a file into the the FileUploadDropContainer, it no long obeys the accepted list of file types. We are having to manually check the file type. It wasn't until we clicked on the submit button to upload said files, that we noticed the "file" which gets upload seems to be reset to a default file, with the mimeType set to "application/octet-stream" and the file name blank and size set to 0.

Is this issue related to a specific component? FileUploadDropContainer

What browser are you working in? Chrome 92.0.4515.131

What version of the Carbon Design System are you using? Carbon Components React - 7.36.1

What offering/product do you work on? Working for a partner of IBM

Code Sandbox Example: https://codesandbox.io/s/nervous-fermi-ksvik?file=/src/index.js

Additional information

Work flow for replicating the error is in a comment on the sandbox

Notes

I had a look at the source code for the FileUploadDropContainer and was curious as to what is happening on this line:

const { name, type: mimeType = '' } = curr;

To me it looks like type is being reset to an empty string here as I could not see where mimeType was declared. This is just a hunch after a very quick look.

@sstrubberg
Copy link
Member

hey @conormcafee, thanks for submitting this issue for the FileUploadDropContainer. Upon further investigation of this issue,
we noticed that what you’re observing right now is that the input currently has no value, our component is currently wrapping the underlying input but is not setting the value. To achieve what you’re looking for, you’ll need to use the onAddFiles prop. Currently, our component is not able to set the value of an input because this component is unable to be controlled in React
We’d like to revisit this so that drag and drop does set the value of the input so patterns like this work in the future but it will require a refactor on our end.

@conormcafee
Copy link
Author

Hey @sstrubberg - thanks for the update and taking a look

@tay1orjones
Copy link
Member

We’d like to revisit this so that drag and drop does set the value of the input so patterns like this work in the future but it will require a refactor on our end.

Going to recategorize this as an enhancement. It's lower priority though and unlikely the team will take this on anytime soon. Would be welcome as a contribution from a community member though if anyone is interested!

@tay1orjones tay1orjones added type: enhancement 💡 proposal: accepted This request has gone through triaging and we are accepting PR's against it. needs: community contribution Due to roadmap and resource availability, we are looking for outside contributions on this issue. and removed type: bug 🐛 status: needs triage 🕵️‍♀️ labels Oct 31, 2022
@sstrubberg sstrubberg added adopter: external Work-stream that directly helps a team outside of IBM. package: @carbon/react @carbon/react and removed status: waiting for author's response 💬 package: react carbon-components-react labels Dec 6, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
adopter: external Work-stream that directly helps a team outside of IBM. component: file-uploader needs: community contribution Due to roadmap and resource availability, we are looking for outside contributions on this issue. package: @carbon/react @carbon/react proposal: accepted This request has gone through triaging and we are accepting PR's against it. type: enhancement 💡
Projects
Status: 📋 Backlog
Status: Later 🧊
Development

No branches or pull requests

4 participants