Menu Search
Jump to the content X X

Quick Tip Uploading Directories At Once With webkitdirectory

If you’ve ever tried to implement a bulletproof, good-looking file uploader1, 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 Edge2.

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

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

It’s important to note that the attribute is non-standard6, 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 altogether7. Worth reading!

Further Resources: Link

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

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2013/10/so-we-wanted-to-build-a-file-uploader-a-case-study/
  2. 2 http://www.caniuse.com/#search=webkitdirectory
  3. 3 https://codepen.io/simevidas/pen/ZJjmWG?editors=0010
  4. 4 https://codepen.io/simevidas/pen/ZJjmWG?editors=0010
  5. 5 https://codepen.io/simevidas/pen/ZJjmWG?editors=0010
  6. 6 https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory
  7. 7 https://medium.com/@alexandereardon/rethinking-drag-and-drop-d9f5770b4e6b
  8. 8 https://github.com/mailru/FileAPI
  9. 9 https://tympanus.net/Development/DragDropInteractions/
  10. 10 https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory
  11. 11 https://wicg.github.io/entries-api/#dom-htmlinputelement-webkitdirectory
  12. 12 http://smashingmagazine.us1.list-manage1.com/subscribe?u=16b832d9ad4b28edf261f34df&id=a1666656e0

↑ Back to top Tweet itShare on Facebook

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs front-end/UX workshops, webinars and loves solving complex UX, front-end and performance problems in large companies. Get in touch.

  1. 1

    I’d like to point out that there are very real and potentially severe performance issues with using this attribute. Processing of the directory happens on and blocks the UI thread. So, if the files reside on a high-latency device or if the directory is large, you will hang the browser tab while the directory is being processed. IMHO, this really shouldn’t be used. The best way to handle folder uploads is via drag and drop through the File and Directory Entries API spec (https://wicg.github.io/entries-api/). Implementing this is a bit more work, but it doesn’t suffer the same perf issues.

    2
  2. 2

    Safari, which is javascript engine is webkit, also support this API, since, i think, version 10.1.

    Safari, version 11, for sure supports this. ;)

    -1

Leave a Comment

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top