HTML5 Upload Folder With Webkitdirectory

7:38 pm

Something that I have always found myself lusting after is the ability to just drag and drop folders into a web app to upload them. So uploading multiple files was an awesome improvement and great fun to play with.

But now, I present to you, webkitdirectory!

HTML5 Folder Upload with webkitdirectory from Alan Layt on Vimeo.

This will only run on an up-to-date webkit browser. webkitdirectory is currently non-standard is is purely for playing with. I do not advise you deploy this in a live application.

I have expanded on folder upload in my Keep Directory Structure When Uploading post.

I had the pleasure of having a little play around with this when I should have probably been working with processing for university but I do like to procrastinate.

So, without further ado;


<input type="file" name="file_input[]" id="file_input" multiple webkitdirectory="">

Simple, right?

Indeed it is! On to the PHP.

The PHP!

	$uploads = UpFilesTOObj($_FILES['file_input']);
	$fileUploader=new FileUploader($uploads);

class FileUploader{
	public function __construct($uploads,$uploadDir='uploads/'){
		foreach($uploads as $current)
				echo "Successfully uploaded ".$current->name."n";
	public function upload($current,$uploadFile){
		return true;

function UpFilesTOObj($fileArr){
	foreach($fileArr['name'] as $keyee => $info)
	return $uploads;

function get_file_extension($file_name)
  return substr(strrchr($file_name,'.'),1);

I’ve also been working on a MooTools script to upload the file asynchronously. So stay tuned.

Any comments or suggestions and I’d be delighted to hear them!

Good luck.

Posted in: Design