Uploading Directories With webkitdirectory

If you’ve ever tried to implement a bulletproof, good-looking drag’n’drop, you might have encountered an issue: uploading an entire folder or folders of files usually isn’t possible, and so filesin each folder have to be selected manually. Unless you use input webkitdirectory, an obscure 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, including files in sub-folders, would be listed, represented by their relative path — a demo by Šime Vidas shows how it works.

In the demo, the upload works for directories that include sub-folders as well. One click to choose them all is enough. Important to note: the feature is non-standard, so it will not work for everybody. However, it doesn’t break anything and can be used as progressive enhancement. Hopefully, by using it we’ll see it being implemented as a standardized feature in browsers, too. Ah, and if you want to design a slightly better drag and drop-experience, Alex Reardon has a few tips on rethinking drag and drop altogether. Worth reading!