Skip to content

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.

License

Notifications You must be signed in to change notification settings

vaporic/jquery.filer

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

About

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.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 62.9%
  • JavaScript 22.2%
  • CSS 14.9%