https://github.com/benignware/jquery-filepicker
A customizable jquery filepicker component
https://github.com/benignware/jquery-filepicker
Last synced: 11 months ago
JSON representation
A customizable jquery filepicker component
- Host: GitHub
- URL: https://github.com/benignware/jquery-filepicker
- Owner: benignware
- License: mit
- Created: 2014-02-13T15:55:52.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2014-05-28T15:10:57.000Z (about 12 years ago)
- Last Synced: 2023-08-12T18:37:44.343Z (almost 3 years ago)
- Language: JavaScript
- Size: 234 KB
- Stars: 4
- Watchers: 5
- Forks: 1
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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
-----
```html
```
```js
$(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:
```html
```
Advanced usage
--------------
### Custom style example
Create a collapsible filepicker using bootstrap-collapse.
```js
$("input[type='file']").filepicker({
style: {
ui:
'
">' +
'' +
'' +
'' +
'" ' +
'href="#<%= element.getAttribute("id") + "_panel_collapse" %>">' +
'Collapsible File Upload' +
'' +
'
' +
'' +
'" class="panel-collapse collapse">' +
'' +
'<%= preview %><%= _build(input, {className: "form-control", placeholder: element.placeholder}) %>' +
'' +
'' +
'' +
'',
thumbnail: {
wrap: ''
}
}
});
});
```
For more information on the template-structure please refer to [mugine](http://github.com/rexblack/mugine.js).
### 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
```js
$(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($('
'));
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](http://github.com/rexblack/mugine.js)-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.