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 176.000 folks.

Quick summary ↬ 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.

Well, we can use webkitdirectory, a non-standard attribute that allows users to pick a directory via a file input. Currently .

We can upload file directories, including sub-folders, at once. A .

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 shows how it works. One click to choose them all is enough.

It’s important to note that the — once every two weeks. (Once subscribed, you get a free eBook, too.)

Explore more on