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.0.5

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.

  • Change file input

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

  • Drag&Drop

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

  • Instant uploading

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

  • Add more

    Choose multiple files from different folders without instantly uploading them.

  • Delete/Retry/Cancel...

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

  • Validators

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

  • Image & extension Previews

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

  • Edit mode

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

  • API

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

  • 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-latest.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.php" 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.

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.

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!

Result:

Example 5:

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

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.

Result:

Download

We are updating our script on Github. You can download it directly from there or just to take a look at source code, issues and changelog.

jQuery.filer is free and open source and your donations will help us to develop it. You can support our project by donating with PayPal. All contributions, small or great, are very much appreciated. Thanks!

Documentation

This section gives the full documentation of this script.

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 file size in MB's.

    null, Number; Default value: null
  • extensions

    File extension's 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}
        _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}
        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 wors only by instantly uploading.

    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}
    }
  • 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
  • clipBoardPaste

    Printscreen or copied images would be uploaded by pasting. Note that this feature wors only by instantly uploading.

    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.

    null, Array; Default value:

    [
        {
            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.

    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
  • onRemove

    A function that is fired on/before deleting a file.

    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

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

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 an Number with file index als paramenter.

    Function; Parameter:

    0
  • remove

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

    Function; Parameter:

    0
  • reset

    Reset 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:

Questions or need help? You can ask it using StackOverflow site where you are most likely to get answer quickly. Make sure you add the tags "jquery" and "jquery.filer" when posting.

If you run into an issue and need to report a bug or you just have a question, please create an Issue on GitHub issues and we will investigate it.

Follow @creativedream for the latest updates.



Contribute:

Want to be part of this project? Great! All are welcome! Whether you have a great feature request or you fancy owning a task from the road map above feel free to get in touch.

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



Donate:

jQuery.filer is free and open source and your donations will help us to develop it. You can support our project by donating with PayPal. All contributions, small or great, are very much appreciated. Thanks!

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 our another script extra design for jQuery.filer plugin.

We integrated this project directly into jQuery.filer. You can get it separated on the link below.


View on Github

License

MIT Lincese

jQuery.filer is licensed under MIT.

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

jQuery.filer


Simple HTML5 file uploader plugin tool for jQuery.

Flag Counter