Skip to content

Course Import: .tar.gz files are greyed out on file picker in Firefox #3142

Description

@rodmgwgu

When trying to import a course, after clicking the "Drag and drop your file here or click upload" button, the browser file picker doesn't allow selecting .tar.gz files by default, although the "*.tar.gz" filter appears as selected.

This only happens in Firefox, in Chrome and Safari the file picker doesn't filter out any file.

This was tested and replicated on macOS 26.5.1

Image

Please Note: This can be worked around by changing the file picker filter to "All Files", however this can be confusing to less technical users.

Image

Root cause analysis

This is related to the "accept" html tag that is added to the HTML input tag on the FileSection component.

The WHATWG/W3C spec defines a valid extension as a period followed by any string of characters — so .tar.gz is a valid file type specifier. Firefox, however, appears to only match against the last dot-separated segment when applying the OS-level file picker filter, causing .tar.gz files to appear greyed out/disabled even though the filter label shows *.tar.gz.

The most robust cross-browser workaround is to also accept the MIME type application/gzip (or application/x-gzip) alongside the extension, and add .gz as a fallback extension. This way Firefox's file picker will make .tar.gz files selectable (since they are .gz files):

accept={{
  'application/gzip': ['.tar.gz', '.gz'],
  'application/x-gzip': ['.tar.gz', '.gz'],
}}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions