Brightree Style Guides

File Uploader Documentation

A third-party plugin that provides file uploading capabilities. Examples and documentation for the jQuery Filer can be found here: jQuery.filer

Example 1

Upload files with Drag & Drop functionality.

<input type="file" name="files[]" id="filer_example1" multiple="multiple" /> //Javascript $("#filer_example1").filer({ limit: null, maxSize: null, extensions: null, changeInput: '<div class="jFiler-input-dragDrop"><div class="jFiler-input-inner"><div class="jFiler-input-icon"><i class="icon-jfi-cloud-up-o"></i></div><div class="jFiler-input-text"><h3>Drag & Drop files here</h3> <span style="display:inline-block; margin: 15px 0">or</span></div><a class="jFiler-input-choose-btn btn btn-secondary">Browse Files</a></div></div>', showThumbs: true, theme: "dragdropbox", templates: { box: '<ul class="jFiler-items-list jFiler-items-grid"></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=""></b></span>\ <span class="jFiler-item-others"></span>\ </div>\ \ </div>\ <div class="jFiler-item-assets jFiler-row">\ <ul class="list-inline pull-left">\ <li></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=""></b></span>\ <span class="jFiler-item-others"></span>\ </div>\ \ </div>\ <div class="jFiler-item-assets jFiler-row">\ <ul class="list-inline pull-left">\ <li><span class="jFiler-item-others"></span></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>', progressBar: '<div class="bar"></div>', itemAppendToEnd: false, removeConfirmation: true, _selectors: { list: '.jFiler-items-list', item: '.jFiler-item', progressBar: '.bar', remove: '.jFiler-item-trash-action' } }, dragDrop: { dragEnter: null, dragLeave: null, drop: null, }, uploadFile: { url: "assets/plugins/jquery.filer/php/upload.php", data: null, 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=\"fa fa-plus\"></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=\"fa fa-minus\"></i> Error</div>").hide().appendTo(parent).fadeIn("slow"); }); }, statusCode: null, onProgress: null, onComplete: null }, files: [ { name: "1.jpg", size: 145, type: "image/jpg", file: "assets/images/sample-image-1.jpg" }, { name: "2.jpg", size: 145, type: "image/jpg", file: "assets/images/sample-image-2.jpg" } ], addMore: false, clipBoardPaste: true, excludeName: null, beforeRender: null, afterRender: null, beforeShow: null, beforeSelect: null, onSelect: null, afterShow: null, onRemove: function(itemEl, file, id, listEl, boxEl, newInputEl, inputEl){ var file = file.name; $.post('assets/plugins/jquery.filer/php/remove_file.php', {file: file}); }, onEmpty: null, options: null, 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 files are allowed to be uploaded.", filesType: "Only Images are allowed to be uploaded.", filesSize: " is too large! Please upload file up to MB.", filesSizeAll: "Files you've choosed are too large! Please upload files up to MB." } } }); });

Example 2

Maximum 3 files. All files together must total no more than 3MB. File types must match extensions in the array: ['jpg', 'png', 'gif'].

<input type="file" name="files[]" id="filer_example2" multiple="multiple" /> // Javascript $('#filer_example2').filer({ limit: 3, maxSize: 3, extensions: ['jpg', 'jpeg', 'png', 'gif', 'psd'], changeInput: true, showThumbs: true, addMore: true });

Multiple File Uploader

File Uploader Documentation

Example 1

Example 2