HTML 5 File upload uses the feature of HTML 5 and file handling. The requirments for using this tool are jQuery 1.9.x or higher and optional is the use of Twitter Bootstrap.
The basic usage is very simple, just add the CSS and JS to your page, add the HTML like the example below and the JavaScript and you are all done! The basic example is a single file upload. When done uploading, the user can then download the file or upload another.
HTML + CSS
<div class="html5fileupload demo_basic" data-url="html5fileupload.php" style="width: 100%;"> <input type="file" name="file" /> </div>
Javascript
$('.html5fileupload.demo_basic').html5fileupload();If you want to enable the user to upload more files at once, just use the multiple option, set it to true. (default is false)
HTML + CSS
<div class="html5fileupload demo_multi" data-multiple="true" data-url="html5fileupload.php" style="width: 100%;"> <input type="file" name="file" /> </div>
Javascript
$('.html5fileupload.demo_multi').html5fileupload();On the left you can see the demo with a form. Let me make it clear that multiple files on a form does not work with this plugin. The reason for this, is that we have no control over the selected files in the input. This means we can not edit the filename, add or remove files from the input. All because it is a security breach! Just because of that, we only support the single file upload. Therefore we have made an example with multiple single file uploads. Set the form option to true to let the plugin work with a form. (default is false)
HTML + CSS
<div class="html5fileupload demo_multi" data-form="true" data-multiple="true" data-url="html5fileupload.php" style="width: 100%;"> <input type="file" name="file" /> </div>
Javascript
$('.html5fileupload.demo_multi').html5fileupload();Only JPG and PNG files are valid too use in this example
Only mimetype IMAGE is valid too use in this example
You can control which type of file you want your users to uploaded. For example, only JPG's or PNG's or if you just want users to upload images, use the mimetype for an image. All this can be done by using the valid-extensions options for extensions (like jpg and png, multiple extension can be listed, comma separated!) or use the valid-mime option to add a mimetype (only 1 mimetype at the moment).
HTML + CSS
<!-- only JPG and PNG extension --> <div class="html5fileupload demo_valid_extension" data-valid-extensions="jpg,png" data-url="html5fileupload.php" style="width: 100%;"> <input type="file" name="file" /> </div> <!-- ony IMAGE mimetype --> <div class="html5fileupload demo_valid_mime" data-valid-mime="image.*" data-url="html5fileupload.php" style="width: 100%;"> <input type="file" name="file" /> </div>
Javascript
$('.html5fileupload.demo_valid').html5fileupload();Depending on your server settings, you can control the size of the uploaded file(s). You can set a minimum and / or maximum filesize. With the min-filesize and max-filesize options, all in bytes (so, 1 MB = 1024000). (Default is 0 bytes minimum and 2Mb maximum)
HTML + CSS
<div class="html5fileupload demo_filesize" data-max-filesize="1024000" data-min-filesize="512000" data-url="html5fileupload.php" style="width: 100%;"> <input type="file" name="file" /> </div>
Javascript
$('.html5fileupload.demo_filesize').html5fileupload();It is also possible to let the upload start directly, when users add the file. Add the autostart option. When done, you can let the plugin reset so user can start uploading a new file immediately after, remove-done option. For the user experience, we show the upload progress a bit longer when it's done, so user will know their upload really finished. You can control this also with the remove-done-delay option in miliseconds.
HTML + CSS
<div class="html5fileupload demo_auto" data-remove-done="true" data-autostart="true" data-url="html5fileupload.php" style="width: 100%;"> <input type="file" name="file" /> </div>
Javascript
$('.html5fileupload.demo_auto').html5fileupload();Existing file on server with single upload
Existing files (comma separated) on server with multiple file demo
It is possible that your users already have files on your server and you want to let them control those files. With the file options, you can show the files to the user. They can remove the file and add a new one, or when having a multiple file uploader, just add new ones. With the remove-url option, you can point to your script which handles the removal of existing files.
You can add multiple existing files to the plugin, files are comma separated in the option.
HTML + CSS
<div class="html5fileupload demo_files" data-file="/assets/images/demo1.jpg" data-remove-url="html5fileupload.remove.php" data-url="html5fileupload.php" style="width: 100%;"> <input type="file" name="file" /> </div> <div class="html5fileupload demo_files" data-multiple="true" data-file="/assets/images/demo1.jpg,/assets/images/demo2.jpg" data-remove-url="html5fileupload.remove.php" data-url="html5fileupload.php" style="width: 100%;"> <input type="file" name="file" /> </div>
Javascript
$('.html5fileupload.demo_files').html5fileupload();Example with smaller buttons and layout with single upload
Same with multiple file upload
If you want the plugin to be smaller, we made a special CSS class just for that. Add small to the plugin and you are done.
HTML + CSS
<div class="html5fileupload demo_small small" data-url="html5fileupload.php" style="width: 100%;"> <input type="file" name="file" /> </div>
Javascript
$('.html5fileupload.demo_small').html5fileupload();
Filename after upload
We added to possibility to use custom functions. See the list below for all the functions you can add. In this example, we get the filename back of the file we stored on the server.
HTML + CSS
<div class="html5fileupload demo_function" data-url="html5fileupload.php" style="width: 100%;"> <input type="file" name="file" /> </div>
Javascript
$('.html5fileupload.demo_function').html5fileupload({
onAfterStartSuccess: function(response) {
$('#filename').val(response.filename);
}
});Below are all the options that can be given with the plugin. The options can be given via the data- attribute of the chosen element or within the javascript declaration.
Important to know is that the options set with the data- attribute are prior to the options that are declared in JavaScript.
| Option | Default | Description |
|---|---|---|
data-url or url |
- | This is the url of the script that will handle the file upload, the file is send via AJAX, not a $_POST. An example is given in PHP when purchasing the plugin. |
data-download-url or downloadUrl |
- | This is the url of the script that will handle the file download. An example is given in PHP when purchasing the plugin. |
data-remove-url or removeUrl |
- | This point to the file that will handle a removal of a file on the server. |
data-remove-done or removeDone |
false |
Remove the file from queue when done uploading. If this is set to true with a single file, the user can add a new one. |
data-remove-done-delay or removeDoneDelay |
1200 |
When remove-done is set to true, the user will see a delay when the upload is successfull, otherwise the user can be confusted weither or not the file is uploaded. This delay (in miliseconds) can be changed. |
data-file or file |
- | If you have files stored on your server that you want the user to control, you can show them via this option. If you have multiple files, you can add them comma separated in this option. When remove-url is set and the user clicks the remove button, the filename will be given to the supplied remove-url, so you can remove the file from your server. |
data-edit or edit |
true |
If you want user to let them alter the filename, set this option to true, if you don't want them to rename files, set it to false. |
data-form or form |
false |
If you are using the plugin in a form, set this option to true, otherwise it doesn't work as expected. |
data-multiple or multiple |
false |
Want to upload multiple files, just set this to true. |
data-valid-extensions or validExtensions |
- | Control what type of extensions the user can upload, use multiple extension via comma separation. |
data-valid-mime or validMime |
- | You can also control what kind of mime type the files can be. Only one mimetype is possible. |
data-autostart or autostart |
false |
Directly start uploaded when a user selects a file, set this option to true. |
data-min-filesize or minFilesize |
0 |
Set the minimum filesize of the files that can be uploaded. The size is in bytes. |
data-max-filesize or maxFilesize |
2048000 |
Set the maximum filesize of the files that can be uploaded. The size is in bytes. |
data-regexp or regexp |
/^[^\\/:\*\?"<>\|]+$/ |
When you can edit the filename of a file, you can control the regular expression the filename needs to match. You can control if a filename must have only letters or can just be anything. |
data-ajax-type or ajaxType |
POST |
You can change the method of the AJAX call, for example if you want to call cross domain. |
data-ajax-data-type or ajaxDataType |
json |
|
data-ajax-headers or ajaxHeaders |
{} |
Add custom headers with the AJAX call. |
data-random-name or randomName |
false |
Create a random name for all the files that you select to upload. |
data-random-name-length or randomNameLength |
8 |
Length of the random name (if data-random-name is set to true) |
data |
{} |
The data option can only be filled within the javascript. It's a object that you can add when the file is saving via AJAX. The object will be added in with the POST call of the AJAX request. |
data-show-errors or showErrors |
false |
Gives you the possibility to debug the error messages when uploading the file. |
There are some labels that can be added.
| Label | Description |
|---|---|
| data-label-invalid | When a file is not valid for uploading |
| data-label-min-filesize | When a file is not minimum filesize |
| data-label-max-filesize | When a file is bigger then maximum filesize |
| data-label-all-start | Label for the button "all start" multiple files |
| data-label-all-stoop | Label for the button "all stop" multiple files |
| data-label-all-done | Label for the button "all done" multiple files |
| data-label-all-remove | Label for the button "all remove" multiple files |
There have been requests for hiding buttons in the editor. You can achive this with CSS, but now i have made a change that you can do this with the (example) data-button-edit attribute (also the buttonEdit). The only thing you have to do, to not display the button, is set it to false!
Below a list of possible buttons.
| Button | Data attribute | Option | CSS | Description |
|---|---|---|---|---|
| data-button-edit | buttonEdit |
.edit |
Edit filename (when providing data-edit = true) |
|
| data-button-start | buttonStart |
.start |
Start uploading the file | |
| data-button-restart | buttonRestart |
.restart |
When the upload is canceled, you can restart the upload | |
| data-button-cancel | buttonCancel |
.cancel |
Canceling the uploaded file and reseting the uploader. | |
| data-button-reset | buttonReset |
.reset |
When editting a filename, reset the name to the original name. | |
| data-button-remove | buttonRemove |
.remove |
Canceling the renaming of the file. | |
| data-button-done | buttonDone |
.done |
When after successfully uploading, remove the file from queue. Also when done rename save the name. | |
| data-button-del | buttonDel |
.del |
"Deleting" the preview file. No actual deleting is done, only when using data-remove-url is set to a script removing a file. | |
| data-button-allstart | buttonAllstart |
.allstart |
Start uploading all the files when using multiple files. | |
| data-button-allstop | buttonAllstop |
.allstop |
Stop uploading all files when using multiple files. | |
| data-button-alldone | buttonAlldone |
.alldone |
Remove all "done" files when done uploading. | |
| data-button-allremove | buttonAllremove |
.allremove |
Delete all files from queue or all preview files. |
There are several callback functions implemented in the plugin. You can use them in the JavaScript. The argument that we give to each callback is the plugin itself (this). Within the object, you can all the image (this.image), the element (this.element) and the input (this.input).
| Callback | Description |
|---|---|
onAfterStartAlways |
After uploading the file. |
onAfterStartFail |
After uploading the file and it has failed. |
onAfterStartSuccess |
After uploading the file and it has succeeded. |
Javascript example
<script>
$('.html5fileupload.demo_function').html5fileupload({
onAfterStartSuccess: function(response) {
$('#filename').val(response.filename);
}
});
</script>
Because this plugin heavely leans on the HTML5 file api, it only works with HTML5 browsers. At this point, we tested the plugin on pc and mac with these results
| PC (Microsoft Windows 7+) | Mac (Mac OS X Lion+) | |||||
|---|---|---|---|---|---|---|
| Firefox | Chrome | Internet Explorer | Opera | Safari | Safari | Firefox |
| 3.6+ | 13+ | 10+ | 12+ | 5 | 6+ | 7+ |
| On click event not working in IE10 on input / drag field. Dragging file works. | Image preview event not working propperly | Image preview event not working propperly | ||||
This plugin will work with a mobile phone or tablet, but the preview function can fail. I hope i can resolve this later.
If there is a great interest for a new functionality, i will consider making it. When i start working on it, i will announce it here first.
No, i can't. Sorry, but i am well known with PHP and Zend Framework, but other framework are not my forte. The examples i provide should help you see what you need to do to save the files.