Bug 284457 – 'webkitdirectory' Attribute not working as expected in Safari for folder uploads

• Status: NEW
• Component: Forms

Created attachment 473542 [details]
bug on Safari

The webkitdirectory attribute on the <input> element is not functioning correctly in Safari (tested on 17.5 and 18.0). According to the MDN documentation, this attribute should allow users to select directories for upload. However, in Safari, the following issues occur:

Users can select individual files instead of restricting the selection to directories.
This behavior is inconsistent with other browsers (e.g., Chrome, Edge), which support webkitdirectory as intended.

Steps to Reproduce:

1. Use the following HTML snippet in Safari:
<input type="file" webkitdirectory>  
2. Attempt to select a directory.

Example:
https://codepen.io/mihail-gm/pen/OPLRMNY

Expected Behavior:
The input should allow users to select a directory, and all files within that directory should be uploaded as specified in the API.

Actual Behavior:
Safari allows selecting single files instead of directories.

References
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory

[Alexey Proskuryakov]

Thank you for the report. Relating a bug where this was recently fixed for iOS (that fix is not in any release or beta yet). I wonder if we have a bug tracking this for macOS already, maybe there are additional considerations there.

[Karl Dubost]

Created attachment 473590 [details]
upload window with directory selected

seeAlso Bug 271705 and comments

I can select a directory to upload.
Could you provide a more detailed bug report where do you think the directory selection is not happening as intended.

[Radar WebKit Bug Importer]

<rdar://problem/141680541>

Created attachment 473593 [details]
mdn documentation

Created attachment 473594 [details]
input upload in chrome

(In reply to Karl Dubost from comment #2)
> Created attachment 473590 [details]
> upload window with directory selected
> 
> seeAlso Bug 271705 and comments
> 
> I can select a directory to upload.
> Could you provide a more detailed bug report where do you think the
> directory selection is not happening as intended.

We also need to restrict users' ability to select files. From your example, I see that files can be selected.

This is an example of how it works in Chrome - attachment 473594 [details] 
Also, this behavior is written in the MDN Web Docs -attachment 473593 [details]

[Karl Dubost]

Yes the MDN doc says that people can select directories, because in the case of input type=file, the user can NOT select directories, as each time you navigate into it. On the other hand it doesn't say the selection of files is forbidden. 

It makes a bit hard to resonate about it because this is a non-standard feature. 
There is a document from the WICG (aka non standard) which is making a description 
https://wicg.github.io/entries-api/#html-forms

The document there says:

> The webkitdirectory attribute is a boolean attribute that indicates 
> whether the user is to be allowed to select a directory 
> rather than a file or files. 

MY EMPHASIS
> When specified, the **behavior on the selection of a directory is 
> as if all files with that directory as an ancestor were selected**. 

> In addition, the webkitRelativePath property of each File is set to 
> a relative path starting from (and including) the selected directory to the file.

It doesn't say in the UI that files should be nested files should not be selectable. 

OK. But let's try with a more direct example

```
foo
foo/blahblah.png
foo/bar
foo/bar/file2.txt
foo/bar/file3.txt
foo/bar/file1.txt
```

1. Simple case: select bar

The result is the same for all browsers

bar/file2.txt
bar/file3.txt
bar/file1.txt

2. select a file inside bar

In Safari, it returns an empy list.


In Firefox, and Chrome, we can't do anything and it forces to download the directory.
bar/file2.txt
bar/file3.txt
bar/file1.txt


3. select foo

In all 3 browsers.

foo/blahblah.png
foo/bar/file2.txt
foo/bar/file3.txt
foo/bar/file1.txt


So Probably Safari should make it impossible to validate the empty upload.

Another difference. Both Chrome and Firefox warns about accepting the upload.
Safari just does it.

[Karl Dubost]

@Adithya, 

apart of blocking access to files, should there be a dialog to confirm that upload is ok?

[Aditya Keerthi]

> So Probably Safari should make it impossible to validate the empty upload.

This would need to be done by the WebKit/WKWebView client (in this case Safari), so is not something we would track in the open source project.

> apart of blocking access to files, should there be a dialog to confirm that upload is ok?

This could be done at either layer, but would need a broader discussion, as the existing behavior is longstanding and not (in my opinion) obviously flawed.

(In reply to Karl Dubost from comment #7)
> Yes the MDN doc says that people can select directories, because in the case
> of input type=file, the user can NOT select directories, as each time you
> navigate into it. On the other hand it doesn't say the selection of files is
> forbidden. 
> 
> It makes a bit hard to resonate about it because this is a non-standard
> feature. 
> There is a document from the WICG (aka non standard) which is making a
> description 
> https://wicg.github.io/entries-api/#html-forms
> 
> The document there says:
> 
> > The webkitdirectory attribute is a boolean attribute that indicates 
> > whether the user is to be allowed to select a directory 
> > rather than a file or files. 
> 
> MY EMPHASIS
> > When specified, the **behavior on the selection of a directory is 
> > as if all files with that directory as an ancestor were selected**. 
> 
> > In addition, the webkitRelativePath property of each File is set to 
> > a relative path starting from (and including) the selected directory to the file.
> 
> It doesn't say in the UI that files should be nested files should not be
> selectable. 
> 
> OK. But let's try with a more direct example
> 
> ```
> foo
> foo/blahblah.png
> foo/bar
> foo/bar/file2.txt
> foo/bar/file3.txt
> foo/bar/file1.txt
> ```
> 
> 1. Simple case: select bar
> 
> The result is the same for all browsers
> 
> bar/file2.txt
> bar/file3.txt
> bar/file1.txt
> 
> 2. select a file inside bar
> 
> In Safari, it returns an empy list.
> 
> 
> In Firefox, and Chrome, we can't do anything and it forces to download the
> directory.
> bar/file2.txt
> bar/file3.txt
> bar/file1.txt
> 
> 
> 3. select foo
> 
> In all 3 browsers.
> 
> foo/blahblah.png
> foo/bar/file2.txt
> foo/bar/file3.txt
> foo/bar/file1.txt
> 
> 
> So Probably Safari should make it impossible to validate the empty upload.
> 
> Another difference. Both Chrome and Firefox warns about accepting the upload.
> Safari just does it.

It says - " should let the user select directories instead of files" - maybe this is referring to not allow user to select files? How do you think?
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory

[Karl Dubost]

MDN is documentation.
The specification is the text which matters here (which is also still a WICG draft, so not really official yet). 
A lot of moving pieces still. Hopefuly things will settle at a point.