FileUploadDropContainer returns wrong mimeType when drag and drop is used

[conormcafee]

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:

carbon/packages/react/src/components/FileUploader/FileUploaderDropContainer.js

Line 55 in daca40f

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]

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]

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

[tay1orjones]

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!