Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 995f0ef

Browse filesBrowse files
blueimpblueimp
committed
Added an updated jQuery UI example implementation.
1 parent 2490284 commit 995f0ef
Copy full SHA for 995f0ef

11 files changed

+495-24Lines changed: 495 additions & 24 deletions
Expand file treeCollapse file tree
Open diff view settings
Collapse file

‎README.md‎

Copy file name to clipboardExpand all lines: README.md
+22-9Lines changed: 22 additions & 9 deletions
  • Display the source diff
  • Display the rich diff
Original file line numberDiff line numberDiff line change
@@ -57,24 +57,37 @@ Please read the [issue guidelines](https://github.com/blueimp/jQuery-File-Upload
5757
Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.
5858

5959
## Requirements
60+
61+
### Mandatory requirements
6062
* [jQuery](http://jquery.com/) v. 1.6+
6163
* [jQuery UI widget factory](http://api.jqueryui.com/jQuery.widget/) v. 1.9+ (included)
6264
* [jQuery Iframe Transport plugin](https://github.com/blueimp/jQuery-File-Upload/blob/master/js/jquery.iframe-transport.js) (included)
63-
* [JavaScript Templates engine](https://github.com/blueimp/JavaScript-Templates) v. 2.2.1+ (optional)
64-
* [JavaScript Load Image function](https://github.com/blueimp/JavaScript-Load-Image) v. 1.7.3+ (optional)
65-
* [JavaScript Canvas to Blob function](https://github.com/blueimp/JavaScript-Canvas-to-Blob) v. 2.0.6+ (optional)
66-
* [Bootstrap CSS Toolkit](https://github.com/twitter/bootstrap/) v. 2.3+ (optional)
6765

68-
The jQuery UI widget factory is a requirement for the basic File Upload plugin, but very lightweight without any other dependencies.
69-
The jQuery Iframe Transport is required for [browsers without XHR file upload support](https://github.com/blueimp/jQuery-File-Upload/wiki/Browser-support).
70-
The UI version of the File Upload plugin also requires the JavaScript Templates engine as well as the JavaScript Load Image and JavaScript Canvas to Blob functions (for the image previews and resizing functionality). These dependencies are marked as optional, as the basic File Upload plugin can be used without them and the UI version of the plugin can be extended to override these dependencies with alternative solutions.
66+
The jQuery UI widget factory is a requirement for the basic File Upload plugin, but very lightweight without any other dependencies from the jQuery UI suite.
67+
68+
The jQuery Iframe Transport is required for [browsers without XHR file upload support](https://github.com/blueimp/jQuery-File-Upload/wiki/Browser-support).
69+
70+
### Optional requirements
71+
* [JavaScript Templates engine](https://github.com/blueimp/JavaScript-Templates) v. 2.3.0+
72+
* [JavaScript Load Image library](https://github.com/blueimp/JavaScript-Load-Image) v. 1.9.1+
73+
* [JavaScript Canvas to Blob polyfill](https://github.com/blueimp/JavaScript-Canvas-to-Blob) v. 2.0.7+
74+
* [blueimp Gallery](https://github.com/blueimp/Gallery) v. 2.7.1+
75+
* [Bootstrap CSS Toolkit](https://github.com/twitter/bootstrap/) v. 2.3
7176

72-
The User Interface is built with Twitter's [Bootstrap](https://github.com/twitter/bootstrap/) Toolkit. This enables a CSS based, responsive layout and fancy transition effects on modern browsers. The demo also includes the [blueimp Gallery](https://github.com/blueimp/Gallery). Both of these components are optional and not required.
77+
The JavaScript Templates engine is used to render the selected and uploaded files for the Basic Plus UI and jQuery UI versions.
7378

74-
The repository also includes the [jQuery XDomainRequest Transport plugin](https://github.com/blueimp/jQuery-File-Upload/blob/master/js/cors/jquery.xdr-transport.js), which enables Cross-domain AJAX requests (GET and POST only) in Microsoft Internet Explorer >= 8. However, the XDomainRequest object doesn't support file uploads and the plugin is only used by the [Demo](http://blueimp.github.io/jQuery-File-Upload/) for Cross-domain requests to delete uploaded files from the demo file upload service.
79+
The JavaScript Load Image library and JavaScript Canvas to Blob polyfill are required for the image previews and resizing functionality.
7580

81+
The blueimp Gallery is used to display the uploaded images in a lightbox.
82+
83+
The user interface of all versions except the jQuery UI version is built with Twitter's [Bootstrap](https://github.com/twitter/bootstrap/) Toolkit.
84+
85+
### Cross-domain requirements
7686
[Cross-domain File Uploads](https://github.com/blueimp/jQuery-File-Upload/wiki/Cross-domain-uploads) using the [Iframe Transport plugin](https://github.com/blueimp/jQuery-File-Upload/blob/master/js/jquery.iframe-transport.js) require a redirect back to the origin server to retrieve the upload results. The [example implementation](https://github.com/blueimp/jQuery-File-Upload/blob/master/js/main.js) makes use of [result.html](https://github.com/blueimp/jQuery-File-Upload/blob/master/cors/result.html) as a static redirect page for the origin server.
7787

88+
The repository also includes the [jQuery XDomainRequest Transport plugin](https://github.com/blueimp/jQuery-File-Upload/blob/master/js/cors/jquery.xdr-transport.js), which enables limited cross-domain AJAX requests in Microsoft Internet Explorer 8 and 9 (IE 10 supports cross-domain XHR requests).
89+
The XDomainRequest object allows GET and POST requests only and doesn't support file uploads. It is used on the [Demo](http://blueimp.github.io/jQuery-File-Upload/) to delete uploaded files from the cross-domain demo file upload service.
90+
7891
## Browsers
7992

8093
### Desktop browsers
Collapse file

‎angularjs.html‎

Copy file name to clipboardExpand all lines: angularjs.html
+2-1Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@ <h2 class="lead">AngularJS version</h2>
7070
<li><a href="basic-plus.html">Basic Plus</a></li>
7171
<li><a href="index.html">Basic Plus UI</a></li>
7272
<li class="active"><a href="angularjs.html">AngularJS</a></li>
73+
<li><a href="jquery-ui.html">jQuery UI</a></li>
7374
</ul>
7475
<blockquote>
7576
<p>File Upload widget with multiple file selection, drag&amp;drop support, progress bars, validation and preview images, audio and video for AngularJS.<br>
@@ -156,7 +157,7 @@ <h3>Demo Notes</h3>
156157
<li>The maximum file size for uploads in this demo is <strong>5 MB</strong> (default file size is unlimited).</li>
157158
<li>Only image files (<strong>JPG, GIF, PNG</strong>) are allowed in this demo (by default there is no file type restriction).</li>
158159
<li>Uploaded files will be deleted automatically after <strong>5 minutes</strong> (demo setting).</li>
159-
<li>You can <strong>drag &amp; drop</strong> files from your desktop on this webpage with Google Chrome, Mozilla Firefox and Apple Safari.</li>
160+
<li>You can <strong>drag &amp; drop</strong> files from your desktop on this webpage (see <a href="https://github.com/blueimp/jQuery-File-Upload/wiki/Browser-support">Browser support</a>).</li>
160161
<li>Please refer to the <a href="https://github.com/blueimp/jQuery-File-Upload">project website</a> and <a href="https://github.com/blueimp/jQuery-File-Upload/wiki">documentation</a> for more information.</li>
161162
<li>Built with Twitter's <a href="http://twitter.github.com/bootstrap/">Bootstrap</a> toolkit and Icons from <a href="http://glyphicons.com/">Glyphicons</a>.</li>
162163
</ul>
Collapse file

‎basic-plus.html‎

Copy file name to clipboardExpand all lines: basic-plus.html
+2-1Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ <h2 class="lead">Basic Plus version</h2>
6262
<li class="active"><a href="basic-plus.html">Basic Plus</a></li>
6363
<li><a href="index.html">Basic Plus UI</a></li>
6464
<li><a href="angularjs.html">AngularJS</a></li>
65+
<li><a href="jquery-ui.html">jQuery UI</a></li>
6566
</ul>
6667
<blockquote>
6768
<p>File Upload widget with multiple file selection, drag&amp;drop support, progress bar, validation and preview images, audio and video for jQuery.<br>
@@ -91,7 +92,7 @@ <h3>Demo Notes</h3>
9192
<li>The maximum file size for uploads in this demo is <strong>5 MB</strong> (default file size is unlimited).</li>
9293
<li>Only image files (<strong>JPG, GIF, PNG</strong>) are allowed in this demo (by default there is no file type restriction).</li>
9394
<li>Uploaded files will be deleted automatically after <strong>5 minutes</strong> (demo setting).</li>
94-
<li>You can <strong>drag &amp; drop</strong> files from your desktop on this webpage with Google Chrome, Mozilla Firefox and Apple Safari.</li>
95+
<li>You can <strong>drag &amp; drop</strong> files from your desktop on this webpage (see <a href="https://github.com/blueimp/jQuery-File-Upload/wiki/Browser-support">Browser support</a>).</li>
9596
<li>Please refer to the <a href="https://github.com/blueimp/jQuery-File-Upload">project website</a> and <a href="https://github.com/blueimp/jQuery-File-Upload/wiki">documentation</a> for more information.</li>
9697
<li>Built with Twitter's <a href="http://twitter.github.com/bootstrap/">Bootstrap</a> toolkit and Icons from <a href="http://glyphicons.com/">Glyphicons</a>.</li>
9798
</ul>
Collapse file

‎basic.html‎

Copy file name to clipboardExpand all lines: basic.html
+2-1Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ <h2 class="lead">Basic version</h2>
6262
<li><a href="basic-plus.html">Basic Plus</a></li>
6363
<li><a href="index.html">Basic Plus UI</a></li>
6464
<li><a href="angularjs.html">AngularJS</a></li>
65+
<li><a href="jquery-ui.html">jQuery UI</a></li>
6566
</ul>
6667
<blockquote>
6768
<p>File Upload widget with multiple file selection, drag&amp;drop support and progress bar for jQuery.<br>
@@ -91,7 +92,7 @@ <h3>Demo Notes</h3>
9192
<li>The maximum file size for uploads in this demo is <strong>5 MB</strong> (default file size is unlimited).</li>
9293
<li>Only image files (<strong>JPG, GIF, PNG</strong>) are allowed in this demo (by default there is no file type restriction).</li>
9394
<li>Uploaded files will be deleted automatically after <strong>5 minutes</strong> (demo setting).</li>
94-
<li>You can <strong>drag &amp; drop</strong> files from your desktop on this webpage with Google Chrome, Mozilla Firefox and Apple Safari.</li>
95+
<li>You can <strong>drag &amp; drop</strong> files from your desktop on this webpage (see <a href="https://github.com/blueimp/jQuery-File-Upload/wiki/Browser-support">Browser support</a>).</li>
9596
<li>Please refer to the <a href="https://github.com/blueimp/jQuery-File-Upload">project website</a> and <a href="https://github.com/blueimp/jQuery-File-Upload/wiki">documentation</a> for more information.</li>
9697
<li>Built with Twitter's <a href="http://twitter.github.com/bootstrap/">Bootstrap</a> toolkit and Icons from <a href="http://glyphicons.com/">Glyphicons</a>.</li>
9798
</ul>
Collapse file

‎blueimp-file-upload.jquery.json‎

Copy file name to clipboardExpand all lines: blueimp-file-upload.jquery.json
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "blueimp-file-upload",
3-
"version": "8.6.1",
3+
"version": "8.7.0",
44
"title": "jQuery File Upload",
55
"author": {
66
"name": "Sebastian Tschan",
Collapse file

‎bower.json‎

Copy file name to clipboardExpand all lines: bower.json
+4-4Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "blueimp-file-upload",
3-
"version": "8.6.1",
3+
"version": "8.7.0",
44
"title": "jQuery File Upload",
55
"description": "File Upload widget with multiple file selection, drag&amp;drop support, progress bar, validation and preview images, audio and video 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.",
66
"keywords": [
@@ -48,9 +48,9 @@
4848
],
4949
"dependencies": {
5050
"jquery": ">=1.6",
51-
"blueimp-tmpl": ">=2.2.1",
52-
"blueimp-load-image": ">=1.7.3",
53-
"blueimp-canvas-to-blob": ">=2.0.6"
51+
"blueimp-tmpl": ">=2.3.0",
52+
"blueimp-load-image": ">=1.9.1",
53+
"blueimp-canvas-to-blob": ">=2.0.7"
5454
},
5555
"main": [
5656
"js/vendor/jquery.ui.widget.js",
Collapse file

‎css/demo.css‎

Copy file name to clipboard
+67Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
@charset "UTF-8";
2+
/*
3+
* jQuery File Upload Demo CSS 1.0
4+
* https://github.com/blueimp/jQuery-File-Upload
5+
*
6+
* Copyright 2013, 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+
max-width: 750px;
15+
margin: 0 auto;
16+
padding: 1em;
17+
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;
18+
font-size: 1em;
19+
line-height: 1.4em;
20+
background: #222;
21+
color: #fff;
22+
-webkit-text-size-adjust: 100%;
23+
-ms-text-size-adjust: 100%;
24+
}
25+
a {
26+
color: orange;
27+
text-decoration: none;
28+
}
29+
img {
30+
border: 0;
31+
vertical-align: middle;
32+
}
33+
h1 {
34+
line-height: 1em;
35+
}
36+
blockquote {
37+
padding: 0 0 0 15px;
38+
margin: 0 0 20px;
39+
border-left: 5px solid #eee;
40+
}
41+
table {
42+
width: 100%;
43+
margin: 10px 0;
44+
}
45+
46+
.fileupload-progress {
47+
margin: 10px 0;
48+
}
49+
.fileupload-progress .progress-extended {
50+
margin-top: 5px;
51+
}
52+
.error {
53+
color: red;
54+
}
55+
56+
@media (min-width: 481px) {
57+
.navigation {
58+
list-style: none;
59+
padding: 0;
60+
}
61+
.navigation li {
62+
display: inline-block;
63+
}
64+
.navigation li:not(:first-child):before {
65+
content: '| ';
66+
}
67+
}
Collapse file

‎index.html‎

Copy file name to clipboardExpand all lines: index.html
+4-3Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@ <h2 class="lead">Basic Plus UI version</h2>
7070
<li><a href="basic-plus.html">Basic Plus</a></li>
7171
<li class="active"><a href="index.html">Basic Plus UI</a></li>
7272
<li><a href="angularjs.html">AngularJS</a></li>
73+
<li><a href="jquery-ui.html">jQuery UI</a></li>
7374
</ul>
7475
<blockquote>
7576
<p>File Upload widget with multiple file selection, drag&amp;drop support, progress bars, validation and preview images, audio and video for jQuery.<br>
@@ -126,7 +127,7 @@ <h3>Demo Notes</h3>
126127
<li>The maximum file size for uploads in this demo is <strong>5 MB</strong> (default file size is unlimited).</li>
127128
<li>Only image files (<strong>JPG, GIF, PNG</strong>) are allowed in this demo (by default there is no file type restriction).</li>
128129
<li>Uploaded files will be deleted automatically after <strong>5 minutes</strong> (demo setting).</li>
129-
<li>You can <strong>drag &amp; drop</strong> files from your desktop on this webpage with Google Chrome, Mozilla Firefox and Apple Safari.</li>
130+
<li>You can <strong>drag &amp; drop</strong> files from your desktop on this webpage (see <a href="https://github.com/blueimp/jQuery-File-Upload/wiki/Browser-support">Browser support</a>).</li>
130131
<li>Please refer to the <a href="https://github.com/blueimp/jQuery-File-Upload">project website</a> and <a href="https://github.com/blueimp/jQuery-File-Upload/wiki">documentation</a> for more information.</li>
131132
<li>Built with Twitter's <a href="http://twitter.github.com/bootstrap/">Bootstrap</a> toolkit and Icons from <a href="http://glyphicons.com/">Glyphicons</a>.</li>
132133
</ul>
@@ -241,8 +242,8 @@ <h3 class="title"></h3>
241242
<script src="js/jquery.fileupload-ui.js"></script>
242243
<!-- The main application script -->
243244
<script src="js/main.js"></script>
244-
<!-- The XDomainRequest Transport is included for cross-domain file deletion for IE8+ -->
245-
<!--[if gte IE 8]>
245+
<!-- The XDomainRequest Transport is included for cross-domain file deletion for IE 8 and IE 9 -->
246+
<!--[if (gte IE 8)&(lt IE 10)]>
246247
<script src="js/cors/jquery.xdr-transport.js"></script>
247248
<![endif]-->
248249
</body>

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.