React-dropzone: .xls, .xlsx, .ppt and .pptx files types not being accepted.

[growthengineering]

Do you want to request a feature or report a bug?

• [x] I found a bug
• [ ] I want to propose a feature

What is the current behavior?

.xls, 
.xlsx, 
.ppt, 
.pptx

The above files are not being accepted as accepted file types when using the correct mime type:

application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-powerpoint, application/vnd.openxmlformats-officedocument.presentationml.presentation

If the current behavior is a bug, please provide the steps to reproduce.

Add the following to a new dropzone app

accept: "application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/ppt, application/vnd.ms-powerpoint, application/vnd.openxmlformats-officedocument.presentationml.presentation"

n.b I tried to use the provided codesandbox but it does not work.

What is the expected behavior?

File types to be accepted.

Please mention other relevant information such as the browser version, Operating System and react-dropzone version.
react-dropzone: v11.0.2
OS: Windows 10, Linux, iOS.
Browser: Chrome 84.0.4147.89

[growthengineering]

Upon further investigation it seems that the type for these files is not represented whatsoever:

file: File
lastModified: 1595412908754
lastModifiedDate: Wed Jul 22 2020 11:15:08 GMT+0100 (British Summer Time) {}
name: "tests-example.xls"
path: "tests-example.xls"
size: 16384
type: ""
webkitRelativePath: ""

file: File
lastModified: 1595412958140
lastModifiedDate: Wed Jul 22 2020 11:15:58 GMT+0100 (British Summer Time) {}
name: "test_ppt.ppt"
path: "test_ppt.ppt"
size: 85504
type: ""
webkitRelativePath: ""

file: File
lastModified: 1595412052032
lastModifiedDate: Wed Jul 22 2020 11:00:52 GMT+0100 (British Summer Time) {}
name: "30610-New-2019-ME-Logo-PowerPoint.pptx"
path: "30610-New-2019-ME-Logo-PowerPoint.pptx"
size: 5747229
type: ""
webkitRelativePath: ""

file: File
lastModified: 1595412051355
lastModifiedDate: Wed Jul 22 2020 11:00:51 GMT+0100 (British Summer Time) {}
name: "file_example_XLSX_10.xlsx"
path: "file_example_XLSX_10.xlsx"
size: 5425
type: ""
webkitRelativePath: ""

[shahchaitanya]

@growthengineering I am also facing the similar issue in the windows machine. Have you found out workaround for that?

[growthengineering]

@shahchaitanya I have actually done some more research into this problem since my last post.

It appears that if you do not have Microsoft Office installed on the machine then Microsoft Office documents are not generally recognised by JavaScript.

https://stackoverflow.com/questions/51724649/mime-type-of-file-returning-empty-in-javascript-on-some-machines

Once I installed Microsoft Office on my machine, it seems there are some registry updates which actually allow JavaScript to recognise these filetypes, and then the uploader works as required.

However, in a real world scenario this is not ideal, as you can not guarantee all of your users will have Microsoft Office installed, but still might have received files from say a friend/colleague they want to upload via the uploader.

So, our workaround for this is to actually not use the allowed functionality built into the react-dropzone, and instead handle everything on the backend, and just allow everything on the frontend.

Feel free to close this ticket, and hopefully this information will be useful in future.

[rolandjitsu]

Yeah, the MIME type business is difficult to deal with across browsers. I'm afraid that there's not much we can do to fix this.