HTML5 File upload

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.

Last update: October 22th, 2014

Download this plugin at Code Canyon!

Basic usage

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();

Multiple files usage

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();

Form usage

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

Valid extension usage

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();

Min and max filesize usage

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();

Autostart and auto remove usage

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

Existing file(s) usage

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

Small usage

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

Custom functions usage

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);
	}
});

Random filename usage

HTML + CSS

<div class="html5fileupload demo_random" data-url="html5fileupload.php" style="width: 100%;">
  <input type="file" name="file" />
</div>

Javascript

$('.html5fileupload.demo_random').html5fileupload();


Options list

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.

Labels

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

Buttons list

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.

Callback functions

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>


Browser support

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

Mobile / Tablet support

This plugin will work with a mobile phone or tablet, but the preview function can fail. I hope i can resolve this later.


Frequently asked questions

Can you make this or that functionality?

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.

Can you make an example for ASP/JAVA/RUBY or this PHP framework?

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.