Skip to content

Latest commit

 

History

History
272 lines (258 loc) · 12.4 KB

README.md

File metadata and controls

272 lines (258 loc) · 12.4 KB

jQuery.filer 1.0

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.

Demo | Documentation

Features

  • Completely change File Input
  • Upload files after choosing
  • Add more files to input without uploading them
  • Validate files(limit, size, extension)
  • Create thumbs
  • Custom icons for each type of file
  • Custom templates & themes for: input, thumbs, icons
  • Remove Choosed/Uploaded files
  • Append existing files to input for a preview
  • Image paste from clipboard
  • Custom captions
  • Custom callbacks
  • Templates inline variables, ex: {{fi-limit}}
  • All icons in a one beautiful font
  • Drag & Drop Option
  • Trigger options

Usage

Styles:

Include the jquery.filer css file in your html page.

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

Javascript:

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>

Create link elements whose href attributes will contain the path of the element you wish to open within the iLightbox.

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

The plugin is named "filer" and can be applied to any element. You will probably also specify some options while applying the plugin.

$(document).ready(function() {
	$('#input_file').filer({
        limit: null,
        maxSize: null,
        extensions: null,
        changeInput: true,
        showThumbs: true,
        appendTo: null,
        theme: "default",
        templates: {
            box: '<ul class="jFiler-item-list"></ul>',
            item: '<li class="jFiler-item">\
                        <div class="jFiler-item-container">\
                            <div class="jFiler-item-inner">\
                                <div class="jFiler-item-thumb">\
                                    <div class="jFiler-item-status"></div>\
                                    <div class="jFiler-item-info">\
                                        <span class="jFiler-item-title"><b title="{{fi-name}}">{{fi-name | limitTo: 25}}</b></span>\
                                    </div>\
                                    {{fi-image}}\
                                </div>\
                                <div class="jFiler-item-assets jFiler-row">\
                                    <ul class="list-inline pull-left">\
                                        <li>{{fi-progressBar}}</li>\
                                    </ul>\
                                    <ul class="list-inline pull-right">\
                                        <li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\
                                    </ul>\
                                </div>\
                            </div>\
                        </div>\
                    </li>',
            itemAppend: '<li class="jFiler-item">\
                        <div class="jFiler-item-container">\
                            <div class="jFiler-item-inner">\
                                <div class="jFiler-item-thumb">\
                                    <div class="jFiler-item-status"></div>\
                                    <div class="jFiler-item-info">\
                                        <span class="jFiler-item-title"><b title="{{fi-name}}">{{fi-name | limitTo: 25}}</b></span>\
                                    </div>\
                                    {{fi-image}}\
                                </div>\
                                <div class="jFiler-item-assets jFiler-row">\
                                    <ul class="list-inline pull-left">\
                                        <span class="jFiler-item-others">{{fi-icon}} {{fi-size2}}</span>\
                                    </ul>\
                                    <ul class="list-inline pull-right">\
                                        <li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\
                                    </ul>\
                                </div>\
                            </div>\
                        </div>\
                    </li>',
            progressBar: '<div class="bar"></div>',
            itemAppendToEnd: false,
            removeConfirmation: true,
            _selectors: {
                list: '.jFiler-item-list',
                item: '.jFiler-item',
                progressBar: '.bar',
                remove: '.jFiler-item-trash-action',
            }
        },
        uploadFile: {
            url: "upload.php",
            data: {},
            type: 'POST',
            enctype: 'multipart/form-data',
            beforeSend: function(){},
            success: function(data, el){
                var parent = el.find(".jFiler-jProgressBar").parent();
                el.find(".jFiler-jProgressBar").fadeOut("slow", function(){
                    $("<div class=\"jFiler-item-others text-success\"><i class=\"icon-jfi-check-circle\"></i> Success</div>").hide().appendTo(parent).fadeIn("slow");    
                });
            },
            error: function(el){
                var parent = el.find(".jFiler-jProgressBar").parent();
                el.find(".jFiler-jProgressBar").fadeOut("slow", function(){
                    $("<div class=\"jFiler-item-others text-error\"><i class=\"icon-jfi-minus-circle\"></i> Error</div>").hide().appendTo(parent).fadeIn("slow");    
                });
            },
            statusCode: {},
            onProgress: function(){},
        },
        dragDrop: {
            dragEnter: null,
            dragLeave: null,
            drop: null,
        },
        addMore: true,
        clipBoardPaste: true,
        excludeName: null,
        beforeShow: function(){return true},
        onSelect: function(){},
        afterShow: function(){},
        onRemove: function(){},
        onEmpty: function(){},
        captions: {
            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."
            }
        }
    });
});

Options & Features

Fully documentation of plugin options and features.

Options:

  • limit Maximum Limit of files. {null, Number}
  • maxSize Maximum Size of files. {null, Number(in MB's)}
  • extensions Whitelist for file extension. {null, Array}
  • changeInput Change input. {Boolean, String(DOM Element), Object(DOM Element)}
  • showThumbs Show input files as thumbnails. {Boolean}
  • appendTo Append thumbnails to element. {null, String(Dom Element)}
  • theme jQuery.filer theme. {null, String}
  • templates
    • box Thumbnails box element {null, String}
    • item Thumbnails file item element {String(use Filer Variables), Function}
    • itemAppend Thumbnails appended file item element {String(use Filer Variables), Function}
    • progressBar Thumbnails file item upload progress bar element {String}
    • itemAppendToEnd Append file item to the end of list {Boolean}
    • removeConfirmation Remove file confirmation {Boolean}
    • selectors
      • list List selector {String}
      • item Item selector {String}
      • progressBar Progress bar selector {String}
      • remove Remove button selector {String}
  • uploadFile
    • url URL to which the request is sent {String}
    • data Data to be sent to the server {Object}
    • type The type of request {String}
    • enctype Request enctype {String}
    • beforeSend A pre-request callback function {Function}
    • success A function to be called if the request succeeds {Function}
    • error A function to be called if the request fails {Function}
    • statusCode An object of numeric HTTP codes {Function}
    • onProgress A function called while uploading file with progress percentage {Function}
  • dragDrop
    • dragEnter A function that is fired when a dragged element enters the input. {Function}
    • dragLeave A function that is fired when a dragged element leaves the input. {Function}
    • drop A function that is fired when a dragged element is dropped on a valid drop target.
  • addMore Multiple file selection without instant uploading {Boolean}
  • clipBoardPaste Printscreen paste and upload {Boolean}
  • excludeName Removed files input name {null, String} Default: jfiler-items-exclude-(input file name)-(input id)
  • beforeShow A function that is fired before showing thunbnails {Function}
  • onSelect A function that is fired after selecting files {Function}
  • afterShow A function that is fired after appending all thumbnails items {Function}
  • onRemove A function that is fired after deleting a file {Function}
  • onEmpty A function that is fired when no files are selected {Function}
  • captions
    • button New Input button text {String}
    • feedback New Input field text {String}
    • feedback2 New Input after choosing files text {String}
    • drop New Input on drag text {String}
    • removeConfirmation Remove file confirmation text {String}
    • errors

Triggers:

  • $('#input_file').trigger("filer.append", {files:[]})
  • $('#input_file').trigger("filer.remove", {id:0})
  • $('#input_file').trigger("filer.reset")
  • $('#input_file').trigger("filer.getList", {files:[]})

Attributes:

  • data-jfiler-name | name of input (is used while applying plugin to a non file input)
  • data-jfiler-limit | files limit
  • data-jfiler-maxSize | files maximum size
  • data-jfiler-extensions | separeted with comma
  • data-jfiler-changeInput | {Boolean, String}
  • data-jfiler-showThumbs | show thumbnails
  • data-jfiler-appendTo | append thumbnails to selector
  • data-jfiler-theme | custom filer theme
  • data-jfiler-excludeName | exclude files input name
  • data-jfiler-files | append files, ex: "{"files":[{"name":"appended_file.jpg","size":5453,"type":"image/jpg",file:"/path/to/file/appended_file.jpg"}]}"

Filer Variables

Filer Variables are created for simple usage them in the plugin string options. To use them just write {{fi-(variable name)}}. Below are all available variables that can be used:

  • fi-name
  • fi-size
  • fi-size2
  • fi-type
  • fi-extension
  • fi-icon
  • fi-icon2
  • fi-id
  • fi-image
  • fi-progressBar
  • fi-limit
  • fi-maxSize

Contribute

Want to be part of this project? Great! All are welcome! Whether you find a bug, 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.

PHP File Uploader

PHP File Uploader is an easy to use, hi-performance File Upload Script which allows you to upload files to webserver. You can get it on the link below.
PHP Uploader

License

Licensed under MIT license.