react-dropzone: [BUG] In react 18, dragging accepted file over dropzone sets isDragReject to true

@andylacko @vsrc @alfupe @MuscularSloth @travisdahl @kristinzinser could you upgrade to v14 and let me know if the issue is resolved?

Yeah, can confirm same happening with my project but only on Chrome v100.0.4896.88. Safari and Firefox are working fine. I am using React v18 and react-dropzone v12.0.5. But the bug is happening only during the drag stage, as soon as file is dropped correct file gets accepted and wrong file gets rejected.

My suggestion, if there is an issue with browser not allowing the access to the file data during the drag stage I personally think it would be better to have graceful drop to the optimistic resolution. As in isDragReject is only true if we can confirm it.

In that case we can always add additional instruction to the page about accepted file types and when file gets rejected notify user why it was rejected. With current behavior users get false alarm and spooked when trying to upload valid file formats.

@rolandjitsu I’ve updated react-dropzone to v14 and tried with react v18 and its new root component mounting. Now it accepts all files, ignores accept rule and has problems with thumbnails. React v18 + classic mounting root component + react-dropzone v14 continued ignore accept rule and still had problems with thumbnails. And only when I returned react-dropzone v12 + React v18 + classic mounting root component it started work correctly.

The way accept is processed has changed, it is a breaking change.

Whereas before you could pass accept as, for instance: accept: [ 'text/csv', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', ]

Now you must do it like: accept: { 'text/*': ['.csv'], 'application/vnd.ms-excel': ['.xls'], 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': ['.xlsx'] }

Check this: https://react-dropzone.js.org/#section-accepting-specific-file-types

In my case it is happening in Chrome (tested versions 85 and 100) and React 18. In another project, React 17 and Chrome 100 is working fine.

EDIT: I’ve make it to work reverting from the new way of mounting the root component to the classic one.

👎🏻

const root = createRoot(document.getElementById('root'));
root.render(<App />);

👍🏼

ReactDOM.render(<App />, document.getElementById('root'));

@andylacko @vsrc @alfupe @MuscularSloth @travisdahl @kristinzinser could you upgrade to v14 and let me know if the issue is resolved?

It does appear to be working correctly. One thing that would make for a better user experience is to display the extensions rather than the mime-types in the rejection message…

for example, in the screenshot below it may be easier to parse if it said File type must be .xls,.xlsx (whats in the arrays)

@andylacko @vsrc @alfupe @MuscularSloth @travisdahl @kristinzinser could you upgrade to v14 and let me know if the issue is resolved?

it appears to have resolved with 14.1.1 🎉 🥳 thank you for the quick turnaround!

@rolandjitsu I tried with v14 and the problem seems to be resolved. Thanks 😃

UPDATE for the issue i was seeing. my problem was actually not defining the accept fileTypes well enough. I was using .xls, .xlsx and while it worked in greying out the proper option when i clicked to open the file browser, it was not getting the correct drag styles. What I found here is that I should actually be using application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet. And when I do, the styles actually work correctly