Documentation

Fileuploader - Beautiful and powerful HTML5 file uploading tool. A jQuery and PHP plugin that transforms the standard file input into a revolutionary and fancy field on your page.

Installation


You can install Fileuploader by linking .css and .js from "src/" folder to your html file. Don't forget also to load the jQuery library.
On the right side is a basic HTML template to use as an example:


Make sure:

  • You've added the jQuery library first
  • If you already have jQuery on your page, you shouldn't include it second time
  • Fileuploader files are on your server and you've adjusted the paths in the script and link tag
  • Do not include both jquery.fileuploader.js and jquery.fileuploader.min.js files
						
<!DOCTYPE html html>
<html>
<head>
	<meta charset="utf-8">
  	<title>My page</title>

	<!-- css -->
  	<link href="jquery.fileuploader.css" media="all" rel="stylesheet">
</head>
<body>

  	<!-- HTML content goes here -->

  	<!-- js -->
  	<script src="//code.jquery.com/jquery-3.1.1.min.js" type="text/javascript"></script>
  	<script src="jquery.fileuploader.min.js" type="text/javascript"></script>
</body>
</html>
                    
PHP instructions

Copy class.fileuploader.php from "src/" folder on your server.

How to use


Create a standard HTML form element. In this form we will have our file input and maybe other fields.

If you are not familiar with HTML form element, please, read this tutorial for beginners.

						
<form action="exmaple.php" method="post" enctype="multipart/form-data">
    <input type="file" name="files">
    <input type="submit">
</form>
					

Bind Fileuploader events on an input file element, select with a jQuery selector and call the fileuploader method.

If you are not familiar with jQuery, please, read this tutorial for beginners.

						
<script type="text/javascript">
	$('input[name="files"]').fileuploader({
            // Options will go here
	});
</script>
					
See documentation section
PHP instructions

Include class.fileuploader.php into your php file. Initialize it by writing in arguments the input file name and options.
On the right side is a basic example:

If you are not familiar with PHP, please, read this tutorial for beginners.

						
<?php
    include('class.fileuploader.php');
	
    // initialize the FileUploader
    $FileUploader = new FileUploader('files', array(
        // Options will go here
    ));
	
    // call to upload the files
    $upload = $FileUploader->upload();
	
    if($upload['isSuccess']) {
        // get the uploaded files
        $files = $upload['files'];
    }
    if($upload['hasWarnings']) {
        // get the warnings
        $warnings = $upload['warnings'];
    };
?>
					
See documentation section

Cool, yeah?

Here is the default example of Fileuploader plugin. Just try it.

Examples


In the following examples you can see how can you use the Fileuploader. Please check the .css, .js and .php files from the examples. Recommended! please check also the Inspect Element tool (Network, Sources and Console tab) in your browser to understand the configuration much easier.
Note! that in the examples will be only Front-End affected. We disabled the file upload service on our server.


Modes:
Themes:
More:

Options


Available options are listed below. Remember! that in all text options you can use Text Variables or functions which are returning text (Ex: captions.button or captions.errors.filesLimit).

						
{
	// limit of files {null, Number}
	// also with the appended files
	// if null - has no limits
	// example: 3
	limit: null,
	
	// file's maximal size in MB {null, Number}
	// also with the appended files
	// if null - has no limits
	// example: 2
	maxSize: null,
	
	// each file's maximal size in MB {null, Number}
	// if null - has no limits
	// example: 2
	fileMaxSize: null,
	
	// allowed extensions or file types {null, Array}
	// if null - has no limits
	// example: ['jpg', 'jpeg', 'png', 'audio/mp3', 'text/plain']
	extensions: null,
	
	// new input {Boolean, String, Function, jQuery Object}
	// example: true
	// example: ' ' - no input
	// example: '<div>Click me</div>'
	// example: function(options) { return '<div>Click me</div>'; }
	// example: $('.selector')
	changeInput: true,
	
	// add brackets at the end of the input name by multiple files {Boolean}
	// specially for PHP
	inputNameBrackets: true,
	
	// fileuploader theme {null, String}
	// it will be only a class name in fileuploader parent element
	// the class name will be: fileuploader-theme-default
	theme: 'default',
	
	// enable thumbnails for files {null, Object}
	// set on null to disable the thumbnails
	thumbnails: {
		// thumbnails list HTML {String, Function}
		// example: '<ul></ul>'
		// example: function(options) { return '<ul></ul>'; }
		box: '<div class="fileuploader-items">' +
			  '<ul class="fileuploader-items-list"></ul>' +
		      '</div>',
		
		// append thumbnails list to selector {null, String, jQuery Object}
		// example: 'body'
		// example: $('body')
		boxAppendTo: null,
		
		// thumbnails item HTML {String, Function}
		// example: '<li>${name}</li>'
		// example: function(item) { return '<li>' + item.name + '</li>'; }
		item: '<li class="fileuploader-item">' +
			   '<div class="columns">' +
			   	'<div class="column-thumbnail">${image}</div>' +
				'<div class="column-title">' +
				     '<div title="${name}">${name}</div>' +
				     '<span>${size2}</span>' +
				'</div>' +
				'<div class="column-actions">' +
				     '<a class="fileuploader-action fileuploader-action-remove" title="Remove"><i></i></a>' +
				'</div>' +
			    '</div>' +
			    '<div class="progress-bar2">${progressBar}<span></span></div>' +
			'</li>',
		
		// thumbnails appended item HTML {String, Function}
		// example: '<li>${name}</li>'
		// example: function(item) { return '<li>' + item.name + '</li>'; }
		item2: '<li class="fileuploader-item">' +
			   '<div class="columns">' +
			   	'<a href="${data.url}" target="_blank">' +
				     '<div class="column-thumbnail">${image}</div>' +
				     '<div class="column-title">' +
				          '<div title="${name}">${name}</div>' +
				          '<span>${size2}</span>' +
				     '</div>' +
				'</a>' +
				'<div class="column-actions">' +
				     '<a href="${file}" class="fileuploader-action fileuploader-action-download" title="Download" download><i></i></a>' +
				     '<a class="fileuploader-action fileuploader-action-remove" title="Remove"><i></i></a>' +
				'</div>' +
			    '</div>' +
			'</li>',
			
		// insert the thumbnail's item at the beginning of the list? {Boolean}
		itemPrepend: false,
		
		// show a confirmation dialog by removing a file? {Boolean}
		// it will not be shown in upload mode by canceling an upload
		removeConfirmation: true,
		
		// render the image thumbnail? {Boolean}
		// if it will be false, it will generate an icon(you can also hide it with css)
		// if it will be false, you can use the API method (item.renderImage()) to render it (check thumbnails example)
		startImageRenderer: true,
		
		// render the images synchron {Boolean}
		// made to improve the browser speed
		synchronImages: true,
		
		// render the image in a canvas element {Boolea, Object}
		// if it will be true, it will generate an image with the css sizes from the parent element (.column-thumbnail)
		// you can also set the width and the height in the object
		// by default - true
		canvasImage: {
			width: null,
			height: null
		},
		
		// thumbnails selectors
		_selectors: {
			list: '.fileuploader-items-list',
			item: '.fileuploader-item',
			start: '.fileuploader-action-start',
			retry: '.fileuploader-action-retry',
			remove: '.fileuploader-action-remove'
		},
		
		// Callback fired before adding the list element
		beforeShow: function(parentEl, newInputEl, inputEl) {
			// callback will go here
		},
		
		// Callback fired after adding the item element
		onItemShow: function(item, listEl, parentEl, newInputEl, inputEl) {
			// callback will go here
		},
		
		// Callback fired after removing the item element
		// by default we will animate the removing action
		onItemRemove: function(itemEl, listEl, parentEl, newInputEl, inputEl) {
			itemEl.children().animate({'opacity': 0}, 200, function() {
				setTimeout(function() {
					itemEl.slideUp(200, function() {
						itemEl.remove(); 
					});
				}, 100);
			});
		},
		
		// Callback fired after the item image was loaded
		onImageLoaded: function(itemEl, listEl, parentEl, newInputEl, inputEl) {
			// callback will go here
		},
	},
	
	// enable the upload mode {null, Object}
	// each file will be separately uploaded to server
	// if you want to send all files, you don't even need this option. Just use the standard HTML <form> to do this.
	// by default - null
	upload: {
		// upload URL {String}
		url: 'index.php',
		
		// upload data {null, Object}
		// you can also change this Object in beforeSend callback
		// example: { option_1: 'yes', option_2: 'ok' }
		data: null,
		
		// upload type {String}
		// for more details http://api.jquery.com/jquery.ajax/
		type: 'POST',
		
		// upload enctype {String}
		// for more details http://api.jquery.com/jquery.ajax/
		enctype: 'multipart/form-data',
		
		// auto-start file uploading {Boolean}
		// if it will be false, you can use the API method - api.getChoosedFiles()[i].upload.start() to trigger uploading for each file
		// if it will be false, you can use the upload button - check the options example
		start: false,
		
		// upload the files synchron {Boolean}
		synchron: true,
		
		// Callback fired before uploading a file
		// by returning false, you can prevent the upload
		beforeSend: function(item, listEl, parentEl, newInputEl, inputEl) {
			// example:
			// here you can extend the uploading data
			item.upload.data.new_data_attribute = 'nice';

			return true;
		},
		
		// Callback fired if the uploading succeeds
		// by default we will add a success icon and fadeOut the progressbar
		// Remember that if you want so show the PHP errors, you will need to process them also here. To prevent it you will need to respond on the upload url with error code in header.
		onSuccess: function(data, item, listEl, parentEl, newInputEl, inputEl, textStatus, jqXHR) {
			item.html.find('.column-actions').append(
				'<a class="fileuploader-action fileuploader-action-remove fileuploader-action-success" title="Remove"><i></i></a>'
			);

			setTimeout(function() {
				item.html.find('.progress-bar2').fadeOut(400);
			}, 400);
		},
		
		// Callback fired if the uploading failed
		// by default we will set the progressbar to 0% and if it wasn't cancelled, we will add a retry button
		// Remember that the PHP errors will be sent in the onSuccess function. To prevent this you will need to respond on the upload url with error code in header.
		onError: function(item, listEl, parentEl, newInputEl, inputEl, jqXHR, textStatus, errorThrown) {
			var progressBar = item.html.find('.progress-bar2');

			if(progressBar.length > 0) {
				progressBar.find('span').html(0 + "%");
				progressBar.find('.fileuploader-progressbar .bar').width(0 + "%");
				item.html.find('.progress-bar2').fadeOut(400);
			}

			item.upload.status != 'cancelled' && item.html.find('.fileuploader-action-retry').length == 0 ? item.html.find('.column-actions').prepend(
				'<a class="fileuploader-action fileuploader-action-retry" title="Retry"><i></i></a>'
			) : null;
		},
		
		// Callback fired while uploading the file
		// by default we will set the progressbar width and percentage
		// data = {
			loaded: ...,
			loadedInFormat: ...,
			total: ...,
			totalInFormat: ...,
			percentage: ...,
			secondsElapsed: ...,
			secondsElapsedInFormat:...,
			bytesPerSecond: ...,
			bytesPerSecondInFormat: ...,
			remainingBytes: ...,
			remainingBytesInFormat: ...,
			secondsRemaining: ...,
			secondsRemainingInFormat: ...
		}
		onProgress: function(data, item, listEl, parentEl, newInputEl, inputEl) {
			var progressBar = item.html.find('.progress-bar2');

			if(progressBar.length > 0) {
				progressBar.show();
				progressBar.find('span').html(data.percentage + "%");
				progressBar.find('.fileuploader-progressbar .bar').width(data.percentage + "%");
			}
		},
		
		// Callback fired after all files were uploaded
		onComplete: function(listEl, parentEl, newInputEl, inputEl, jqXHR, textStatus) {
			// callback will go here
		},
	},
	
	// enable the drag&drop feature {Boolean, Object}
	// this feature is available only in upload mode
	// by default - true
	dragDrop: {
		// set drag&drop container {null, String, jQuery Object}
		// example: 'body'
		// example: $('body')
		container: null,
		
		// Callback fired on entering with dragged files the drop container
		onDragEnter: function(event, listEl, parentEl, newInputEl, inputEl) {
			// callback will go here
		},
		
		// Callback fired on leaving with dragged files the drop container
		onDragLeave: function(event, listEl, parentEl, newInputEl, inputEl) {
			// callback will go here
		},
		
		// Callback fired on dropping the dragged files in drop container
		onDrop: function(event, listEl, parentEl, newInputEl, inputEl) {
			// callback will go here
		},

	},
	
	// enable the addMore mode {Boolean}
	// choose more files from different folders; can be used in the standard HTML <form>
	addMore: false,
	
	// appended files {null, Array of Objects}
	// useful for REST API in javascript
	// please follow this structure for each file:
	{
		name: 'filename1.txt',
		size: 1024,
		type: 'text/plain',
		file: 'uploads/filename1.txt',
		data: {
			url: 'http://your_link.com/',
			another_attribute: 'ok',
			you_can_use_it_later: 'hehe',
			also_in_templates: 'perfect'
		}
	}
	files: null,
	
	// upload an image from clipboard {Boolean, Number in ms}
	// the input should be completely into view by pasting
	// this feature is available only in upload mode
	// compatible only for Chrome
	clipboardPaste: 2000,
	
	// input with the listed files {Boolean, String}
	// this list is an input[type="hidden"]
	// this list will be generated from each choosed/appended file name in a JSON format. You can use the onListInput callback to mainpulate this list
	// files in this list that are "0://file_name.ext" are showing to PHP that they are choosed and should be uploaded
	// if you've appended some files on the server-side, PHP will check if each appended file is in this list, if not, PHP will set it as removed. Also, it is very important if you have appended files
	// example: true
	// example: 'custom_listInput_name'
	listInput: true,
	
	// enable API methods {Boolean}
	// if it will be true, you can use API methods like writing this code:
	// var api = $.fileuploader.getInstance(input_element); (check api example to see all available methods)
	enableApi: false,
	
	// standard input events {null, Object}
	// bind standard Javascript input events
	// example: {
		click: function(event) {
			// input was clicked
		}
	}
	listeners: null,
	
	// Callback fired when fileuploader is not supported in your browser
	onSupportError: function(parentEl, inputEl) {
		// callback will go here
	},
	
	// Callback fired before rendering the fileuploader elements
	// by returning false, you will prevent the rendering
	beforeRender: function(parentEl, inputEl) {
		// callback will go here
		
		return true;
	},
	
	// Callback fired after rendering the fileuploader elements
	afterRender: function(listEl, parentEl, newInputEl, inputEl) {
		// callback will go here
	},
	
	// Callback fired after selecting the files from computer but only before processing them
	// by returning false, you will prevent the processing of the files but they will remain in the input
	beforeSelect: function(files, listEl, parentEl, newInputEl, inputEl) {
		// callback will go here
		
		return true;
	},
	
	// Callback fired on checking for warnings the choosed files
	// by returning false, you will prevent the files from adding/uploading
	onFilesCheck: function(files, options, listEl, parentEl, newInputEl, inputEl) {
		// callback will go here
		
		return true;
	},
	
	// Callback fired on selecting and processing a file
	onSelect: function(item, listEl, parentEl, newInputEl, inputEl) {
		// callback will go here
	},
	
	// Callback fired after selecting and processing of all files
	afterSelect: function(listEl, parentEl, newInputEl, inputEl) {
		// callback will go here
	},
	
	// Callback fired after generating a list input. Needs to return an array!
	// by default - null
	onListInput: function(fileList, listInputEl, listEl, parentEl, newInputEl, inputEl) {
		var list = [];

		$.each(fileList, function(index, value) {
			list.push(value.name);
		});

		return list;
	},
	
	// Callback fired after deleting a file
	// by returning false, you can prevent a file from removing
	onRemove: function(item, listEl, parentEl, newInputEl, inputEl) {
		// callback will go here
		
		return true;
	},
	
	// Callback fired when fileuploader has no files
	onEmpty: function(listEl, parentEl, newInputEl, inputEl) {
		// callback will go here
	},
	
	// dialogs
	// made to let you customizing the standard Javascript dialogs
	// this dialogs are used by showing a file warning or confirming a file removing
	dialogs: {
	
		// alert dialog
		alert: function(text) {
			return alert(text);
		},
		
		// confirm dialog
		confirm: function(text, callback) {
			confirm(text) ? callback() : null;
		}
	},
	
	// captions
	captions: {
		button: function(options) { return 'Choose ' + (options.limit == 1 ? 'File' : 'Files'); },
		feedback: function(options) { return 'Choose ' + (options.limit == 1 ? 'file' : 'files') + ' to upload'; },
		feedback2: function(options) { return options.length + ' ' + (options.length > 1 ? ' files were' : ' file was') + ' chosen'; },
		drop: 'Drop the files here to Upload',
		paste: '<div class="fileuploader-pending-loader"><div class="left-half" style="animation-duration: ${ms}s"></div><div class="spinner" style="animation-duration: ${ms}s"></div><div class="right-half" style="animation-duration: ${ms}s"></div></div> Pasting a file, click here to cancel.',
		removeConfirmation: 'Are you sure you want to remove this file?',
		errors: {
			filesLimit: 'Only ${limit} files are allowed to be uploaded.',
			filesType: 'Only ${extensions} files are allowed to be uploaded.',
			fileSize: '${name} is too large! Please choose a file up to ${fileMaxSize}MB.',
			filesSizeAll: 'Files that you choosed are too large! Please upload files up to ${maxSize} MB.',
			fileName: 'File with the name ${name} is already selected.',
			folderUpload: 'You are not allowed to upload folders.'
		}
	}
}
					
+ Expand code
PHP Options

Available options are listed below.

						
array (
	// limit of files {null, Number}
	// also with the appended files
	// if null - has no limits
	// example: 3
	'limit' => null,
	
	// file's maximal size in MB {null, Number}
	// also with the appended files
	// if null - has no limits
	// example: 2
	'maxSize' => null,
	
	// each file's maximal size in MB {null, Number}
	// if null - has no limits
	// example: 2
	'fileMaxSize' => null,
	
	// allowed extensions or file types {null, Array}
	// if null - has no limits
	// example: ['jpg', 'jpeg', 'png', 'audio/mp3', 'text/plain']
	'extensions' => null,
	
	// check if file input exists ($_FILES[ file_input_name ]) {Boolean}
	// check if files were choosed (minimum 1 file should be choosed)
	'required' => false,
	
	// upload directory {String}
	// note that main directory is the directory where you are initializing the FileUploader class
	// example: '../uploads/'
	'uploadDir' => 'uploads/',
	
	// file title {String, Array}
	// example: 'name' - original file name
	// example: 'auto' - random text from 12 letters
	// example: 'my_custom_filename' - custom file name
	// example: 'my_custom_filename_{random}' - my_custom_filename_(+ random text from 12 letters)
	// '{random} {file_name} {file_size} {timestamp} {date} {extension}' - variables that can be used to generate a new file name
	// example: array('auto', 24) - [0] is a string as in the examples above, [1] is the length of the random string
	'title' => 'name',
	
	// replace the file with the same name? {Boolean}
	// if it will be false - will automatically generate a new file name with (1,2,3...) at the end of the file name
	'replace' => false,
	
	// input with the listed files {Boolean, String}
	// this list is an input[type="hidden"]
	// this list is important to check which files shouldn't be uploaded or need to be removed
	// example: true
	// example: 'custom_listInput_name'
	'listInput' => true,
	
	// appended files {null, Array with arrays}
	// it is important to declare them if you want to check the right limit and maxSize options; by appended files; by generating an input
	// please follow this structure for each file:
	array(
		"name" => 'filename1.txt',
		"type" => FileUploader::mime_content_type('uploads/filename1.txt'),
		"size" => filesize('uploads/filename1.txt'),
		"file" => 'uploads/filename1.txt',
		"data" => array(
			"url" => 'http://localhost/example/uploads/filename1.txt',
			"another_attribute" => "ok"
		)
	)
	'files' => null
)
					
+ Expand code

Nice, isn't it?

A fancy configuration of a Fileuploader plugin. Just let your mind to design your own input!

Input attributes


You can configurate the Fileuploader not only in Javascript but also setting some input attributes in HTML.

Example: <input type="file" name="files" data-fileuploader-limit="2">

						
<!-- limit option {Number} -->
data-fileuploader-limit="2"

<!-- maxSize option {Number} -->
data-fileuploader-maxSize="3"

<!-- fileMaxSize option {Number} -->
data-fileuploader-fileMaxSize="1"

<!-- extensions option {Comma spliced String} -->
data-fileuploader-fileMaxSize="jpg, png, gif"

<!-- theme option {String} -->
data-fileuploader-theme="default"

<!-- listInput option {String} -->
data-fileuploader-listInput="myCustomName"

<!-- files option {JSON String} -->
data-fileuploader-files='"[{"name":"filename1.txt","size":1024,"type":"text/plain","file":"uploads/filename1.txt"}]"'
					

Api

Available methods are listed below.
Don't forget that you will need to set enableApi on true to activate the Api methods.

						
var api = $.fileuploader.getInstance(file_input_element);

// open browser file explorer to choosed files
api.open();

// get Fileuploader options
api.getOptions();

// get Fileuploader parent element
api.getParentEl();

// get Fileuploader input element
api.getInputEl();

// get Fileuploader new/generated input element
api.getNewInputEl();

// get Fileuploader thumbnails list element
api.getListEl();

// get Fileuploader listInput element
api.getListInputEl();

// get Fileuploader file items
api.getFiles();

// get Fileuploader choosed file items
api.getChoosedFiles();

// get Fileuploader appended file items
api.getAppendedFiles();

// get Fileuploader uploaded file items
api.getUploadedFiles();

// get Fileuploader list of files using custom key
// @param toJSON {Boolean} - Parse the Array to JSON?
// @param customItemKey {String} - Generate a list with only a file attribute (ex: name, url)?
api.getFileList(toJSON, customItemKey);

// set Fileuploader option
api.setOption(key, value);

// get an Fileuploader item data by giving an item HTML element
api.findFile(itemHtmlElement);

// append file (Object) or files(Array with Objects)
api.append(file);

// remove an item by giving an item Object or item HTML element
api.remove(item);

// reset the Fileuploader input
api.reset();

// disable Fileuploader input
api.disable(also_lock_item_remove_startUpload_retry_action);

// enable Fileuploader input
api.enable();

// return true if there are no files
api.isEmpty();

// return true if the input is disabled
api.isDisabled();

// return true if the input is rendered
api.isRendered();

// return the plugin mode ('default', 'addMore', 'upload')
api.getPluginMode();

// generate a text with variables
api.assets.textParse(myText, myObjectWithVariables);

// destroy Fileuploader
api.destroy();
					
+ Expand code
PHP Api

Available methods are listed below.

						
<?php
	include('class.fileuploader.php');

	// initialize the FileUploader
	$FileUploader = new FileUploader('input_file_name', array(
		// Options will go here
	));

	// call to upload the files
	$upload = $FileUploader->upload();

	if($upload['isSuccess']) {
		// get the uploaded files
		$files = $upload['files'];
	}
	if($upload['hasWarnings']) {
		// get the warnings
		$warnings = $upload['warnings'];
	};

	// get listInput value
	$FileUploader->getListInput();

        // get removed list
        // give a String parameter (ex: 'file' or 'name' or 'data.url') to get a file by a custom input attribute. Default is 'file'
        // note that FileUploader will not remove your appended files that were removed on Front-End
        // to remove them, please use this example: 
        // foreach($FileUploader->getRemovedFiles('file') as $key=>$value) {
        //     unlink('../uploads/' . $value['name']);
        // }
	$FileUploader->getRemovedFiles();

	// get the list of the files
	// without parameter it will return an array with appended and uploaded files
	// give a String parameter (ex: 'file' or 'name' or 'data.url') to generate a custom input list of the files
	// example: you can store the files in the MySQL using this function
	// $myFilesForSql = implode('|', $FileUploader->getFileList('name'));
	// $myFilesForSql = json_encode($FileUploader->getFileList('name'));
	$FileUploader->getFileList();

	// get the HTML generated input
	$FileUploader->generateInput();
?>
					
+ Expand code

Text Variables


You can use this inline variables in each text option. Just write ${variable_name} to transform it. Don't forget! that instead of using text variables you can set an option to function and using the function arguments, return a custom text or HTML code (see captions.feedback). This feature can be also customized by you to generate a content using API.assets.textParese(text, {your data}).

Example: 'Only ${limit} files are allowed to be uploaded.'

						
<!-- limit option -->
<!-- always available -->
${limit}

<!-- maxSize option -->
<!-- always available -->
${maxSize}

<!-- fileMaxSize option -->
<!-- always available -->
${fileMaxSize}

<!-- extensions option -->
<!-- always available -->
${extensions}

<!-- clipboardPaste option -->
<!-- only for captions.paste -->
${ms}

<!-- number of choosed/appended files -->
<!-- only for captions.feedback and captions.feedback2 -->
${length}

<!-- file name -->
<!-- only in thumbnails.item, thumbnails.item2, captions.removeConfirmation, captions.errors.fileSize and captions.errors.fileName -->
${name}

<!-- file title (file name without extension) -->
<!-- only in thumbnails.item, thumbnails.item2, captions.removeConfirmation, captions.errors.fileSize and captions.errors.fileName -->
${title}

<!-- file extension -->
<!-- only in thumbnails.item, thumbnails.item2, captions.removeConfirmation, captions.errors.fileSize and captions.errors.fileName -->
${extension}

<!-- file size -->
<!-- only in thumbnails.item, thumbnails.item2, captions.removeConfirmation, captions.errors.fileSize and captions.errors.fileName -->
${size}

<!-- file size (formatted in bytes, kbs, mbs...) -->
<!-- only in thumbnails.item, thumbnails.item2, captions.removeConfirmation, captions.errors.fileSize and captions.errors.fileName -->
${size2}

<!-- file type (audio/mp3) -->
<!-- only in thumbnails.item, thumbnails.item2, captions.removeConfirmation, captions.errors.fileSize and captions.errors.fileName -->
${type}

<!-- file format (audio) -->
<!-- only in thumbnails.item, thumbnails.item2, captions.removeConfirmation, captions.errors.fileSize and captions.errors.fileName -->
${format}

<!-- file data -->
<!-- only in thumbnails.item, thumbnails.item2, captions.removeConfirmation, captions.errors.fileSize and captions.errors.fileName -->
${data.my_custom_data_key}

<!-- file icon HTML element -->
<!-- remember that a file-like icon is also available, just remove the comments in css file from the line /* item icon like file */ -->
<!-- only in thumbnails.item and thumbnails.item2 -->
${icon}

<!-- file thumbnail / file icon (for not image files) holder HTML element -->
<!-- only in thumbnails.item and thumbnails.item2 -->
${image}
					
+ Expand code

Element classes


In some situations the plugin will set a specific class attribute to a HTML element to improve the design and animations role in the upload process. Using this classes, you can easier configurate the Fileuploader plugin with CSS.


Parent Element (.fileuploader)
						
/* Theme class */
.fileuploader-theme-{fileuploader theme option}

/* Focus state */
.fileuploader-focused

/* Disabled state */
.fileuploader-disabled

/* Uploading state */
.fileuploader-is-uploading
					

Input Element (.fileuploader-input)
						
/* Dragging state */
.fileuploader-dragging
					

Item Element (.fileuploader-item)
						
/* File type */
.file-type-{file type (ex: image, audio, text-plain)}

/* File extension */
.file-ext-{file extension (ext: jpg, mp3, txt)}

/* File upload states */
.upload-pending, .upload-loading, .upload-cancelled, .upload-failed, .upload-success

/* ============== elements that are in the item ============== */
/* File image holder with loading state */
.fileuploader-item-image.fileuploader-loading

/* File image holder with unsupported image format */
.fileupload-no-thumbnail

/* File icon */
.fileuploader-item-icon

/* File progressbar */
.fileuploader-progressbar .bar
                    

Action icons

/* remove icon */
.fileuploader-action-remove

/* start the upload icon */
.fileuploader-action-start

/* success icon */
.fileuploader-action-success

/* download icon */
.fileuploader-action-download

/* upload retry icon */
.fileuploader-action-retry
					

Like-file icon?

Yes, just find in jquery.fileuploader.css file the /* item icon like file */ line and remove the comments below.
					

Own file icon?

/* It's easy, just follow this example: */
.file-type-audio .fileuploader-item-icon {
	background-color: #000 !important;
}
.file-type-audio .fileuploader-item-icon i {
	color: #fff;
}
					

Any questions?

If you have any further questions about the Fileuploader plugin or you want to hire me for a more complex project (ex. file manager), you can write me an email on:

contact@innostudio.de

License


A regular license is required if you are using this plugin in more than one of your projects (including sites for your customers). A commercial license code is required by including this plugin in commercial applications (including sites, themes and apps you plan to sell). Sharing the source code or selling it particullary is not allowed.

If you want to try the Fileuploader or you are planning to use this plugin only in ONE (for the next using you will need to pay for a regular lincese) personal and non-commercial project without supporting it you can download it too.


Get a License