Mootools html5/ajax multipart file upload
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:
- easy to use
- Select files and upload folders from the file browser dialog (tested in chrome 20+)
- folder drag drop (currently supported by chrome 21+)
- file drag drop (currently supported by chrome 5+, firefox 3.6+ and safari 5.1+, IE10, Opera 12+)
- faster upload: each file has multiple chunks uploaded in parallel (Google Chrome, Firefox 3.6+, Opera 12.5+, IE10)
- resume upload on error/pause (Google Chrome, Firefox 4.0+, Opera 12.5+, IE10)
- optional progressbar for browsers supporting HTML5 File API (chrome5+, safari4+, Firefox 3.6+, IE10, Opera 12 (Next))
- no input file for Firefox 4+
- iframe for older browsers
- customizable by css (fully customizable in firefox 4 and later)
- supports localization
(boolean) indicates if the browser can resume upload after error or pause.
(boolean) indicates if the browser handle file upload via XMLHTTPRequest.
(boolean) queue upload. by default upload are not queued.
(int) limit the number of active uploads if enqueue is true. default to 1
(boolean) indicates if the browser can handle multiple files selection.
create a new upload field in a given container.
- (object) - file upload instance. if the the maximum number of files that can be uploaded is reached null is returned instead.
- options - (object) see file upload instance options.
- container - (string) upload container id.
- folder - (boolean) Select folders instead of files in the file selection dialog. (Chrome 22+)
- pause - (boolean) allow user to pause/resume upload (if the browser can resume broken upload) otherwise the resume button will only appear when an error occur. default to false.
- chunks - (int) number of chunks uploaded simultaneously for a file. default to 3.
- chunckSize - (int) chunk file size. default to 1Mb. if the browser can resume broken file upload, file will be split in pieces of a maximum length of chunckSize.
- base - (string, optional) url of the page that will handle server side file upload. default to upload.php.
- limit - (int, optional) maximum number of files the user can upload. 0 means no restriction. default to 0.
- filesize - (int, optional) maximum size of a file the user can upload. 0 means no restriction. default to 0.
- maxsize - (int, optional) maximum size of files uploaded by a user. 0 means no restriction. default to 0.
- iframe - (boolean, optional) force iframe upload.
- multiple - (boolean, optional) enable multiple file selection if the browser can handle it.
- filetype - (string, optional) authorized file type.
- name - (string) name of the upload form field. it contains the original name of the file sent by the user. if the upload succeed a hidden field named 'file_' + name and containing the encrypted file path on the server will be pushed into the form. if multiple file upload is enabled then this field will be sent as an array for example if our form field is named name[], then name[] will contains the original file name and file_name[] will contains the encrypted file path on the server.
- progressbar - (mixed, optional) indicates whether to display a progressbar or not. if false then the progressbar is disabled. if true the progressbar will use default options. if it is an object, it will be passed as progressbar options. see Progressbar
- hideDialog - (boolean, optional) Firefox 4+ only: if true the file selection dialog will not be shown after the upload instance is created.
- autostart - (boolean, optional) automatically start upload. default to true.
- container - (mixed) progressbar container.
- width - (int, optional) progressbar width.
- value - (number, optional) initial value of the progressbar. value is always between 0 and 1 (100%). default to 0.
- text - (string, optional) progressbar text.
- color - (string, optional) progressbar color.
- fillColor - (string, optional) progressbar fill color.
- backgroundImage - (string, optional) background image used to fill the progressbar. this parameter will shadow the fillColor parameter.
- value - (number) progressbar value. it is a number between 0 and 1
- progressbar - (object) progressbar.
- progressbar - (object) progressbar.
Fired after the upload instance has been created.
- transfer - (object) file upload instance
Fired after transfer is started.
- transfer - (object) file upload instance
Fired before the file is uploaded.
- options - (object)
- element - (element) the file upload instance container.
- file - (string) the file name.
- size - (int) file size. if the browser supports XMLHTTPRequest file upload, this will be the actual file size, otherwise it will be 0.
- transfer - (object) file upload instance.
Fired while the file is uploaded.
- value - (number) - the progress value is between 0 and 1
Fired when the transfer is aborted before the file is uploaded.
- options - (object)
- file - (string) file name
- message - (string) error message
- transfer - (object) file upload instance.
- message - (string, optional) error message
Fired when the transfer is cancelled.
- transfer - (object) file upload instance.
Fired when the transfer fails.
- transfer - (object) file upload instance.
Fired when the transfer succeed.
- infos - (object) uploaded file infos
- file - (string) the original file name.
- path - (string) the encrypted file path on the server.
- size - (int) uploaded file size.
- transfer - (object) file upload instance
Fired when the transfer is paused.
- transfer - (object) file upload instance
Fired when the transfer is resumed.
- transfer - (object) file upload instance
Fired when the transfer is complete.
- transfer - (object) file upload instance
Fired when all transfer are completed.
- container - (string) container id
enable files to be uploaded when they are dropped on an element. this happens only if the browser supports file drag drop.
- (object) - uploadManager.
- el - (mixed) element
- options - (object) see uploadManager#upload .
remove upload events from an element.
- (object) - uploadManager.
- el - (mixed) element
return the file upload instance with the given id.
- (object) - file upload instance.
- id - (string) file upload instance id.
return uploaded file size for a given container.
- (mixed)
- container - (string) container id
return all the file upload instance of a given container.
return the transfer instances for a given container.
- (array)
- container - (string) container id
object wrapping a file upload instance.
Options, Events. see uploadManager#upload for implemented options and events.
- completed - (boolean) true if the file has been succesfully uploaded
- filesize - (int) the uploaded file size in byte.
- state - (int) state of the transfer of this instance. value are: 0 (not started), 1 (loading), 2 (aborted), 3 (cancelled), 4 (completed)
- progressbar - (object) progressbar. the progressbar is created only after the file is loaded.
//CSS
#dropfiles {
border: #000;
width: 100%;
height: 250px;
}
//HTML
<script src="mootools.js"></script>
<script type="text/javascript" src="number.js"></script>
<script type="text/javascript" src="progressbar.js"></script>
<script type="text/javascript" src="upload.js"></script>
<a href="#">Select a picture</a>
<div id="dropfiles"></div>
//Javacript
window.addEvent('domready', function () {
//upload options
var options = {
//upload container
container: 'dropfiles',
//only one file can be uploaded
limit: 1,
// uncomment the following line to enable folder upload in google chrome 22+
// folder: true,
//upload field name
name: 'picture',
//filter by file type
filetype: 'jpg,gif,png',
//where to send uploaded file
base: '/files/upload',
// dynamically add UI elements to the upload field
onCreate: function (transfer) {
//add ui elements dynamically like a textarea ?
transfer.toElement().grab(new Element('span[text=UI element]'))
},
onComplete: function () {
alert('I am complete')
},
allComplete: function () {
alert('Yay! we are all complete')
}
}
//enable drap & drop
uploadManager.attachDragEvents('dropfiles', options);
//add a new upload on click on the link right before #dropfiles
document.getElement("#dropfiles!+a").addEvent("click", function (e) {
e.stop();
uploadManager.upload(options);
})
})
a simple form to upload a text file.
<form action="" method="get">
<a href="#">Upload a picture of you:</a>
<div id="upload"></div>
<input type="submit" value="submit"/>
</form>
var options = {
//upload only one file
limit: 1,
//upload in this element
container: 'upload',
//allowed file type
filetype: 'jpg,gif,png',
//transfer aborted
onAbort: function () {
alert('Unauthorized file type, allowed file type are "' + this.options.filetype + '"')
},
onSuccess: function () { alert('Transfer completed succesfully!') }
};
// check files are uploaded before the form can be submitted
window.addEvent('domready', function () {
//add click listener on the link
document.id('upload').addEvent('click', function (e) {
e.stop();
//create upload field
uploadManager.upload(options)
}).
//check submit form
getParent('form').addEvent('submit', function (e) {
e.stop();
//transfer instances
var transfers = uploadManager.getTransfers('upload');
//user have not uploaded a file
if(transfers.length == 0) {
alert('Please select a file to upload');
return
}
//check we have ungoing transfers
if(transfers.some(function (instance) { return instance.state == 1 })) {
alert('there are some pending queries, please wait until it completes, the try again');
return
}
//check all transfers have completed
if(!transfers.every(function (instance) { return instance.complete})) {
alert('some tranfers may have failed. please try again');
return
}
//all transfers have completed succesfully, submit the form
alert('Yay!');
//this.submit()
})
})
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent