Uploading Directories At Once With webkitdirectory

About The Author

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. When he is not writing, he’s most probably running front-end & UX … More about Vitaly ↬

Email Newsletter

Weekly tips on front-end & UX.
Trusted by 200,000+ folks.

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. You 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. 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.

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.

input webkitdirectory
We can upload file directories, including sub-folders, at once. A demo by Šime Vidas.

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.

Ah, and if you want to design a slightly better drag’n’drop-experience, Alex Reardon has a few tips on rethinking drag’n’drop altogether. Worth reading!

Further Resources:

We send out this and other useful tips and tricks for designers and developers in our Smashing Email Newsletter — once every two weeks. (Once subscribed, you get a free eBook, too.)

Further Reading

Smashing Editorial (mrn)