[Bug]: FileUploader case sensitive extensions

[joannecl]

Package

carbon-components-react

Browser

Chrome

Package version

v7.55.1

React version

No response

Description

I noticed the file extensions that are passed into the accept property are case sensitive. This may have been by design but using a mac, not sure about windows, the file browser filters files regardless of case. So if I specify .jpg, then upload via clicking through the file browser, all files except .jpg and .JPG are disabled. If I select a .JPG though it will then flag the file as an invalid type. I think the two should be consistent.

CodeSandbox example

https://codesandbox.io/s/gifted-surf-8yz5z1?file=/src/FileUploaderExample.js

Steps to reproduce

1. Ensure you have a file locally that has the extension .JPG
2. Click the file uploader to bring up the file browser, note it filters all files except .jpg & .JPG
3. Select the allowed .JPG file
4. Note that the file item is showing as invalid

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[tay1orjones]

@joannecl This is odd in that MDN states according to the HTML spec accept should be case-insensitive.

It sounds like you might've found a potential inconsistency with the browser implementation/usage of accepts being case sensitive. I can't find an open bug for this in Chrome though.

Does it work if you pass duplicate file extensions as uppercase and also lowercase? I think that would be one workaround the invalid browser behavior. I'm not sure how/if we'd be able to fix this on our end.

[tay1orjones]

If I select a .JPG though it will then flag the file as an invalid type. I think the two should be consistent.

Re-reading the issue, I'm seeing the distinction and was wrong in my previous comment. You've stated the browser behaves properly, allowing selection of .jpg or .JPG, but on selection of a file the validation present in the component is incorrect. I think this is something we could address.

[abbeyhrt]

@joannecl Hello! Thanks for making this issue! Looking into it, browser file look up is case insensitive. From the docs that Taylor linked above, these are what an input with type "file" accepts:

"A valid case-insensitive filename extension, starting with a period (".") character. For example: .jpg, .pdf, or .doc."

and there is no way for us to change that since it's determined by the browser and there is no configuration available.

I think the solution here is to change how you are determining what is invalid, invalid is an exclusively user provided prop so any validation happening on your end will also need to be case-insensitive if you want them to be consistent.

[joanneedwards]

Thanks @tay1orjones and @abbeyhrt for looking into this one for me! I've just changed accounts for my updated email but I'm the one who created this issue.

@abbeyhrt I'm not worried about the browser being case insensitive, I was just mentioning it's inconsistent with how the component works. The way I'm determining invalid is from the invalidFileType property on the files, which is set in the onAddFile callback in the component.

Specifically I think it's here:

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

Line 62 in 28cf6f7

if (acceptedTypes.has(mimeType) || acceptedTypes.has(fileExtension)) {

Where it's using acceptedTypes.has which is case-sensitive to determine if the file has the correct extension or not, then sets the invalid file type property below on line 65 which is inconsistent with the docs as you hav pointed out.

I realised I hadn't saved my sandbox properly sorry that wouldn't have helped in the investigation!

Thanks again!

[abbeyhrt]

@joanneedwards ah you're totally right, sorry for missing that! Thanks for providing that info! I'll keep looking into this!

[joanneedwards]

No worries, thanks so much @abbeyhrt !