HTML5 Upload Folder With Webkitdirectory

2011
21
November
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.

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!

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.

Posted in: Design
Download
Source
View
Demo

Comments

  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:\xampp\htdocs\fileuploader\ajUp.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 ,
    Dan

  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

    http://roshanbh.com.np/2008/01/uploading-larger-files-in-php.html

    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.

Leave a Reply

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

* Copy This Password *

* Type Or Paste Password Here *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>