Open Bug 1922005 Opened 1 year ago Updated 8 months ago

FileEntry.file() for Uploaded files within a folder results in empty mimetype

Categories

(Core :: DOM: File, defect, P2)

Firefox 131
defect

Tracking

()

UNCONFIRMED

People

(Reporter: qxd11560, Unassigned)

Details

Attachments

(1 file)

Steps to reproduce:

  1. Have a folder that includes at least one file (use a JPEG for example)
  2. Drag and drop the folder into a file selection or something like a Dropzone
  3. In your application code, run "fileEntry.file()" to get a "File" Object from the file(s) uploaded.

Actual results:

The mime-type is incorrectly inferred and results in an empty string.

If the file is uploaded on its own (either by being dropped onto the file selector or by being specifically selected, the mime type is correctly inferred).

See screenshots for comparison with Chrome.

Expected results:

The "type" property of the resulting "File" should contain the files' mime-type. Or any mime-type to begin with.

Chrome does this properly btw...

Instead of dropping a folder, dragging and dropping multiple files individually (outside of a folder) provides the correct mime type as well. However, if someone was to use a service like a cloud storage, then uploading folders (and maintaining their structure) results in being unsupported by Firefox because of this bug.

We use a file selector that supports single & multi file uploads as well as folder (+containing files and nested folders) uploads - we just grab the file entries and process them individually.

This works perfectly fine in Chrome, but not in Firefox

MDN doesn't document the type either. However the linked specification at https://w3c.github.io/FileAPI/#file-section does explicitly mention a "type" property.

F.type is set to t.

The Bugbug bot thinks this bug should belong to the 'Firefox::File Handling' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Component: Untriaged → File Handling
Component: File Handling → DOM: File
Product: Firefox → Core
Severity: -- → S3
Priority: -- → P2

I cannot reproduce it. My test is the following:

<input type="file" id="a"/>

<script>
document.getElementById("a").onchange = e => {
  function printFolder(w) {
    const r = w.createReader();
    r.readEntries(a => {
      a.filter(a => a.isFile).forEach(a => a.file(a => console.log(a)));
      a.filter(a => a.isDirectory).forEach(a => printFolder(a));
    });
  }

  printFolder(e.target.webkitEntries[0]);
}
</script>

When I drop a folder, I see all the files with the correct types. Can you please provide an example of how I can reproduce the issue? Thanks!

Flags: needinfo?(qxd11560)

Redirect a needinfo that is pending on an inactive user to the triage owner.
:smaug, since the bug has recent activity, could you have a look please?

For more information, please visit BugBot documentation.

Flags: needinfo?(qxd11560) → needinfo?(smaug)

I can't reproduce this either.

Flags: needinfo?(smaug)
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: