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


  1. Pingback: Upload a Folder Exactly with PHP Ajax with Progress

  2. Pingback: Upload a Folder Exactly with PHP Ajax with Progress | DIGG LINK

  3. Hi Alan,

    very nice post. I’ve started today learning PHP and because i need some file uploading i thought your example is will give me a good start. I got your code working but and it works for small stuff ( 5-6 pictures), but it gives me an error (Notice: Undefined index: file_input in C:xampphtdocsfileuploaderajUp.php on line 2) when i try uploading movies or more pictures. Do you know why and how can i have this fix.

    Thank you ,

  4. Thanks for help.Your perfectly right ,i had to change the php.ini file, but also to make a .htaccess file an set:

    php_value upload_max_filesize 20M
    php_value post_max_size 20M
    php_value max_execution_time 200
    php_value max_input_time 200

    I’m not going to use the example that i used today as a live service.I used this example only for learning purposes, and just to let my friend share some pictures with me without using Skype, Messenger or other fancy file shareing sites.

    Thanks again , and hope to see some other great posts from you in the future. Good night.

  5. i Download this code but this is not work as you seen in the video.
    can you, Please give me correct code of this program?

  6. The previous code works, but the download for the November update does not include any javascript files, there is no in the php file, and the ajUp.php is an empty file.

    If this code works for what Im trying to do, it would be a real time saver.

Leave a Reply

Your email address will not be published. Required fields are marked *