Allow users to upload files through a file input form element or a placeholder area.


This JavaScript component utilizes the latest XMLHttpRequest Level 2 specification and provides the ability of uploading files via ajax including tracking of the upload progress. The component provides two ways of uploading files: select and drop. While the select request can only be applied to <input type="file"> elements, you can basically use any element with drop, which enables you to simply drag and drop files from your desktop into the specified element to upload them. Note that this component does not handle your file uploads on the server.

The Upload component always needs to be implemented individually according to your requirements. In our example case we used the Placeholder and the Form file component, applying both the drop and select requests. Additionally we used the Progress component to illustrate the uploading progress.


cloud_upload Attach binaries by dropping them here or selecting one.


<div id="upload-drop" class="f-placeholder">
	Info text... <a class="f-form-file">Select a file<input id="upload-select" type="file"></a>.

<div id="progressbar" class="f-progress f-hidden">
	<div class="f-progress-bar" style="width: 0%;">...</div>


To create select and drop upload listeners you need to instantiate each upload class with the target element and options, which defines callbacks and useful settings.



		var progressbar = $("#progressbar"),
			bar         = progressbar.find('.f-progress-bar'),
			settings    = {

				method: 'PUT', // HTTP method, default is 'POST'

				action: '/', // upload url

				allow : '*.(jpg|jpeg|gif|png)', // allow only images

				headers: {
					'Access-Control-Allow-Origin': '*'

				loadstart: function() {
					bar.css("width", "0%").text("0%");

				progress: function(percent) {
					percent = Math.ceil(percent);
					bar.css("width", percent+"%").text(percent+"%");

				allcomplete: function(response) {

					bar.css("width", "100%").text("100%");

					}, 250);

					alert("Upload Completed")

		var select = FatKit.uploadSelect($("#upload-select"), settings),
			drop   = FatKit.uploadDrop($("#upload-drop"), settings);


JavaScript options

Option Possible value Default Description
method string POST HTTP method used for the upload
action string '' Target url for the upload
single boolean true Send each file one by one
param string files[] Post query name
params JSON Object {} Additional request parameters
headers JSON Object {} Additional request headers
allow string *.* File filter
filelimit integer false Limit the number of files to upload
type (text | json) text Response type from server

Callback events

Name Parameter
before settings, files
beforeAll files
beforeSend xhr
progress percent
complete response, xhr
allcomplete response, xhr
notallowed file, settings
loadstart event
load event
loadend event
error event
abort event
readystatechange event