Skip to content

Commit 8936a91

Browse files
committed
Added localization example.
Moved generic CSS style into external file. Removed Bang from jQuery UI Widget comment header, to prevent the comment from showing up in minified source code.
1 parent 4e2f47d commit 8936a91

File tree

5 files changed

+58
-34
lines changed

5 files changed

+58
-34
lines changed

css/style.css

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
@charset 'UTF-8';
2+
/*
3+
* jQuery File Upload Plugin CSS Example 1.0
4+
* https://github.com/blueimp/jQuery-File-Upload
5+
*
6+
* Copyright 2012, Sebastian Tschan
7+
* https://blueimp.net
8+
*
9+
* Licensed under the MIT license:
10+
* http://www.opensource.org/licenses/MIT
11+
*/
12+
13+
body{
14+
padding-top: 60px;
15+
}

index.html

+9-17
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@
1818
<meta name="description" content="File Upload widget with multiple file selection, drag&amp;drop support, progress bar and preview images for jQuery. Supports cross-domain, chunked and resumable file uploads. Works with any server-side platform (Google App Engine, PHP, Python, Ruby on Rails, Java, etc.) that supports standard HTML form file uploads.">
1919
<!-- Bootstrap CSS Toolkit styles -->
2020
<link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap.min.css">
21-
<style>body{padding-top:60px;}</style>
21+
<!-- Generic page styles -->
22+
<link rel="stylesheet" href="css/style.css">
2223
<!-- Bootstrap styles for responsive website layout, supporting different screen sizes -->
2324
<link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap-responsive.min.css">
2425
<!-- Bootstrap CSS fixes for IE6 -->
@@ -125,17 +126,6 @@ <h3 class="modal-title"></h3>
125126
<a class="btn modal-download" target="_blank"><i class="icon-download"></i> Download</a>
126127
</div>
127128
</div>
128-
<!-- Error messages for the upload/download templates -->
129-
<script>
130-
var fileUploadErrors = {
131-
maxFileSize: 'File is too big',
132-
minFileSize: 'File is too small',
133-
acceptFileTypes: 'Filetype not allowed',
134-
maxNumberOfFiles: 'Max number of files exceeded',
135-
uploadedBytes: 'Uploaded bytes exceed file size',
136-
emptyResult: 'Empty file upload result'
137-
};
138-
</script>
139129
<!-- The template to display files available for upload -->
140130
<script id="template-upload" type="text/x-tmpl">
141131
{% for (var i=0, files=o.files, l=files.length, file=files[0]; i<l; file=files[++i]) { %}
@@ -144,22 +134,22 @@ <h3 class="modal-title"></h3>
144134
<td class="name">{%=file.name%}</td>
145135
<td class="size">{%=o.formatFileSize(file.size)%}</td>
146136
{% if (file.error) { %}
147-
<td class="error" colspan="2"><span class="label label-important">Error</span> {%=fileUploadErrors[file.error] || file.error%}</td>
137+
<td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
148138
{% } else if (o.files.valid && !i) { %}
149139
<td>
150140
<div class="progress progress-success progress-striped active"><div class="bar" style="width:0%;"></div></div>
151141
</td>
152142
<td class="start">{% if (!o.options.autoUpload) { %}
153143
<button class="btn btn-primary">
154-
<i class="icon-upload icon-white"></i> Start
144+
<i class="icon-upload icon-white"></i> {%=locale.fileupload.start%}
155145
</button>
156146
{% } %}</td>
157147
{% } else { %}
158148
<td colspan="2"></td>
159149
{% } %}
160150
<td class="cancel">{% if (!i) { %}
161151
<button class="btn btn-warning">
162-
<i class="icon-ban-circle icon-white"></i> Cancel
152+
<i class="icon-ban-circle icon-white"></i> {%=locale.fileupload.cancel%}
163153
</button>
164154
{% } %}</td>
165155
</tr>
@@ -173,7 +163,7 @@ <h3 class="modal-title"></h3>
173163
<td></td>
174164
<td class="name">{%=file.name%}</td>
175165
<td class="size">{%=o.formatFileSize(file.size)%}</td>
176-
<td class="error" colspan="2"><span class="label label-important">Error</span> {%=fileUploadErrors[file.error] || file.error%}</td>
166+
<td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
177167
{% } else { %}
178168
<td class="preview">{% if (file.thumbnail_url) { %}
179169
<a href="{%=file.url%}" title="{%=file.name%}" rel="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}"></a>
@@ -186,7 +176,7 @@ <h3 class="modal-title"></h3>
186176
{% } %}
187177
<td class="delete">
188178
<button class="btn btn-danger" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}">
189-
<i class="icon-trash icon-white"></i> Delete
179+
<i class="icon-trash icon-white"></i> {%=locale.fileupload.destroy%}
190180
</button>
191181
<input type="checkbox" name="delete" value="1">
192182
</td>
@@ -213,6 +203,8 @@ <h3 class="modal-title"></h3>
213203
<script src="js/jquery.fileupload-ip.js"></script>
214204
<!-- The File Upload user interface plugin -->
215205
<script src="js/jquery.fileupload-ui.js"></script>
206+
<!-- The localization script -->
207+
<script src="js/locale.js"></script>
216208
<!-- The main application script -->
217209
<script src="js/main.js"></script>
218210
<!-- The XDomainRequest Transport is included for cross-domain file deletion for IE8+ -->

js/locale.js

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
/*
2+
* jQuery File Upload Plugin Localization Example 6.5
3+
* https://github.com/blueimp/jQuery-File-Upload
4+
*
5+
* Copyright 2012, Sebastian Tschan
6+
* https://blueimp.net
7+
*
8+
* Licensed under the MIT license:
9+
* http://www.opensource.org/licenses/MIT
10+
*/
11+
12+
window.locale = {
13+
"fileupload": {
14+
"errors": {
15+
"maxFileSize": "File is too big",
16+
"minFileSize": "File is too small",
17+
"acceptFileTypes": "Filetype not allowed",
18+
"maxNumberOfFiles": "Max number of files exceeded",
19+
"uploadedBytes": "Uploaded bytes exceed file size",
20+
"emptyResult": "Empty file upload result"
21+
},
22+
"error": "Error",
23+
"start": "Start",
24+
"cancel": "Cancel",
25+
"destroy": "Delete"
26+
}
27+
};

js/vendor/jquery.ui.widget.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/*!
1+
/*
22
* jQuery UI Widget 1.8.17+amd
33
* https://github.com/blueimp/jQuery-File-Upload
44
*

test/index.html

+6-16
Original file line numberDiff line numberDiff line change
@@ -59,17 +59,6 @@ <h2 id="qunit-userAgent"></h2>
5959
<table class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>
6060
</form>
6161
</div>
62-
<!-- Error messages for the upload/download templates -->
63-
<script>
64-
var fileUploadErrors = {
65-
maxFileSize: 'File is too big',
66-
minFileSize: 'File is too small',
67-
acceptFileTypes: 'Filetype not allowed',
68-
maxNumberOfFiles: 'Max number of files exceeded',
69-
uploadedBytes: 'Uploaded bytes exceed file size',
70-
emptyResult: 'Empty file upload result'
71-
};
72-
</script>
7362
<!-- The template to display files available for upload -->
7463
<script id="template-upload" type="text/x-tmpl">
7564
{% for (var i=0, files=o.files, l=files.length, file=files[0]; i<l; file=files[++i]) { %}
@@ -78,22 +67,22 @@ <h2 id="qunit-userAgent"></h2>
7867
<td class="name">{%=file.name%}</td>
7968
<td class="size">{%=o.formatFileSize(file.size)%}</td>
8069
{% if (file.error) { %}
81-
<td class="error" colspan="2"><span class="label label-important">Error</span> {%=fileUploadErrors[file.error] || file.error%}</td>
70+
<td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
8271
{% } else if (o.files.valid && !i) { %}
8372
<td>
8473
<div class="progress progress-success progress-striped active"><div class="bar" style="width:0%;"></div></div>
8574
</td>
8675
<td class="start">{% if (!o.options.autoUpload) { %}
8776
<button class="btn btn-primary">
88-
<i class="icon-upload icon-white"></i> Start
77+
<i class="icon-upload icon-white"></i> {%=locale.fileupload.start%}
8978
</button>
9079
{% } %}</td>
9180
{% } else { %}
9281
<td colspan="2"></td>
9382
{% } %}
9483
<td class="cancel">{% if (!i) { %}
9584
<button class="btn btn-warning">
96-
<i class="icon-ban-circle icon-white"></i> Cancel
85+
<i class="icon-ban-circle icon-white"></i> {%=locale.fileupload.cancel%}
9786
</button>
9887
{% } %}</td>
9988
</tr>
@@ -107,7 +96,7 @@ <h2 id="qunit-userAgent"></h2>
10796
<td></td>
10897
<td class="name">{%=file.name%}</td>
10998
<td class="size">{%=o.formatFileSize(file.size)%}</td>
110-
<td class="error" colspan="2"><span class="label label-important">Error</span> {%=fileUploadErrors[file.error] || file.error%}</td>
99+
<td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
111100
{% } else { %}
112101
<td class="preview">{% if (file.thumbnail_url) { %}
113102
<a href="{%=file.url%}" title="{%=file.name%}" rel="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}"></a>
@@ -120,7 +109,7 @@ <h2 id="qunit-userAgent"></h2>
120109
{% } %}
121110
<td class="delete">
122111
<button class="btn btn-danger" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}">
123-
<i class="icon-trash icon-white"></i> Delete
112+
<i class="icon-trash icon-white"></i> {%=locale.fileupload.destroy%}
124113
</button>
125114
<input type="checkbox" name="delete" value="1">
126115
</td>
@@ -136,6 +125,7 @@ <h2 id="qunit-userAgent"></h2>
136125
<script src="../js/jquery.fileupload.js"></script>
137126
<script src="../js/jquery.fileupload-ip.js"></script>
138127
<script src="../js/jquery.fileupload-ui.js"></script>
128+
<script src="../js/locale.js"></script>
139129
<script src="http://code.jquery.com/qunit/git/qunit.js"></script>
140130
<script src="test.js"></script>
141131
</body>

0 commit comments

Comments
 (0)