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
, 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
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!
- Drag and Drop Interaction Ideas
- File and Directory Entries API
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.)