Skip to content

Commit

Permalink
Added an updated jQuery UI example implementation.
Browse files Browse the repository at this point in the history
  • Loading branch information
blueimp committed Aug 2, 2013
1 parent 2490284 commit 995f0ef
Show file tree
Hide file tree
Showing 11 changed files with 495 additions and 24 deletions.
31 changes: 22 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -57,24 +57,37 @@ Please read the [issue guidelines](https://github.com/blueimp/jQuery-File-Upload
Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.

## Requirements

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

The jQuery UI widget factory is a requirement for the basic File Upload plugin, but very lightweight without any other dependencies.
The jQuery Iframe Transport is required for [browsers without XHR file upload support](https://github.com/blueimp/jQuery-File-Upload/wiki/Browser-support).
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.
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.

The jQuery Iframe Transport is required for [browsers without XHR file upload support](https://github.com/blueimp/jQuery-File-Upload/wiki/Browser-support).

### Optional requirements
* [JavaScript Templates engine](https://github.com/blueimp/JavaScript-Templates) v. 2.3.0+
* [JavaScript Load Image library](https://github.com/blueimp/JavaScript-Load-Image) v. 1.9.1+
* [JavaScript Canvas to Blob polyfill](https://github.com/blueimp/JavaScript-Canvas-to-Blob) v. 2.0.7+
* [blueimp Gallery](https://github.com/blueimp/Gallery) v. 2.7.1+
* [Bootstrap CSS Toolkit](https://github.com/twitter/bootstrap/) v. 2.3

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.
The JavaScript Templates engine is used to render the selected and uploaded files for the Basic Plus UI and jQuery UI versions.

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.
The JavaScript Load Image library and JavaScript Canvas to Blob polyfill are required for the image previews and resizing functionality.

The blueimp Gallery is used to display the uploaded images in a lightbox.

The user interface of all versions except the jQuery UI version is built with Twitter's [Bootstrap](https://github.com/twitter/bootstrap/) Toolkit.

### Cross-domain requirements
[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.

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).
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.

## Browsers

### Desktop browsers
Expand Down
3 changes: 2 additions & 1 deletion angularjs.html
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@ <h2 class="lead">AngularJS version</h2>
<li><a href="basic-plus.html">Basic Plus</a></li>
<li><a href="index.html">Basic Plus UI</a></li>
<li class="active"><a href="angularjs.html">AngularJS</a></li>
<li><a href="jquery-ui.html">jQuery UI</a></li>
</ul>
<blockquote>
<p>File Upload widget with multiple file selection, drag&amp;drop support, progress bars, validation and preview images, audio and video for AngularJS.<br>
Expand Down Expand Up @@ -156,7 +157,7 @@ <h3>Demo Notes</h3>
<li>The maximum file size for uploads in this demo is <strong>5 MB</strong> (default file size is unlimited).</li>
<li>Only image files (<strong>JPG, GIF, PNG</strong>) are allowed in this demo (by default there is no file type restriction).</li>
<li>Uploaded files will be deleted automatically after <strong>5 minutes</strong> (demo setting).</li>
<li>You can <strong>drag &amp; drop</strong> files from your desktop on this webpage with Google Chrome, Mozilla Firefox and Apple Safari.</li>
<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>
<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>
<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>
</ul>
Expand Down
3 changes: 2 additions & 1 deletion basic-plus.html
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ <h2 class="lead">Basic Plus version</h2>
<li class="active"><a href="basic-plus.html">Basic Plus</a></li>
<li><a href="index.html">Basic Plus UI</a></li>
<li><a href="angularjs.html">AngularJS</a></li>
<li><a href="jquery-ui.html">jQuery UI</a></li>
</ul>
<blockquote>
<p>File Upload widget with multiple file selection, drag&amp;drop support, progress bar, validation and preview images, audio and video for jQuery.<br>
Expand Down Expand Up @@ -91,7 +92,7 @@ <h3>Demo Notes</h3>
<li>The maximum file size for uploads in this demo is <strong>5 MB</strong> (default file size is unlimited).</li>
<li>Only image files (<strong>JPG, GIF, PNG</strong>) are allowed in this demo (by default there is no file type restriction).</li>
<li>Uploaded files will be deleted automatically after <strong>5 minutes</strong> (demo setting).</li>
<li>You can <strong>drag &amp; drop</strong> files from your desktop on this webpage with Google Chrome, Mozilla Firefox and Apple Safari.</li>
<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>
<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>
<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>
</ul>
Expand Down
3 changes: 2 additions & 1 deletion basic.html
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ <h2 class="lead">Basic version</h2>
<li><a href="basic-plus.html">Basic Plus</a></li>
<li><a href="index.html">Basic Plus UI</a></li>
<li><a href="angularjs.html">AngularJS</a></li>
<li><a href="jquery-ui.html">jQuery UI</a></li>
</ul>
<blockquote>
<p>File Upload widget with multiple file selection, drag&amp;drop support and progress bar for jQuery.<br>
Expand Down Expand Up @@ -91,7 +92,7 @@ <h3>Demo Notes</h3>
<li>The maximum file size for uploads in this demo is <strong>5 MB</strong> (default file size is unlimited).</li>
<li>Only image files (<strong>JPG, GIF, PNG</strong>) are allowed in this demo (by default there is no file type restriction).</li>
<li>Uploaded files will be deleted automatically after <strong>5 minutes</strong> (demo setting).</li>
<li>You can <strong>drag &amp; drop</strong> files from your desktop on this webpage with Google Chrome, Mozilla Firefox and Apple Safari.</li>
<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>
<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>
<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>
</ul>
Expand Down
2 changes: 1 addition & 1 deletion blueimp-file-upload.jquery.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "blueimp-file-upload",
"version": "8.6.1",
"version": "8.7.0",
"title": "jQuery File Upload",
"author": {
"name": "Sebastian Tschan",
Expand Down
8 changes: 4 additions & 4 deletions bower.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "blueimp-file-upload",
"version": "8.6.1",
"version": "8.7.0",
"title": "jQuery File Upload",
"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.",
"keywords": [
Expand Down Expand Up @@ -48,9 +48,9 @@
],
"dependencies": {
"jquery": ">=1.6",
"blueimp-tmpl": ">=2.2.1",
"blueimp-load-image": ">=1.7.3",
"blueimp-canvas-to-blob": ">=2.0.6"
"blueimp-tmpl": ">=2.3.0",
"blueimp-load-image": ">=1.9.1",
"blueimp-canvas-to-blob": ">=2.0.7"
},
"main": [
"js/vendor/jquery.ui.widget.js",
Expand Down
67 changes: 67 additions & 0 deletions css/demo.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
@charset "UTF-8";
/*
* jQuery File Upload Demo CSS 1.0
* https://github.com/blueimp/jQuery-File-Upload
*
* Copyright 2013, Sebastian Tschan
* https://blueimp.net
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/MIT
*/

body {
max-width: 750px;
margin: 0 auto;
padding: 1em;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;
font-size: 1em;
line-height: 1.4em;
background: #222;
color: #fff;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
a {
color: orange;
text-decoration: none;
}
img {
border: 0;
vertical-align: middle;
}
h1 {
line-height: 1em;
}
blockquote {
padding: 0 0 0 15px;
margin: 0 0 20px;
border-left: 5px solid #eee;
}
table {
width: 100%;
margin: 10px 0;
}

.fileupload-progress {
margin: 10px 0;
}
.fileupload-progress .progress-extended {
margin-top: 5px;
}
.error {
color: red;
}

@media (min-width: 481px) {
.navigation {
list-style: none;
padding: 0;
}
.navigation li {
display: inline-block;
}
.navigation li:not(:first-child):before {
content: '| ';
}
}
7 changes: 4 additions & 3 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@ <h2 class="lead">Basic Plus UI version</h2>
<li><a href="basic-plus.html">Basic Plus</a></li>
<li class="active"><a href="index.html">Basic Plus UI</a></li>
<li><a href="angularjs.html">AngularJS</a></li>
<li><a href="jquery-ui.html">jQuery UI</a></li>
</ul>
<blockquote>
<p>File Upload widget with multiple file selection, drag&amp;drop support, progress bars, validation and preview images, audio and video for jQuery.<br>
Expand Down Expand Up @@ -126,7 +127,7 @@ <h3>Demo Notes</h3>
<li>The maximum file size for uploads in this demo is <strong>5 MB</strong> (default file size is unlimited).</li>
<li>Only image files (<strong>JPG, GIF, PNG</strong>) are allowed in this demo (by default there is no file type restriction).</li>
<li>Uploaded files will be deleted automatically after <strong>5 minutes</strong> (demo setting).</li>
<li>You can <strong>drag &amp; drop</strong> files from your desktop on this webpage with Google Chrome, Mozilla Firefox and Apple Safari.</li>
<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>
<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>
<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>
</ul>
Expand Down Expand Up @@ -241,8 +242,8 @@ <h3 class="title"></h3>
<script src="js/jquery.fileupload-ui.js"></script>
<!-- The main application script -->
<script src="js/main.js"></script>
<!-- The XDomainRequest Transport is included for cross-domain file deletion for IE8+ -->
<!--[if gte IE 8]>
<!-- The XDomainRequest Transport is included for cross-domain file deletion for IE 8 and IE 9 -->
<!--[if (gte IE 8)&(lt IE 10)]>
<script src="js/cors/jquery.xdr-transport.js"></script>
<![endif]-->
</body>
Expand Down
Loading

0 comments on commit 995f0ef

Please sign in to comment.