Skip to content

Commit 3f8fd2c

Browse files
ajaxrayajaxray
committed
Updated demo, readme to include thumb preview example. Alternate default label based on multiple file support.
1 parent 09963eb commit 3f8fd2c

6 files changed

+116
-56
lines changed

‎README.md

+37-32
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,25 @@ Bootstrap File Field
22
============================
33

44
jQuery plugin to enhance file fields with modern features and bootstrap design.
5-
Smart file selection features (e,g, restricting size and file type, showing selected file list etc.)
6-
with generic form submission process, **no ajax upload**.
5+
Smart file selection features (e,g, showing thumbs, restricting size and file type etc.)
6+
while using generic form submission, **no ajax upload**.
77

88
What it does?
99
------------------
1010

1111
* Display file upload field like Bootstrap buttons
12-
* Can restrict file types, don't allow wrong file types
12+
* Can display preview thumbs of selected images
13+
* Can restrict file types - allow only configured mime types
1314
* Can set maximum and/or minimum file size limit
14-
* Can set maximum and/or minimum total size limit (for multiple selection)
15-
* Can set maximum and/or minimum number of files can be selected (for multiple selection)
16-
* All restrictions are checked on client side using HTML5 File API
15+
* Can set maximum and/or minimum total size limit
16+
* Can set maximum and/or minimum number of files can be selected
17+
* All restrictions are checked on client side using HTML5 File/FileList/FileReader APIs
1718
* Display user friendly errors if any restriction prevented file selection
18-
* Display name/list of selected files (if no error)
19+
* Display name/list of selected files (if no error and preview is off)
1920

2021
Check [this live demo](http://ajaxray.com/demo/BootstrapFileField/demo/), it's usability + simplicity!
2122

22-
![Screenshot](/demo/bootstrap_file_field.jpg "Bootstrap File Field Screenshot")
23+
![Screenshot](/demo/bootstrap-file-field-2.jpg "Bootstrap File Field Screenshot")
2324

2425
Install
2526
------------------
@@ -42,21 +43,35 @@ Remember to include jQuery js and Bootstrap css files before plugin files. Also,
4243
How to use
4344
------------------
4445

45-
**Initiate with data attribute, no customization**
46-
`<input type="file" data-field-type="bootstrap-file-field" name="sample1">`
46+
**Initiating with data attribute, no customization**
47+
```
48+
<input type="file" data-field-type="bootstrap-file-filed" name="sample1">
49+
```
50+
51+
**Showing image preview, setting custom label, class and file types. Allows multiple.**
52+
```
53+
<input type="file" name="sample3[]"
54+
data-field-type="bootstrap-file-filed"
55+
data-label="Select Image Files"
56+
data-btn-class="btn-primary"
57+
data-file-types="image/jpeg,image/png,image/gif"
58+
data-preview="on"
59+
multiple >
60+
```
4761

48-
**Initiate with data attribute, with custom label, class and file types**
62+
**Allow PDF files only. Preview off**
4963
```
50-
<input type="file" name="sample2"
51-
data-field-type="bootstrap-file-field"
52-
data-label="Select Image Files"
53-
data-btn-class="btn-primary"
54-
data-file-types="image/jpeg,image/png">`
64+
<input type="file" name="sample4[]"
65+
data-field-type="bootstrap-file-filed"
66+
data-label="Select PDF Files"
67+
data-file-types="application/pdf"
68+
multiple >
5569
```
5670

57-
**Initiate with javascript by class/selector**
71+
**Initiating with javascript by class/selector. Select at most 2 images below 80kb each**
72+
5873
HTML :
59-
`<input type="file" class="smart-file" name="sample3[]" multiple>`
74+
`<input type="file" class="smart-file" name="sample3[]" multiple>`
6075
JavaScript :
6176
```
6277
$('.smart-file').bootstrapFileField({
@@ -65,19 +80,8 @@ $('.smart-file').bootstrapFileField({
6580
maxFileSize: 80000 // 80kb in bytes
6681
});
6782
```
68-
**Overwriting configuration using data attribute**
69-
70-
Let's assume, this field has already been initiated with previous example (as it has class <code>smart-file</code>).
71-
Now we'll add and modify some of customization options using data attributes.
72-
73-
```
74-
<input type="file" name="sample4[]" class="smart-file" multiple
75-
data-label="Select PDF Documents"
76-
data-btn-class="btn-primary"
77-
data-file-types="application/pdf">
78-
```
7983

80-
Check the `demo/index.html` file (in downloaded source) or [this live demo](http://ajaxray.com/demo/BootstrapFileField/demo/) to see all the above examples in action.
84+
Check the `demo/index.html` file (in downloaded source) or [this live demo](http://ajaxray.com/demo/BootstrapFileField/demo/) to see more examples in action (including all the above).
8185

8286
Supported Restrictions
8387
-------------------------
@@ -102,14 +106,15 @@ or data attributes to configure your file field.
102106

103107
| What to configure| JS Settings Option| Data attribute| Default|
104108
| --- | --- | --- | --- |
105-
| Button label | label | data-label | Select File|
109+
| Button label | label | data-label | Select File/Select Files |
106110
| Button class | btnClass | data-btn-class | btn-default |
111+
| Preview thumb | preview | data-preview | off |
107112
| Allowed file types by [mime type](https://www.sitepoint.com/web-foundations/mime-types-complete-list/) (comma separated values) | fileTypes | data-file-types | *Ignored* |
108113
| Maximum file size (in byte) | maxFileSize | data-max-file-size | *Ignored* |
109114
| Minimum file size (in byte) | minFileSize | data-min-file-size | *Ignored* |
110115
| Maximum total file size (M) | maxTotalSize | data-max-total-size | *Ignored* |
111116
| Maximum number of files (M) | maxNumFiles | data-max-num-files | *Ignored* |
112117
| Minimum number of files (M) | minNumFiles | data-min-num-files | *Ignored* |
113-
(M) = For multiple file selection only
118+
(M) = For multiple file selection
114119

115120
Inspired by: http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/

‎demo/bootstrap-file-field-2.jpg

113 KB
Loading

‎demo/bootstrap_file_field.jpg

-70.3 KB
Binary file not shown.

‎demo/index.html

+66-18
Original file line numberDiff line numberDiff line change
@@ -36,15 +36,16 @@ <h3 class="text-muted">Bootstrap File Filed</h3>
3636
</div>
3737

3838
<div class="col-md-12">
39-
<h3>Bootstrap File Field samples</h3>
39+
<h3>Bootstrap File Field demo</h3>
4040

4141
<p class="lead">
42-
This page has examples of various ways of using and configuring this plugin.
42+
Examples of using and configuring <i>Bootstrap File Field</i> in various ways.
4343
</p>
44-
<p class="text-info"><strong>Note:</strong> On server end, you'll get the files as generic form submission process.</p>
44+
<p class="text-info"><strong>Note:</strong> On server end, you'll receive the files with submitted form (with <code>enctype="multipart/form-data"</code>).
45+
No ajax upload is being used.</p>
4546
<hr>
4647

47-
<form role="form" enctype="application/x-www-form-urlencoded">
48+
<form role="form" enctype="multipart/form-data">
4849

4950
<!--<div class="form-group">-->
5051
<!--<label for="photo" class="col-sm-3 control-label">Upload photos</label>-->
@@ -56,30 +57,68 @@ <h3>Bootstrap File Field samples</h3>
5657
<!--<ul class="list-unstyled fileList"></ul>-->
5758
<!--</div>-->
5859
<!--</div>-->
60+
5961
<div class="form-group">
60-
<label for="sample1">Initiate with data attribute, no customization</label>
62+
<label for="sample1">Example 1: Initiating with data attribute, no customization</label>
6163
<p>
6264
<code>&lt;input type="file" data-field-type="bootstrap-file-filed" name="sample1"&gt;</code>
6365
</p>
6466
<input type="file" data-field-type="bootstrap-file-filed" name="sample1">
6567
</div>
68+
6669
<div class="form-group">
67-
<label for="sample2">Initiate with data attribute, with image thumb, custom label, button class and file types.</label>
70+
<label for="sample2">Example 2: Single Image file with preview.</label>
6871
<p>
6972
<code>&lt;input type="file" name="sample2" data-field-type="bootstrap-file-filed" <br />
73+
&nbsp;&nbsp;&nbsp;&nbsp;data-preview="on" <br />
74+
&nbsp;&nbsp;&nbsp;&nbsp;data-file-types="image/jpeg,image/png,image/gif"&gt;</code>
75+
</p>
76+
<input type="file" name="sample2"
77+
data-field-type="bootstrap-file-filed"
78+
data-file-types="image/jpeg,image/png,image/gif"
79+
data-preview="on">
80+
</div>
81+
82+
<div class="form-group">
83+
<label for="sample3">Example 3: Showing image preview, setting custom label, class and file types. Allows multiple.</label>
84+
<p>
85+
<code>&lt;input type="file" name="sample3[]" data-field-type="bootstrap-file-filed" <br />
7086
&nbsp;&nbsp;&nbsp;&nbsp;data-label="Select Image Files" <br />
7187
&nbsp;&nbsp;&nbsp;&nbsp;data-btn-class="btn-primary" <br />
72-
&nbsp;&nbsp;&nbsp;&nbsp;data-file-types="image/jpeg,image/png"&gt;</code>
88+
&nbsp;&nbsp;&nbsp;&nbsp;data-file-types="image/jpeg,image/png,image/gif" <br />
89+
&nbsp;&nbsp;&nbsp;&nbsp;data-preview="on" <br />
90+
&nbsp;&nbsp;&nbsp;&nbsp;multiple &gt;
91+
</code>
7392
</p>
74-
<input type="file" name="sample2"
93+
<input type="file" name="sample3[]"
7594
data-field-type="bootstrap-file-filed"
7695
data-label="Select Image Files"
7796
data-btn-class="btn-primary"
78-
data-file-types="image/jpeg,image/png"
79-
data-preview="off">
97+
data-file-types="image/jpeg,image/png,image/gif"
98+
data-preview="on"
99+
multiple
100+
>
80101
</div>
102+
81103
<div class="form-group">
82-
<label for="sample3">Initiate with javascript by class/selector.</label>
104+
<label for="sample4">Example 4: Allow PDF files only. Preview off.</label>
105+
<p>
106+
<code>&lt;input type="file" name="sample4[]" data-field-type="bootstrap-file-filed" <br />
107+
&nbsp;&nbsp;&nbsp;&nbsp;data-label="Select PDF Files" <br />
108+
&nbsp;&nbsp;&nbsp;&nbsp;data-file-types="application/pdf" <br />
109+
&nbsp;&nbsp;&nbsp;&nbsp;multiple &gt;
110+
</code>
111+
</p>
112+
<input type="file" name="sample4[]"
113+
data-field-type="bootstrap-file-filed"
114+
data-label="Select PDF Files"
115+
data-file-types="application/pdf"
116+
multiple
117+
>
118+
</div>
119+
120+
<div class="form-group">
121+
<label for="sample5">Example 5: Initiating with javascript by class/selector. Select at most 2 images below 80kb each.</label>
83122

84123
<p>
85124
HTML : <br />
@@ -97,20 +136,20 @@ <h3>Bootstrap File Field samples</h3>
97136
<input type="file" name="sample3[]" class="smart-file" multiple>
98137
</div>
99138
<div class="form-group">
100-
<label for="sample4">Overwriting initial (by javascript) configuration using data attribute</label>
139+
<label for="sample6">Example 6: Overwriting initial (by javascript) configuration using data attribute</label>
101140
<p>
102-
This field has already been initiated with previous field (as it has class <code>smart-file</code>).
141+
This field has already been initiated with previous example (as it has class <code>smart-file</code>).
103142
Now we'll add and modify some of customization options using data attributes.
104143
</p>
105144
<p>
106145
<code>
107-
&lt;input type="file" name="sample4[]" class="smart-file" multiple <br />
146+
&lt;input type="file" name="sample6[]" class="smart-file" multiple <br />
108147
&nbsp;&nbsp;&nbsp;&nbsp;data-label="Select PDF Documents" <br />
109148
&nbsp;&nbsp;&nbsp;&nbsp;data-btn-class="btn-primary" <br />
110149
&nbsp;&nbsp;&nbsp;&nbsp;data-file-types="application/pdf"&gt;
111150
</code>
112151
</p>
113-
<input type="file" name="sample4[]" class="smart-file" multiple
152+
<input type="file" name="sample6[]" class="smart-file" multiple
114153
data-label="Select PDF Documents"
115154
data-btn-class="btn-primary"
116155
data-file-types="application/pdf">
@@ -142,15 +181,18 @@ <h4>Configuration Options</h4>
142181
<table class="table table-bordered">
143182
<tr>
144183
<th>What to configure</th>
145-
<th>JS Settings Option</th>
184+
<th>JS Settings key</th>
146185
<th>Data attribute</th>
147186
<th>Default</th>
148187
</tr>
149188
<tr>
150189
<td>Button label</td>
151190
<td>label</td>
152191
<td>data-label</td>
153-
<td>Select File</td>
192+
<td>
193+
Select File <br />
194+
Select Files <sup>M</sup>
195+
</td>
154196
</tr>
155197
<tr>
156198
<td>Button class</td>
@@ -167,6 +209,12 @@ <h4>Configuration Options</h4>
167209
<td>data-file-types</td>
168210
<td><em>Ignored</em></td>
169211
</tr>
212+
<tr>
213+
<td>Preview thumb</td>
214+
<td>preview</td>
215+
<td>data-preview</td>
216+
<td>off</td>
217+
</tr>
170218
<tr>
171219
<td>Maximum file size (in byte)</td>
172220
<td>maxFileSize</td>
@@ -198,7 +246,7 @@ <h4>Configuration Options</h4>
198246
<td><em>Ignored</em></td>
199247
</tr>
200248
</table>
201-
<p><sup>M</sup> = For multiple file selection only</p>
249+
<p><sup>M</sup> = For multiple file <selection></selection></p>
202250
</div>
203251
</div>
204252

‎src/css/bootstrap_file_field.css

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/*! BootstrapFileField v1.0.0 | (c) ajaxray.com | MIT License
1+
/*! BootstrapFileField v1.2.0 | (c) ajaxray.com | MIT License
22
* https://github.com/ajaxray/bootstrap-file-field
33
**/
44

@@ -31,6 +31,10 @@ ul.fileList.thumbs li {
3131
position: relative;
3232
margin: 10px 10px 10px 0;
3333
}
34+
ul.fileList.thumbs li img {
35+
height: 100px;
36+
}
37+
3438
ul.fileList.thumbs li img.icon {
3539
background-color: #ddd;
3640
}

‎src/js/bootstrap_file_field.js

+8-5
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/*! BootstrapFileField v1.0.0 | (c) ajaxray.com | MIT License
1+
/*! BootstrapFileField v1.2.0 | (c) ajaxray.com | MIT License
22
* https://github.com/ajaxray/bootstrap-file-field
33
**/
44
(function( $ ) {
@@ -9,7 +9,7 @@
99
// Presentation
1010
label: "Select File",
1111
btnClass: 'btn-default',
12-
preview: 'on',
12+
preview: 'off',
1313

1414
// Restrictions
1515
fileTypes: false,
@@ -31,13 +31,12 @@
3131

3232
reader.addEventListener("load", function () {
3333
var image = new Image();
34-
image.height = 100;
3534
image.title = file.name;
3635

3736
if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) {
3837
image.src = this.result;
3938
} else {
40-
image.className = 'icon';
39+
image.className += 'icon';
4140
image.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAGzklEQVR4Xu2aTWgcZRjHn/edjV6UWj8QxSoW/MrupsaeNNmJtFrwkHS2HxQE0UsF0UMVelGQevAi1iJCTmIvflQKZjcVRdCaTlLEQ2ubzIoU1IMfiBqLvYjb5H1lSjdOYiOZdN5nn5397zXvPv//8///dnZ2iCK8ujoB1dXbY3kCAF0OAQAAAF2eQJevjysAAOjyBLp8fVwBAABbAqqvEmyaU3aHVvZ+sno9EV1FlP9fIobMr4podyMcH2dLe4VCLFeAkh9sIWP3k1alFfrK3TFD5rxWald0rD4maTnHAOzTZf/Ufku0R9LS7fIiEQKnABSHgoPK0hPtClyirjQInAFQrgTPWEVvJEswhuaUR28rUu/aZuFE44vDZ4nISiwqC08lP7jkbpIgcALA3Zur1xXO2++J6OpWkIbMd8p42xpTY6ezCLcTZiwHQOxdCgROAChVqntJ2VcWSrJmlpTqj8L6D51QXFYelwJwoXTSPYkPRdtvDJ0AUBwMQqWpkghyTxTWXs8q2E6Z898rgNpuaP6QJAicANDrB39oorWtorTW66YnPvixU4rLyudSAKKwpkp+dZskCJwAUPIDk3zAE4U1neebveWAuRQA8dkLEBj7vtZUaPfXgSsAFt39xuRn9anqpDn/90GQAoGTYpYjv5PKy8JryQ/OJX8JNfX8DWcmjvzemi0BAgCQRdPLzCgPBCetR/2tPytL1ZnJWi15vFgJtltLh9r1dQAAXALgBwcWPQa3ZiqaHPeX3g+1EwIA4BCAvsq2+4wyJxZJGNofTdX2LoWgt7J1B1n1HveVAAA4BCAeXa5U61bZkcUy9jiRfq3HFia/mjwc3xNcuGluBwQAwDEAdw2M3OwpfVJrunG1UvETREW0w8X/EwCA1baS4n3FweoGS/aTy4GAjP0lmqrflEJ2RUcBwIpiuvxD8ZWg4OlRRbR1tdNcPE8BAKttY5Xv6/VH+j3lPWbI+srSHRefE6yoBwCwytA79W0cD9RWRF7aADmMp/XUiec5cgQAgskAAILL4bAGADhSFqwBAASXw2ENAHCkLFgDAAguh8MaAOBIWbAGABBcDoc1AMCRsmANACC4HA5rAIAjZcEaAEBwORzWAABHyoI1AIDgcjisAQCOlAVrAADB5XBYAwAcKQvWAACCy+GwBgA4UhasAQAEl8NhDQBwpCxYAwAILofDGgDgSFmwBgAQXA6HNQDAkbJgDQAguBwOawCAI2XBGgBAcDkc1gAAR8qCNQCA4HI4rAEAjpQFawAAweVwWAMAHCkL1gAAgsvhsAYAOFIWrAEABJfDYQ0AcKQsWAMACC6HwxoA4EhZsAYAEFwOhzUAwJGyYA0AILgcDmsAgCNlwRoAQHA5HNYAAEfKgjUAgOByOKwBAI6UBWsAAMHlcFgDABwpC9YAAILL4bAGADhSFqwBAASXw2ENAHCkLFgDAAguh8MaAOBIWbAGABBcDoc1AMCRsmANACC4HA5rAIAjZcEaAEBwORzWAABHyoI1AIDgcjisAQCOlAVrAADB5XBYAwAcKQvWAACCy+GwBgA4UhasAQAEl8NhDQBwpCxYAwAILofDGgDgSFmwBgAQXA6HNQDAkbJgDQAguBwOawCAI2XBGgBAcDkc1gAAR8qCNToZAENEqpVtFNY0EVnBWUu0pkp+EOfYetmLOWbqdaGkLKf2DgZntaZrWjO9wtwtp49++FOWGnmfdeeDw9dfYbzfEnuei8Lamqz3dgJAyQ+OE9EDC+hau7sxWX8za/N5nlceCh6xlj5K7HgqCmv9We/sBIDyUPVFa+1LCwCQOUOzV5YbjcPNrBfI67ziYPCO0vRoYr/RKKw9nfW+TgAoDg7fasn7VmsquF4g60AkzCsPBhsNmS+V1t6/HyK1uRGOHc3anxMAYpOlysgoKf3UEsOjdrbnWVwJlq+xzx++3Vj9OSl120L5hmYaU7UNLm6knQGw8aGda/5q/n1Sk16fXNfGXwfKe9VT6uPpib6fifYl73SzBrxD5u3T92yaXufNze80Rr2QvIGOF1DaPjwzUf/UxTLOAIjN9g4MF7VHIZF3rQvz3TBTKXVg5tjYc652dQpACwLy1PjSK4GrhfI01xC99XV4726XV0nnAMSFxF8HzWbz5XmyT2rSPXkqycUu1pg/yVPPN47VR13MT85kAaAlGP860Mp73JLZQsr2Enlrk08MXS8reL4lmj9LVIiIzJG5Hn3wm8/GZjn8sgLAsRA00iUAANLllbvTACB3laZbCACkyyt3pwFA7ipNtxAASJdX7k4DgNxVmm4hAJAur9ydBgC5qzTdQgAgXV65O/0PhVVdvXl3gQEAAAAASUVORK5CYII=';
4241
}
4342
callback(image);
@@ -75,10 +74,14 @@
7574
};
7675

7776
this.filter( ":file" ).each(function() {
78-
var btnClass = $(this).data('btn-class') ||settings.btnClass;
77+
var btnClass = $(this).data('btn-class') || settings.btnClass;
7978
var label = $(this).data('label') || settings.label;
8079
var preview = $(this).data('preview') || settings.preview;
8180

81+
if (label == settings.label && $(this).attr('multiple')) {
82+
label += 's';
83+
}
84+
8285
// Restrictions
8386
var fileTypes = $(this).data('file-types') || settings.fileTypes;
8487
var maxFileSize = $(this).data('max-file-size') || settings.maxFileSize;

0 commit comments

Comments
 (0)