jQuery.filer

jQuery.filer - Simple HTML5 file uploader, a plugin tool for jQuery which change completely file input and make it with multiple file selection, drag&drop support, different validations, thumbnails, icons, instant upload, print-screen upload and many other features and options.

v1.3.0

Beautiful and performant file input

We've created an input and activated partial all jquery.filer features on this demo to show for what this script is actually used for and it's power. In this example we've deactivate all file validators and used drag&drop, instantly file upload, file preview, clipboard image paste, customized input and thumbs templates, custom theme features to create a good playground for you. You can also take a look in your browser console to see the server response after uploading a files.


Instructions Demos

Features

This section gives a short description about the most considerable script features.

  • check Change file input

    Design your own file input with HTML&CSS or just use our default template.

  • pan_tool Drag&Drop

    Drag and drop files straight from your desktop and upload directly them.

  • cloud_upload Instant uploading

    Upload the file directly to server after choosing or dragging it.

  • add Add more

    Choose multiple files from different folders without instantly uploading them.

  • rowing Delete/Retry/Cancel...

    Use this features or create your own action to manipulate with files.

  • error_outline Validators

    Limit your users to a specific file type, size, number of files or write your own custom validator.

  • photo Resized image & extension previews

    Give your users an in-browser thumb preview of images or file extension before they upload.

  • mode_edit Edit mode

    Keep the uploaded files to input for previewing or editing them.

  • accessibility API

    You can completely manipulate your new jQuery.filer input by using API attributes and methods.

  • code Customizig

    Customize your input, templates(inline variables, 40+ icons), captions, callbacks and many others.

Compatibility

This section describes the script compatibility with browsers and servers.

Browser Support

  • Chrome 13+
  • Firefox 3.6+
  • Safari 6+
  • Opera 11.1+
  • Maxthon 3.4+
  • IE 10+
  • and others that supports HTML5

Server Support

  • ASP.NET
  • ColdFusion
  • Node.js
  • PHP
  • Perl
  • Python
  • and others that supports standart HTML form file uploads

Instructions:


Download the plugin, unzip it, copy files and include jQuery.filer script and stylesheets in your document (you will need to make sure the css and js files are on your server, and adjust the paths in the script and link tag). Make sure you also load the jQuery library. Example:


Stylesheets:

Include the jQuery.filer stylesheets into head.

<link href="./css/jquery.filer.css" type="text/css" rel="stylesheet" />
<link href="./css/themes/jquery.filer-dragdropbox-theme.css" type="text/css" rel="stylesheet" />

Scripts:

Include the jQuery library and jQuery.filer script file in your html page.

<script src="http://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="./js/jquery.filer.min.js"></script>

HTML:

Create a simple form with an input file element.

<form action="php/upload.html" method="post" enctype="multipart/form-data">
<input type="file" name="files[]" id="filer_input" multiple="multiple">
<input type="submit" value="Submit">
</form>

Javascript:

The plugin is named "filer" and can be applied to any element. If you are not familiar with jQuery, please, read this tutorial for beginners.

$(document).ready(function() {
$('#filer_input').filer();
});

Result:

Here is the result of our effort. Note that we haven't applied any option or theme and the example below is the default version.

Demos:


Example 1:

In this example we limit our users with maximal 3 number of files, all files together must have maximal 3MB's and the file's extensions should be matched in the array(ex: ['jpg', 'png', 'gif']). We are also changig the file input to jQuery.filer default design. We also need to show the file preview in our browser before uploading the file.

limit: 3,
maxSize: 3,
extensions: ["jpg", "png", "gif"],
showThumbs: true
Result:




Example 2:

In this example we designed our own file input and used our own theme - 'dragdropbox'. We also added the file preview in our browser before uploading the file.

showThumbs: true,
templates: {...} // see demo in .zip file
Result:




Example 3:

If you want to have an input like in Example 1 and also to allow your users to upload files from different folders just set addMore option to true

addMore: true
Result:

Example 4:

In this example we activated Drag&Drop feature for the default jQuery.filer input. Note that this feature is working only with Instantly Upload feature!

dragDrop: {...} // see documentation
Result:

Example 5:

In this example we activated Instantly Upload feature. After choosing a file, it should automatically upload it!

uploadFile: {...} // see documentation
Result:

Example 6:

In this example we activated addMore option and added 2 files(this files were already uploaded). Now you can edit the 2 uploaded files or add some more.

Note that on the back-end side to get the full list with files you will need to append new uploaded list to the old one.

files: [...] // see documentation
Result:

Download

The script is available on Github. You can download it directly from there or just to take a look at source code, issues and changelog.

Documentation

This section gives the full documentation of this script.

Options in code

You can apply jQuery.filer plugin to the input file and to send options als Object or Function. Example:

$("#file_input").filer( Obj );
$("#file_input").filer(function(default_options){
    return Obj;
});
  • Name
    Description
  • limit

    Maximal number of files.

    null, Number; Default value: null
  • maxSize

    Maximal size in MB's for all files.

    null, Number; Default value: null
  • fileMaxSize

    Maximal file size in MB's for each file.

    null, Number; Default value: null
  • extensions

    File extensions and mime types whitelist.

    null, 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.

    null, String; Default value: null
  • theme

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

    null, String; Default value: null
  • templates

    Specify the file preview templates, selectors and some options.

    Object, Default value:

    {
        box: null, //Thumbnail's box element {null, String}
        item: null, //File item element {String(use Filer Variables), Function}
        itemAppend: null, //File item element for edit mode {String(use Filer Variables), Function}
        progressBar: null, //File upload progress bar element {String}
        itemAppendToEnd: false, //Append the new file item to the end of the list {Boolean}
        removeConfirmation: true, //Remove file confirmation {Boolean}
        canvasImage: true //Resize and crop the image thumbnail to item element size
        _selectors: {
            list: null, //List selector {String}
            item: null, //Item selector {String}
            progressBar: null, //Progress bar selector {String}
            remove: null //Remove button selector {String}
        }
    }
  • uploadFile

    Enable Instantly file uploading feature. In the object you can specify the normal jQuery $.ajax options, or callbacks.

    null, Object; Default value:

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

    Enable Drag&Drop feature. In this object you can specify only the callbacks. Note that this feature works only with activated uploadFile option.

    null, Object; Default value: null

    {
        dragEnter: null, //A function that is fired when a dragged element enters the input. {Function}
        dragLeave: null, //A function that is fired when a dragged element leaves the input. {Function}
        drop: null, //A function that is fired when a dragged element is dropped on a valid drop target. {Function}
        dragContainer: null //Drag container {String}
    }
  • 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.
    Note that if you want to use it, you will need to remove the options dragDrop and uploadFile.

    Boolean; Default value: false
  • allowDuplicates

    Allow or disallow user to upload the same file multiple time.

    Boolean; Default value: false
  • clipBoardPaste

    Printscreen or copied images would be uploaded by pasting. Note that this feature works only by instantly uploading. In Firefox this feature is not available.

    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.

    null; Default value: jfiler-items-exclude-(input file name)-(input index)
  • files

    The list with the already uploaded files. Use this option in Edit Mode. Note that on the back-end side to get the full list with files you will need to append new uploaded list to the old one (security reasons).

    null, Array; Default value:

    [
        {
            name: "appended_file.jpg",
            size: 5453,
            type: "image/jpg",
            file: "/path/to/file.jpg",
            url: "http://path/to/link/file2.jpg"
        },
        {
            name: "appended_file_2.jpg",
            size: 9453,
            type: "image/jpg",
            file: "path/to/file2.jpg",
            url: "http://path/to/link/file2.jpg"
        }
    ]
  • beforeRender

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

    null, Function; Default value: null
  • afterRender

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

    null, Function; Default value: null
  • beforeShow

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

    null, Function; Default value: null
  • afterShow

    A function that is fired after appending all thumbnails items.

    null, 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.

    null, Function; Default value: null
  • onSelect

    A function that is fired after selecting a file.

    null, Function; Default value: null
  • onFileCheck

    A function that is fired by checking the file. Should return a Boolean value.

    null, Function; Default value: null
  • onRemove

    A function that is fired on/before deleting a file. Should return Boolean value.

    null, Function; Default value: null
  • onEmpty

    A function that is fired when no files are selected.

    null, Function; Default value: null
  • options

    Specify your own options that you can also use as Filer Variables.

    Object

  • dialogs

    The dialogs object for alert and confirmation. You can use your own modals to do this.

    null, Obj; Default value:

    {
        alert: function(text) {
            return alert(text);
        },
        confirm: function(text, callback) {
            confirm(text) ? callback() : null;
        }
    }
  • captions

    Specify your own captions. Here you can also use Filer Variables.

    Object; Default value:

    {
        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-fileMaxSize}} MB.",
            filesSizeAll: "Files you've choosed are too large! Please upload files up to {{fi-maxSize}} MB.",
            folderUpload: "You are not allowed to upload folders."
        }
    }

You can completely manipulate your jQuery.filer input. Just get jQuery.filer toolkit with .prop(). Example:

var filerKit = $("#file_input").prop("jFiler");
filerKit.reset();
  • Name
    Usage
  • options

    jQuery.filer options.

    Object
  • listEl

    Thumbnail's list Element.

    DOM Object
  • boxEl

    Thumbnail's box Element.

    DOM Object
  • newInputEl

    New file input Element.

    DOM Object
  • inputEl

    File input Element.

    DOM Object
  • files

    Javascript FileList files.

    FileList
  • files_list

    jQuert.filer files list.

    Object
  • current_file

    Last choosed file.

    Object
  • append

    Append file function. Send an Object with file information als paramenter.

    Function; Parameter:

    {
        name: "appended_file.jpg",
        size: 5453,
        type: "image/jpg",
        file: "/path/to/file.jpg"
    }
  • retry

    Retry upload-failed file function. Send a Number with file index als paramenter.

    Function; Parameter:

    0
  • remove

    Remove file function. Send a Number with file index als paramenter.

    Function; Parameter:

    0
  • reset

    Reset function.

    Function
  • enable

    Enable input function.

    Function
  • disable

    Disable input function.

    Function

You can use this input attributes to specify the filer options directly from HTML. Example:

<input type="file" name="files[]" id="filer_input" data-jfiler-limit="3">
  • Name
    Description
  • name

    [data-jfiler-name]

    String
  • limit

    [data-jfiler-limit]

    Number
  • maxSize

    [data-jfiler-maxSize]

    Number
  • extensions

    [data-jfiler-extensions]

    Comma spliced
  • changeInput

    [data-jfiler-changeInput]

    Boolean
  • showThumbs

    [data-jfiler-showThumbs]

    Boolean
  • appendTo

    [data-jfiler-appendTo]

    String
  • theme

    [data-jfiler-theme]

    String
  • excludeName

    [data-jfiler-excludeName]

    String
  • files

    [data-jfiler-files]

    JSON String
  • options

    [data-jfiler-options]

    JSON String
  • uploadUrl

    [data-jfiler-uploadUrl]

    String
  • uploadData

    [data-jfiler-uploadData]

    JSON String

Filer Variables are very simple to use in jQUery.filer string options. To use them just write {{fi-(variable name)}}. Below is an example and are all available combinations that can be used:

filesLimit: "Only {{fi-limit}} files are allowed to be uploaded."
  • Name
    Variable
  • name

    fi-name

  • size

    fi-size

  • size2

    fi-size2

  • type

    fi-type

  • extension

    fi-extension

  • icon

    fi-icon

  • icon2

    fi-icon2

  • id

    fi-id

  • image

    fi-image

  • progressBar

    fi-progressBar

  • limit

    fi-limit

  • maxSize

    fi-maxSize

  • options

    fi-<options object key>

Support & Contribute

Support:

The original creators of this plugin, CreativeDream, moved the project to jQuery.FileUploader. As such, support for this version is no longer available.

This page and repository is currently maintained by Gerard Balaoro. The source was forked from a previous version of the original project while the documentation page was scraped from an archived version or the original one.


Contribute:

You are still free to contribute and improve this project!

For themes, you can contribute to plugin by making a Pull Request to /css/themes/ and writing a short description containing plugin templates options.

PHP File Uploader

PHP File Uploader is an easy to use, hi-performance File Upload Script which allows you to upload files to webserver. It is another script designed for jQuery.filer plugin. You can get it using the link below.


View on Github

License

Apache License 2.0

jQuery.filer is licensed under Apache License 2.0.

jQuery.filer


Simple HTML5 file uploader plugin tool for jQuery.