jquery.uploader v0.2.0

Simple HTML5 file uploader created as a plugin for jQuery.

View on GitHub Download



Documentation:



You can apply jquery.uploader plugin to the input file and change its settings. Example:

$(':input[type="file"]').uploader({
    'showThumbs': true,
    'addMore': true,
    'allowDuplicates': false
});

Name Description
limit

Maximal number of files.

Number; Default value: null
maxSize

Maximal file size in MB's.

Number; Default value: null
extensions

File extension's whitelist.

Array; Default value: null
changeInput

Create a new file input element. You can use the default template or to write your own as string or jquery element.

Boolean, String, Object; Default value: true
showThumbs

Show the in-browser files previews.

Boolean; Default value: false
appendTo

The target thumbnails target element selector. Use this option when you want to append your files previews into specific element.

String; Default value: null
theme

Specify the jquery.uploader theme. It will just set to main filer div as class the theme name.

String; Default value: 'default'
templates

Specify the templates, selectors and some options.

Object 

{
    'box': '...',
    'item': '...',
    'itemAppend': '...',
    'progressBar': '...',
    'itemAppendToEnd': false,
    'removeConfirmation': true,
    'canvasImage': true,
    'selectors': {
        'list': '.uploader-items-list',
        'item': '.uploader-item',
        'progressBar': '.bar',
        'remove': '.uploader-item-trash-action'
    }
}
uploadFile

Enable instant file uploading feature.

Object; Default value: null 

{
    'url': null, // URL to which the request is sent
    'data': null, // Data to be sent to the server
    'type': 'POST', // The type of request
    'headers': {}, // Request headers
    'enctype': 'multipart/form-data', // Request enctype
    'beforeSend': null, // A pre-request callback function
    'success': null, // Fired if the request succeeds
    'error': null, // Fired if the request fails
    'statusCode': null, // An object of numeric HTTP codes
    'onProgress': null, // Fired while uploading file
    'onComplete': null // Fired when all files were uploaded
}
dragDrop

Enable Drag&Drop feature. In this object you can specify only the callbacks. Note that this feature wors only with instant upload.

Object; Default value: null 

{
    'dragEnter': null, // Fired when a dragged element enters the input.
    'dragLeave': null, // Fired when a dragged element leaves the input.
    'drop': null, // Fired when a dragged element is dropped on a valid drop target.
}
addMore

Multiple file selection without instantly uploading them. You need to enable this feature in edit mode when you need to upload more than 1 file.

Boolean; Default value: false
excludeName

By removing a file the script is creating an hidden input with it's name. Use this option if you want to specify the input's name.

String; Default value: null
files

The list with the already uploaded files. Use this option in edit mode.

Array; Default value: null 

[
    {
        'name': 'appended_file.jpg',
        'size': 5453,
        'type': 'image/jpg',
        'file': '/path/to/file.jpg'
    },
    {
        'name': 'appended_file_2.jpg',
        'size': 9453,
        'type': 'image/jpg',
        'file': 'path/to/file2.jpg'
    }
]
beforeRender

A function that is fired before rendering the new file input.

Function; Default value: null
afterRender

A function that is fired after rendering the new file input.

Function; Default value: null
beforeShow

A function that is fired before showing thumbnail's box. Should return boolean value.

Function; Default value: null
afterShow

A function that is fired after appending all thumbnails items.

Function; Default value: null
beforeSelect

A function that is fired after selecting a file and before adding it to the memory. Should return boolean value.

Function; Default value: null
onSelect

A function that is fired after selecting a file.

Function; Default value: null
onRemove

A function that is fired after deleting a file.

Function; Default value: null
onEmpty

A function that is fired when no files are selected.

Function; Default value: null
options

Specify your own options that you can also use as uploader variables.

Object; Default value: null
captions

Specify your own captions. Here you can also use uploader variables.

Object 

{
    'button': 'Choose Files',
    'feedback': 'Choose files To Upload',
    'feedback2': 'files were chosen',
    'drop': 'Drop file here to Upload',
    'removeConfirmation': 'Are you sure you want to remove this file?',
    'errors': {
        'filesLimit': 'Only {{fi-limit}} files are allowed to be uploaded.',
        'filesType': 'Only Images are allowed to be uploaded.',
        'filesSize': '{{fi-name}} is too large! Please upload file up to {{fi-maxSize}} MB.',
        'filesSizeAll': "Files you've choosed are too large! Please upload files up to {{fi-maxSize}} MB."
    }
}
icons

Specify icons to be used

Object 

{
    'default': "fa",
    'trash': "fa-trash-o",
    'file': "fa-file-o",
    'image': "fa-file-image-o",
    'video': "fa-file-video-o",
    'audio': "fa-file-audio-o",
    'code': "fa-file-code-o",
    'xls': "fa-file-excel-o",
    'pdf': "fa-file-pdf-o",
    'ppt': "fa-file-powerpoint-o",
    'text': "fa-file-text-o",
    'odt': "fa-file-text-o",
    'doc': "fa-file-word-o",
    'docx': "fa-file-word-o",
    'zip': "fa-file-zip-o"
}




The plugin comes with a number of public values and functions to help you utilize the plugin in a number of different scenarios. To use it you will need to get the input property. Example:

var uploader = $(':input[type="file"]').prop('uploader');
uploader.reset();

Name Description
options

jquery.uploader options

Object
boxEl

Thumbnail's box element.

DOM Object
listEl

Thumbnail's list element.

DOM Object
newInputEl

New file input element.

DOM Object
inputEl

File input element.

DOM Object
files

Javascript FileList files.

FileList
files_list

jquery.uploader files list

Object
current_file

Last choosed file.

Object
append(file)

Append file function. Send an object with file information as paramenter.

Function 

{
    'name': 'appended_file.jpg',
    'size': 5453,
    'type': 'image/jpg',
    'file': '/path/to/file.jpg'
}
retry(index)

Retry upload-failed file function. Send file index as paramenter.

Function
remove(index)

Remove file function. Send file index as paramenter.

Function
reset()

Reset function.

Function