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 methods to start it (check 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
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
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