mootools 1.3 ajax file upload with:
uploadManager uploads files in a temporary folder of your webserser and pull back the uploaded file name and its path in the form, so you can send them along with the rest of the form. you will need a webserver with php installed to run the demo. for a detailed usage see HOWTO.md in the Docs folder.
creates and manage uploads with the following features:
- resume upload on error/pause (Google Chrome, Firefox 3.6+)
- file drag drop (currently supported by chrome 5+, firefox 3.6+ and safari 5.1+)
- progress bar for browsers supporting HTML5 File API (chrome5+, safari4+, Firefox 3.6+)
- no input file for Firefox 4
- iframe for the others
- customizable by css (fully customizable in firefox 4 and later)
- easy to use
uploadManager uploads files in a temporary folder of your webserser and pull back the uploaded file name and its path in the form, so you can send them along with the rest of the form. you will need a webserver with php installed to run the demo.
you must indicate the temp upload folder by editing the constant TEMP_PATH in upload.php. you will need to create the folder and allow the script to create file in it. you should also change the methods uploadHelper::encrypt() and uploadHelper::decrypt() in the file uploadhelper.php to provide a better encryption method.
#upload {
border: 1px solid #ccc;
max-width: 300px;
min-height: 100px;
}
/*
An element is created as first child of #upload (or the element el called by attachDragEvents(el). It is hidden on creation with style "display:none".
style of this el, and style for morph when drag enter is fired
*/
.drop-upload {
left: 0; top: 0;
height: 24px;
z-index: 10;
background-color: #000;
vertical-align: middle;
text-align: center;
color:#fff;
}
/*
applied on dragenter
*/
.drop-upload-active {
background-color: #5BA2D5;
}
/*
cancel upload button
*/
.cancel-upload {
background:#ccc;
border: 1px solid #999999;
color: #000000;
display: inline-block;
margin: 5px 5px 0 3px;
padding: 2px 5px;
}
.cancel-upload:hover {
background: #aaa;
color: #fff;
}
/*
browse button style: currently supported only by Firexox 4+
*/
.browse-upload {
background:#ccc;
border: 1px solid #999999;
color: #000000;
display: inline-block;
margin: 5px 5px 0 0;
padding: 2px 5px;
}
.browse-upload:hover {
background: #aaa;
color: #fff;
}
<form action="" method="get"><a href="#">Upload a file</a> [upload size: <span id="infos">0</span>]
<div id="upload"></div></form>
var options = {
//id of the upload container
container: 'upload',
//where to send the upload request
base: '../php/upload.php',
//filter file types
//filetype: 'html,rar,zip',
//form field name
name: 'names[]',
multiple: true, //enable multiple selection in file dialog
progressbar: {
width: 140, //fix the progressbar width, optional
color: '#000',
fillColor: '#fff',
text: 'Pending...',
onChange: function (value, progressbar) {
//console.log(arguments)
progressbar.setText('completed: ' + (100 * value).format() + '%')
}
}
};
//enable file drag drop on $('upload')
uploadManager.attachDragEvents('upload', options);
//click to add a new file upload
document.getElement('a').addEvent('click', function(e) {
e.stop();
uploadManager.upload(options)
})
when the upload succeed, two fields are pushed into the form:
- one field which contains the file name.
- one field which contains the encrypted file path on the server.
in your php form submission handler, getting the file name is a trivial task. you should move files from the temp directory to the final location
<?php
include('uploadhelper.php');
$names = uploadHelper::getVar('names');
$files = uploadHelper::getVar('file_names');
foreeach($files as $k => $file) {
//get the file path
echo uploadHelper::decrypt($file);
//file name
echo $names[$k];
}
?>