HTML5 Upload Folder With Webkitdirectory

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.

Note:
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.

Update:
I have expanded on folder upload in my Keep Directory Structure When Uploading post.
Enjoy!

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;

The HTML!

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

Simple, right?

Indeed it is! On to the PHP.

The PHP!

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


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



function UpFilesTOObj($fileArr){
	foreach($fileArr['name'] as $keyee => $info)
	{
		$uploads[$keyee]->name=$fileArr['name'][$keyee];
		$uploads[$keyee]->type=$fileArr['type'][$keyee];
		$uploads[$keyee]->tmp_name=$fileArr['tmp_name'][$keyee];
		$uploads[$keyee]->error=$fileArr['error'][$keyee];
	}
	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.