Bug 271705 – iOS: <input type="file" webkitdirectory> doesn't work.

• Status: RESOLVED
• Resolution: FIXED
• Component: Forms

[Daniel Jacobs]

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory#result on Safari on iOS does not let you select a directory.

[Alexey Proskuryakov]

Looks like this is the only code we have referencing this attribute:

// As of Sept 2017, Chrome and Firefox both only populate webkitEntries when the webkitdirectory flag is unset.
// We do the same for consistency.
if (input.hasAttributeWithoutSynchronization(webkitdirectoryAttr))
    return { };

Weird that it got documented somewhere, and even specced.

[Karl Dubost]

webkitdirectory was implemented in Gecko (Firefox) on June 2016
https://bugzilla.mozilla.org/show_bug.cgi?id=1258489
This was implemented for compatibility reasons with *Chrome* (when Chrome was using webkit) for websites like mega.nz in the past.

There was at the time a spec issue opened on the compat spec.
https://github.com/whatwg/compat/issues/54

It was eventually added to the File and Directory Entries API, Draft Community Group Report, which is not on the W3C standard track
https://wicg.github.io/entries-api/#html-forms

The document is clear
> NOTE: The APIs described by this document was initially implemented in Google Chrome. Other browsers (at this time: Edge, Firefox and Safari) are starting to support subsets of Chrome’s APIs and behavior. The intent of this document is to specify the common subset to ensure that the implementations are interoperable.


This is also in WebKit code. 
https://searchfox.org/mozilla-central/rev/fb2ad9ca7150890da5cadc458acdd10c87fd9a12/dom/html/HTMLInputElement.h#712-714

In addition to Safari on iOS (this bug), note that this is not available on Firefox Android.

I don't remember seeing anything recently about spec work around directly uploads.

[Radar WebKit Bug Importer]

<rdar://problem/125457578>

[Aditya Keerthi]

Just to correct Alexey's comment, as that is not the only use of the attribute. The important use is here:

```
bool FileInputType::allowsDirectories() const
{
    ASSERT(element());
    if (!element()->document().settings().directoryUploadEnabled())
        return false;
    return element()->hasAttributeWithoutSynchronization(webkitdirectoryAttr);
}
```

Which is set on `FileChooserSettings`. However, we are currently not reading the bit, and have not yet implemented the feature on iOS.

[Lily Spiniolas]

Pull request: https://github.com/WebKit/WebKit/pull/34675

[EWS]

Committed 284685@main (ca350c23acde): <https://commits.webkit.org/284685@main>

Reviewed commits have been landed. Closing PR #34675 and removing active labels.

[Daniel Jacobs]

Are you sure this is working? Is it working on iOS 18.3? If not, what version of iOS supports or will support it? I tested https://codepen.io/danieljacobs/pen/VwodKYg with a device using iOS 18.3 and was not able to select a directory, just a file.

[Daniel Jacobs]

That codepen works on Chrome on Android and every desktop browser I've tried, and https://bugzilla.mozilla.org/show_bug.cgi?id=1887878 is open to support it on Firefox on Android.

[Alexey Proskuryakov]

This should be fixed in iOS 18.4 beta. Please let us know how it goes for you!