Skip to content

Commit eb7a9a1

Browse files
noirbizarrenoirbizarre
committed
Initialimplementation: just style the file input.
1 parent b4b047f commit eb7a9a1

8 files changed

+193
-0
lines changed

‎demo/css/bootstrap-responsive.min.css

+9
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/css/bootstrap.min.css

+9
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/demo.html

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<!doctype html>
2+
<html class="no-js" lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6+
7+
<title>Twitter Bootstrap Uploader</title>
8+
<meta name="description" content="Twitter Bootstrap Uploader Demo">
9+
<meta name="author" content="Axel H.">
10+
11+
<meta name="viewport" content="width=device-width">
12+
13+
14+
<link rel="stylesheet" href="css/bootstrap.min.css">
15+
16+
<script src="js/jquery-1.7.2.min.js"></script>
17+
<script src="js/bootstrap.min.js"></script>
18+
<script src="../js/bootstrap-uploader.js"></script>
19+
</head>
20+
<body>
21+
22+
<div class="container">
23+
<section>
24+
<div class="page-header">
25+
"Uploader" <small>Enfanced file upload</small>
26+
</div>
27+
<h2>Theming</h2>
28+
<div class="row">
29+
<div class="span6">
30+
<h3>Simple theme</h3>
31+
<p>Style file input</p>
32+
</div>
33+
<div class="span6">
34+
<h3>Exemple</h3>
35+
<div>
36+
<input type="file" />
37+
</div>
38+
<pre>&lt;input type="file" /&gt;</pre>
39+
<div>
40+
<input type="file" data-icon="upload" />
41+
</div>
42+
<pre>&lt;input type="file" data-icon="upload" /&gt;</pre>
43+
<div>
44+
<input type="file" data-button-text="Upload" />
45+
</div>
46+
<pre>&lt;input type="file" data-button-text="Upload" /&gt;</pre>
47+
<div>
48+
<input type="file" data-input-text="Default text..." />
49+
</div>
50+
<pre>&lt;input type="file" data-input-text="Default text..." /&gt;</pre>
51+
</div>
52+
</div>
53+
</section>
54+
<section>
55+
<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>
56+
<div class="modal hide" id="myModal">
57+
<div class="modal-header">
58+
<button class="close" data-dismiss="modal">×</button>
59+
<h3>Modal header</h3>
60+
</div>
61+
<div class="modal-body">
62+
<input class="uploader" type="file" ></input>
63+
</div>
64+
<div class="modal-footer">
65+
<a href="#" class="btn">Close</a>
66+
<a href="#" class="btn btn-primary">Save changes</a>
67+
</div>
68+
</div>
69+
</section>
70+
</div>
71+
72+
</body>
73+
<script>
74+
$(function(){
75+
76+
});
77+
</script>
78+
</html>

‎demo/img/glyphicons-halflings-white.png

8.57 KB
Loading

‎demo/img/glyphicons-halflings.png

13.5 KB
Loading

‎demo/js/bootstrap.min.js

+6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/js/jquery-1.7.2.min.js

+4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js/bootstrap-uploader.js

+87
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
(function( $ ){
2+
3+
"use strict";
4+
5+
var Uploader = function(el, options) {
6+
this.$el = $(el);
7+
this.options = $.extend({}, $.fn.uploader.defaults, options);
8+
};
9+
10+
Uploader.prototype = {
11+
12+
constructor: Uploader,
13+
14+
applyTheme: function() {
15+
if (!this.$overlay) {
16+
this.$el.width(0).height(0).css({
17+
'display': 'inline',
18+
'line-height': 0,
19+
'margin': 0,
20+
'padding': 0
21+
});
22+
23+
this.$overlay = $('<div class="input-prepend"/>').insertAfter(this.$el);
24+
25+
this.$button = $('<button class="btn"></button>').appendTo(this.$overlay);
26+
this.$button.append('<i class="icon-'+this.options.icon+'"></i>');
27+
if (this.options.buttonText.length) {
28+
this.$button.append(' ' + this.options.buttonText);
29+
}
30+
//this.$overlay.append('<button class="btn"><i class="icon-upload"></i></button>');
31+
this.$input = $('<input type="text"/>').appendTo(this.$overlay);
32+
this.$input.val(this.options.inputText);
33+
34+
this.$overlay.on('click', $.proxy(this._on_click, this));
35+
this.$el.on('change', $.proxy(this._on_change, this));
36+
37+
this.$el.trigger('themed');
38+
}
39+
this.$overlay.offset(this.$el.offset());
40+
},
41+
42+
_on_click: function(e) {
43+
this.$el.click();
44+
},
45+
46+
_on_change: function(e) {
47+
var filename = this.$el.val().replace(/^(.*)(\\|\/)/g, '');
48+
this.$overlay.find('input').val(filename);
49+
}
50+
51+
};
52+
53+
$.fn.uploader = function(option) {
54+
return this.each(function(){
55+
var $this = $(this)
56+
, data = $this.data('uploader')
57+
, options = typeof option == 'object' && option;
58+
if (!data) $this.data('uploader', (data = new Uploader(this, options)));
59+
data.applyTheme();
60+
});
61+
};
62+
63+
$.fn.uploader.defaults = {
64+
inputText: 'Choose a file...',
65+
buttonText: '',
66+
icon: 'file'
67+
};
68+
69+
$.fn.uploader.Constructor = Uploader;
70+
71+
$(function() {
72+
$(':file').each(function(i, el) {
73+
var $this = $(this), options = {};
74+
if ($this.data('button-text')) {
75+
options.buttonText = $this.data('button-text');
76+
}
77+
if ($this.data('input-text')) {
78+
options.inputText = $this.data('input-text');
79+
}
80+
if ($this.data('icon')) {
81+
options.icon = $this.data('icon');
82+
}
83+
$this.uploader(options);
84+
});
85+
});
86+
87+
}( jQuery ));

0 commit comments

Comments
 (0)