Uploading Directories At Once With webkitdirectory

If you’ve ever tried to implement a bulletproof, good-looking file uploader, you might have encountered an issue: uploading an entire folder or folders of files is usually quite a hassle, as files in each folder have to be selected manually. And then some folders might contain sub-folders as well.

Well, we can use webkitdirectory, a non-standard attribute that allows users to pick a directory via a file input. Currently supported in Chrome, Firefox and Edge.

For example, users could just pick a directory, and all files in that directory and its sub-folders would be listed below, represented by their relative path — a demo by Šime Vidas shows how it works. One click to choose them all is enough.

It’s important to note that the attribute is non-standard, so it will not work for everybody. However, it doesn’t break anything as browsers that don’t support it will just ignore it, so you can easily progressively enhance your file upload without relying on the feature being supported everywhere. Being useful in various scenarios, hopefully the attribute will be picked up by and standardized soon, landing in browsers as a directory attribute.