Documentation

Fileuploader - Beautiful and powerful HTML5 file upload plugin. A jQuery and PHP tool 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. Also don't forget to load jQuery library.
On the right side there 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 for the second time
  • Fileuploader files are on your server and you've adjusted the paths in the script and link tag
  • Do not include both minified and unminified version of jquery.fileuploader.min.css and jquery.fileuploader.min.js
						
<!DOCTYPE html html>
<html>
<head>
	<meta charset="utf-8">
  	<title>My page</title>

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

  	<!-- HTML content goes here -->

  	<!-- js -->
  	<script src="//code.jquery.com/jquery-3.2.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">
    $(document).ready(function() {
        $('input[name="files"]').fileuploader({
            // Options will go here
        });
    });
</script>
					
See options 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 options section

Cool, right?

Here is a default example of Fileuploader plugin with editor and sorter options enabled. Just try it.

Examples


In the following examples you can see how you can use the Fileuploader. Please check the .css, .js and .php files from examples. Recommended! 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! 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}<span class="fileuploader-action-popup"></span></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="${captions.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}<span class="fileuploader-action-popup"></span></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="${captions.download}" download><i></i></a>' +
				     '<a class="fileuploader-action fileuploader-action-remove" title="${captions.remove}"><i></i></a>' +
				'</div>' +
			    '</div>' +
			'</li>',
            
		// item popup preview {Object} 
		popup: {
			// popup HTML {String, Function}
			template: function(data) { return '<div class="fileuploader-popup">' +
				'<div class="fileuploader-popup-preview">' +
					'<div class="node ${format}">${reader.node}</div>' +
					'<div class="tools">' +
						'<ul>' +
							'<li>' +
								'<span>${captions.name}:</span>' +
								'<h5>${name}</h5>' +
							'</li>' +
							'<li>' +
								'<span>${captions.type}:</span>' +
								'<h5>${extension.toUpperCase()}</h5>' +
							'</li>' +
							'<li>' +
								'<span>${captions.size}:</span>' +
								'<h5>${size2}</h5>' +
							'</li>' +
							(data.reader && data.reader.width ? '<li>' +
								'<span>${captions.dimensions}:</span>' +
								'<h5>${reader.width}x${reader.height}px</h5>' +
							'</li>' : ''
							) +
							(data.reader && data.reader.duration ? '<li>' +
								'<span>${captions.duration}:</span>' +
								'<h5>${reader.duration2}</h5>' +
							'</li>' : ''
							) +
							'<li class="separator"></li>' +
							(data.format == 'image' && data.reader.src && data.editor ? '<li>' +
								'<a data-action="crop">' +
									'<i></i>' +
									'<span>${captions.crop}</span>' +
								'</a>' +
							'</li>' +
							'<li>' +
								'<a data-action="rotate-cw">' +
									'<i></i>' +
									'<span>${captions.rotate}</span>' +
								'</a>' +
							'</li>' : ''
							) +
							'<li>' +
								'<a data-action="remove">' +
									'<i></i>' +
									'<span>${captions.remove}</span>' +
								'</a>' +
							'</li>' +
						'</ul>' +
						'<div class="buttons">' +
							'<a class="fileuploader-popup-button" data-action="cancel">${captions.cancel}</a>' +
							'<a class="fileuploader-popup-button button-success" data-action="save">${captions.confirm}</a>' +
						'</div>' +
					'</div>' +
				'</div>' +
			'</div>'; },
			
			// Callback fired after creating the popup
			//  we will trigger by default buttons with custom actions
			onShow: function(item) {
				item.popup.html.on('click', '[data-action="crop"]', function(e) {
					if (item.editor)
						item.editor.cropper();
				}).on('click', '[data-action="rotate-cw"]', function(e) {
					if (item.editor)
						item.editor.rotate();
				}).on('click', '[data-action="remove"]', function(e) {
					item.popup.close();
					item.remove();
				}).on('click', '[data-action="cancel"]', function(e) {
					item.popup.close();
				}).on('click', '[data-action="save"]', function(e) {
					if (item.editor)
						item.editor.save();
					if (item.popup.close)
						item.popup.close();
				});
			},
			
			// Callback fired after closing the popup
			// we will remove by default the popup from DOM
			onHide: function(item) {
				var popup = item.popup.html;

				popup.fadeOut(200, function() {
					popup.remove();
				});
			}
		},
        
		// 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 false, it will generate an icon(you can also hide it with css)
		// if false, you can use the API method item.renderThumbnail() 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 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',
			sorter: '.fileuploader-action-sort',
			popup: '.fileuploader-popup',
			popup_open: '.fileuploader-action-popup'
		},
		
		// 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 or a image file is invalid
		onImageLoaded: function(item, listEl, parentEl, newInputEl, inputEl) {
			// invalid image?
			if (item.image.hasClass('fileuploader-no-thumbnail')) {
				// callback goes here
			}
			
			// image size and ratio?
			if (item.reader.node && item.reader.width > 1920 && item.reader.height > 1080 && item.reader.ratio != '16:9') {
				// callback goes 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  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 upload {Boolean}
		// if false, you can use the API methods - item.upload.send() to trigger upload for each file
		// if false, you can use the upload button - check the options example
		start: false,
		
		// upload the files synchron {Boolean}
		synchron: true,
        
		// upload file in chunks {false, Number}
		// set file chunk size in MB as Number (ex: 4)
		chunk: false,
		
		// Callback fired before upload a file
		// by returning false, you can prevent the upload
		beforeSend: function(item, listEl, parentEl, newInputEl, inputEl) {
			// example:
			// here you can extend the upload data
			item.upload.data.new_data_attribute = 'nice';
			
			// example:
			// here you can create upload headers
			item.upload.headers = {
				"Authorization": "Basic " + btoa(username + ":" + password)
			};

			return true;
		},
		
		// Callback fired if the upload succeeds
		// we will add by default a success icon and fadeOut the progressbar
		// Remember that if you want to show the PHP errors, you will need to process them here too. 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 upload failed
		// we will set by default 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 upload the file
		// we will set by default 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
		},

	},
	
	// image editor {Boolean, Object}
	// works perfect with popup
	// set on null to disable the editor
	// by default - null
	editor: {
		// editor cropper
		cropper: {
			// cropper ratio
			// example: null
			// example: '1:1'
			// example: '16:9'
			// you can also write your own
			ratio: null,
			
			// cropper minWidth in pixels
			// size is adjusted with the image natural width
			minWidth: null,
			
			// cropper minHeight in pixels
			// size is adjusted with the image natural height
			minHeight: null,
			
			// show cropper grid - gives a 'has-grid' classname to the editor
			showGrid: true
		},
		
		// editor on save quality (0 - 100)
		// only front-end
		quality: null,
		
		// editor on save maxWidth in pixels
		// only front-end
		maxWidth: null,
		
		// editor on save maxHeight in pixels
		// only front-end
		maxHeight: null,
		
		// Callback fired after saving the image in editor
		onSave: function(blobOrDataUrl, item, listEl, parentEl, newInputEl, inputEl) {
			// callback will go here
		}
	},
    
	// file sorter {Boolean, Object}
	// see also thumbnails._selectors.sorter in the options
	// set on false to disable the sorter
	// by default - false
	sorter: {
		// selector exclude on drag (ex: 'input, textarea')
		selectorExclude: null,

		// placeholder html
		// null - will clone the item without content
		placeholder: null,

		// scroll container on drag
		scrollContainer: window,

		// callback fired after sorting, adding and removing a file
		onSort: function(list, listEl, parentEl, newInputEl, inputEl) {
			// your callback goes 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/',
			readerCrossOrigin: 'anonymous', // to fix image cross-origin issue
			readerSkip: true, // to skip file from reading by rendering a thumbnail
			another_attribute: 'ok',
			you_can_use_it_later: 'hehe',
			also_in_templates: 'perfect'
		}
	} */
	files: null,
    
	// skip file name check and don't exclude the files with the same name {Boolean}
	// this option is fixing iPhone `picture.jpg` issue
	// this feature is available only in upload mode
	// set on true only if are changing the file name after uploader
	skipFileNameCheck: false,
	
	// 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 with Chrome and Firefox
	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 manipulate this list
	// files in this list that are obejcts like '{file: "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 them 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/upload
	onFilesCheck: function(files, options, listEl, parentEl, newInputEl, inputEl) {
		// callback will go here
		
		return true;
	},
    
	// Callback fired on rendering a file
	onFileRead: function(item, listEl, parentEl, newInputEl, inputEl) {
		// callback will go here
	},
	
	// 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(list, fileList, listInputEl, listEl, parentEl, newInputEl, inputEl) {
		// callback will go here

		return arrayList;
	},
	
	// 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'; },
		confirm: 'Confirm',
		cancel: 'Cancel',
		name: 'Name',
		type: 'Type',
		size: 'Size',
		dimensions: 'Dimensions',
		duration: 'Duration',
		crop: 'Crop',
		rotate: 'Rotate',
		download: 'Download',
		remove: 'Remove',
		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 chose 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,
	
	// image editor {null, Array}
	'editor' => array(
		// image maxWidth in pixels {null, Number}
		'maxWidth' => null,
		// image maxHeight in pixels {null, Number}
		'maxHeight' => null,
		// crop image {Boolean}
		'crop' => false,
		// image quality after save {Number}
		'quality' => 90
	),
	
	// 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,
	
	// move_uploaded_file {function}
	// prevent default php upload method and use yours
	// @param $temp_name {String} PHP file temp_name
	// @param $destination {String} file upload destination
	// @return {Boolean}
	'move_uploaded_file' => function($temp_name, $destination) {
		return move_uploaded_file($temp_name, $destination);
	},
	
	// validate_file {function}
	// custom file validation function
	// @param $file {Array} Fileuploader file array
	// @param $options {Array} Fileuploader options
	// @return {Boolean or String}
	'validate_file' => function($file, $options) {
		$isValid = true;
		
		if ($isValid) {
			return true;
		} else {
			return "Wrong file!";
		}
	}
)
					
+ 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-extensions="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);

// update the Fileuploader list of files
api.updateFileList();

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

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

// create a file from data or dataURI and add to the plugin (only in upload mode)
// @param data {String} - text or dataURI string
// @param type {String} - file type (ex: image/png)
// @param custom_name {null, String} - custom file name (ex: picture.png)
api.add(data, type, custom_name);

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

// start the upload of the files
api.uploadStart();

// 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

Item Api methods

Don't need enableApi option!

						
// remove item
item.remove();

// render thumbnail
item.renderThumbnail(custom_src?);

// item upload - !only if upload is enabled
/* start upload */
item.upload.send();
/* cancel upload */
item.upload.cancel();
/* retry upload if failed */
item.upload.retry();
/* resend upload */
item.upload.resend();

// popup - !only if popup is enabled
/* open popup */
item.popup.open();
/* close popup - !only if popup is openend */
item.popup.close();

// item file reader
/* read file in browser
   @param callback {null, Function}
   @param type {null, String} - read type ['astext', 'image', 'audio', 'video']
   @param force {Boolean} - ignore reader cache */
item.reader.read(callback, type, force);
				
// item image editor - !only if editor is enabled
/* rotate image */
item.editor.rotate();
/* show cropping tools in the popup */
item.editor.cropper();
/* save edited image
   @param callback {null, Function}
   @param toBlob {Boolean} - save canvas as Blob or just as dataURL?
   @param mimeType {null, String} - save image format ['image/jpeg', 'image/png']
   @param preventThumbnailRender {Boolean} - do not render thumbnail in HTML after save? */
item.editor.save(callback, asBlob, mimeType, preventThumbnailRender);
					
+ Expand code
PHP Api

Available methods are listed below.

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

	// initialize the FileUploader
	$FileUploader = new FileUploader('file_input_name', array(
		// Options will go here
	));
	
	// 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();

	// 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 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();
	
	// resize image
	// example replace image: FileUploader::resize($source, $width = 100);
	// example create thumbnail: FileUploader::resize($source, $width = 100, $height = 100, $destination = 'my_custom_thumbnail_name.jpg', $crop = false, $quality = 90, $rotation = 0);
	FileUploader::resize($source, $width = 100, $height = null, $destination = null);
    
	// remove old chunked files
	FileUploader::clean_chunked_files($directory = '../uploads/', $time = '-1 hour');

	// 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

/* upload 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;
}
					

Contact us

If you have any further questions about the Fileuploader plugin or other business, chat with us on #chatra or write to:

contact@innostudio.de

License


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


Get a License

Changelog

See the record of all changes made to the project:

v1.0

  • Initial commit

v1.0.0.2

  • Fixed Safari issue (#2)

v1.0.0.3

  • Fixed <!DOCTYPE> tag in all HTML documents
  • Fixed img styles for thumbnails example

v1.0.0.4

  • Removed some commas in js script
  • Added Drag&Drop feature in Chrome also for non-upload inputs

v1.0.0.5

  • Colored icon in the Drag&drop example
  • Fixed validator issue for AddMore option (#10)
  • Fixed Clipboardpaste name issue
  • Added id key for file data (id is a timestamp that can be used in the templates)
  • Improved onListInput callback (now you don't need to create the list, it comes as a function property. Return the list to get the changes)
  • updateFileList in Api functions (trigger file list updating)
  • uploadStart in Api functions (trigger file upload for all files synchron/asynchron)

v1.2

  • Added Popup feature. Now you can open a popup for each item (click on the thumbnail).
    • Popup preview for photo, video and audio files
    • thumbnails.item and thumbnails.item2 the line was changed to <div class="column-thumbnail">${image}<span class="fileuploader-action-popup"></span></div>
    • added thumbnails.popup option
    • added thumbnails._selectors.popup and thumbnails._selectors.popup_open option
    • item.popup.open method is available. After calling this function, the following values are available:
    • item.popup.html - Popup HTML element
    • item.popup.close() - Popup close method
  • Added Reader feature. Now you can read each type of file
    • item.reader.read(callback) method is now available. After calling this function, the following values are available:
    • iteam.reader.node - img, video and audio HTML node
    • item.reader.src - file reader result
    • item.reader.duration - video and audio duration
    • item.reader.duration2 - video and audio formatted duration
    • item.reader.width - img and video width
    • item.reader.height - img and video height
    • item.reader.frame - video thumbnail
  • Improved captions for multilangual templates.
    • added captions.close
    • added captions.download
    • added captions.remove
  • The thumbnails.item and thumbnails.item2 were some words like Download and Remove replaced with ${captions.download} and ${captions.remove}
  • Classname fileupload-no-thumbnail was renamed to fileuploader-no-thumbnail
  • Item thumbnail (canvas or img) are now aligned to the center of parent
  • Improved Ajax progress handling. Now the progressbar will stay to 99% until the success callback will come.
  • item.renderThumbnail(src) - now you can send a custom image src to render the thumbnail
  • Fixed iPhone issue: "File with the name image.jpg is already selected."
  • Improvements and fixes

v1.3

  • Image editor feature on front-End. Now you can open a popup and edit the images (click on the thumbnail).
    • added editor option
    • item.editor.rotate(degrees) method is available
    • item.editor.rotation value is available, only after calling the method above
    • item.editor.cropper(data) method is available
    • item.editor.crop value is available, only after calling the method above
    • item.editor.save(callback, asBlob, mimeType, preventThumbnailRender) method is available
  • Image editor feature on back-End (we use it to edit the images and to create thumbnails)
    • added editor option
    • FileUploader::resize method is now available
  • File sorter feature. Now you can sort by drag&drop the files
    • add sorter option
  • List input has now Array-Object format. Now you can send to Back-end your own file parameters (we are using now also for the editor). Add custom values in item.data.listProps to have them in the list input
  • item.upload.resend() method is now available to resend an ajax request
  • Improved the image resizer. Images that are resized for canvas in browser have a high quality now
  • Added upload.chunk option. Slice large files in chunks and upload them to server
  • Added api.add(data, type, custom_name) api method. Create a file from your string or dataURI and upload to server. Now you can upload WebCam photos or other file types converted into dataURI in browser
  • Popup redesign
  • Popup text files preview - set file format to astext to get it
  • item.reader.ratio - image and video ratio
  • assets.pxToRatio(width, height) helper function
  • assets.ratioToPx(width, height, ratio) helper function
  • item.renderImage - is now deprecated! Please use item.renderThumbnail instead
  • item.data.readerSkip = true to skip file from rendering
  • item.data.readerCrossOrigin = 'anonymous' to solve the cross-origin issue
  • captions.close - is now deprecated! Please use captions.cancel instead
  • thumbnails.onImageLoaded - the callback is triggered now also when the reading of an image failed. Now you can also validate the images
  • CSS - brighter main color
  • Added jquery.fileuploader.min.css file
  • Fixed validaiton check on the php side
  • Improvements and fixes