Firefox not reporting mime type in Firefox when file is dropped as part of a folder

• [x ] I found a bug

When I drop a folder which contains an XML file in Firefox (89.0.2) on the Mac (11.4), the type property of the xml file in the array that is handed to acceptedFiles is empty. However, if I drop just that XML file by itself onto the drop target, the type is reported. I’m using the basic example from the docs (below). I haven’t been able to replicate this behavior in other browsers to this point. If I do, I’ll update the ticket.

If I drop just the XML file in the console, I see this:

However, if I drop a folder called myfolder with this structure:

myfolder (root folder)
    - test.xml
    - content (sub folder)
        - orange-lady.png 

…then I see this result:

The png file has a type attached, but test.xml has a blank type. Given that Firefox reports it when it’s dropped by itself, it seems like this is a case of the type not being carried over when react-dropzone processes a folder.

This is the code in its entirety. I’m on react-dropzone 11.3.4 and react 17.0.2

import React from 'react';
import {useDropzone} from 'react-dropzone';

function DropTest(props) {
  const {acceptedFiles, getRootProps, getInputProps} = useDropzone({multiple: true});

  const files = acceptedFiles.map(file => {
    console.log("FILE", file)
    return (
      <li key={file.path}>
      {file.path} - {file.size} bytes
    </li>
    )
  });

  return (
    <section className="container">
      <div {...getRootProps({className: 'dropzone'})}>
        <input {...getInputProps()} />
        <p>Drag 'n' drop some files here, or click to select files</p>
      </div>
      <aside>
        <h4>Files</h4>
        <ul>{files}</ul>
      </aside>
    </section>
  );
}

export default DropTest;

[rolandjitsu]

I can confirm this happens in Firefox. Gonna try to see if it can be fixed.

[haywirez]

Discovered that this unfortunately also happens in Chrome (104.0.5112.79), not just Firefox 😕 Strangely despite other file drag & drop issues Safari tech preview does have the correct listing behavior.