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.