Keep Directory Structure When Uploading

2012
12
June
1:18 pm

So lately I’ve been playing around a lot with the new File API and some image manipulation etc. in javascript and am having tremendous fun doing so!
I’ve seen many people asking about folder uploading, which is an exciting new development. The problem most people seem to be having is with retaining file structures when uploading folders.

It is possible to retain the structure of folders during uploading. At the point of writing, I have been unable to find an equivalent for browsers that do not use webkit.
This post is for TESTING ONLY.

Continue reading

Posted in: Development
Tagged with: , , ,

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!

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

Posted in: Design