jquery-filepicker

A customizable jquery filepicker component.

• Works out-of-the-box with bootstrap and jquery-ui without the need of any further stylesheets

Basic usage

<input data-label="Upload" type="file"/>

$(function() {
  $("input[type='file']").filepicker();
})

If you don't use any of the supported frameworks you can go with the default markup style. Therefore you may want to add the corresponding css to your application:

<link rel="stylesheet" href="jquery-filepicker/css/filepicker.default.css">

Advanced usage

Custom style example

Create a collapsible filepicker using bootstrap-collapse.

$("input[type='file']").filepicker({
  style: {
    ui: 
      '<div class="panel-group" id="<%= element.getAttribute("id") + "_panel_group" %>">' + 
        '<div class="panel panel-default">' + 
          '<div class="panel-heading">' + 
            '<h4 class="panel-title">' + 
              '<a ' + 
                'data-toggle="collapse" ' + 
                'data-parent="#<%= element.getAttribute("id") + "_panel_group" %>" ' + 
                'href="#<%= element.getAttribute("id") + "_panel_collapse" %>">' + 
                'Collapsible File Upload' + 
              '</a>' + 
            '</h4>' +
          '</div>' + 
          '<div id="<%= element.getAttribute("id") + "_panel_collapse" %>" class="panel-collapse collapse">' +
            '<div class="panel-body">' + 
              '<%= preview %><%= _build(input, {className: "form-control", placeholder: element.placeholder}) %>' + 
            '</div>' +
          '</div>' +  
        '</div>' + 
      '</div>', 
      thumbnail: {
        wrap: '<div class="thumbnail"></div>'
      }
    }
  });
});

For more information on the template-structure please refer to mugine.

Control rendering using callbacks

Although recommended way of customizing markup is by using a style-template, you can handle rendering on your own by making use of the 'renderUI'- and 'renderPreview'-callbacks

$(function() {
  $("input[type='file']").each(function() {
    
    var ui = null;
    $(this).filepicker({
      renderUI: function(element, button, input, preview) {
        if (!ui) {
          ui = document.createElement('div');
          ui.appendChild(button);
          // we don't want the input here
          //ui.appendChild(input);
          ui.appendChild(preview);
          element.parentNode.insertBefore(ui, element);
        }
        button.innerHTML = $(element).data('label');
        return false;
      }, 
      renderThumbnail: function(img, file) {
        $(img).wrap($('<div style="border: 1px solid #CCCCCC; border-radius: 4px; background: #F5F5F5; padding: 4px; margin: 4px 0;"></div>'));
        return false;
      }
    });
  });
});

Options

options.style

Type: String Default value: auto

Can be one of the following predefined styles bootstrap, jquery-ui, default or auto. You can also provide an object containing the properties ui and thumbnail as mugine-templates.

options.renderUI

Type: Function Default value: null

Override rendering ui by providing a callback function with the following arguments element, button, input, preview. Return false in order to prevent default style-rendering.

options.renderThumbnail

Type: Function Default value: null

Override thumbnail rendering by providing a callback function with the following arguments img, file. Return false in order to prevent default style-rendering.

options.resize

Type: Function Default value: null

This callback is fired when the component is resized.

options.change

Type: Function Default value: null

This callback is fired on file select. A list of all files is provided by the first argument.