Accept folders with upload button

[karlhorky]

🌈 Feature

As mentioned in #493, it would be nice for CodeSandbox to accept folder uploads from the UI. Currently, clicking on the Upload button in the UI does not allow for uploading folders:

As a workaround, a user can currently drag folders in to the tree.

[lbogdan]

Hey @karlhorky ,

I'm pretty sure a HTML <input type="file"> , which is what we use when you click on the "Upload Files" icon, doesn't support selecting folders, so that's actually a platform limitation.

[lbogdan]

Actually, there's https://caniuse.com/#feat=input-file-directory , although the support is not that good. TIL. 🙂

[karlhorky]

Ah TIL too! Cool :) wonder if there's a polyfill for it...

[karlhorky]

Hm, there was originally a Chrome-only polyfill from WICG, but that was for a previous version of the spec.

I guess the latest advice (from makandra dev) is to use webkitdirectory along with the multiple attribute for older browsers:

Although the property is called webkitdirectory and not directory, it is supported by Chrome, Firefox, Edge 14+, and Safari 11.1+.
Older browsers support multiple, so you should offer that as a fallback.

Your event handler needs to handle event.target.files just like for a multiple input.

I've seen examples using directory but there are no indications this attribute will become standard soon.

So maybe something like this?

<input type="file" multiple webkitdirectory>

[github-actions]

This issue is stale because it has been open many days with no activity. It will be closed soon unless the stale label is removed or a comment is made.

[karlhorky]

not stale