Skip to content

Commit a858e93

Browse files
blueimpblueimp
committed
Added Angular JS and basic example versions.
1 parent a134ee0 commit a858e93

7 files changed

Lines changed: 774 additions & 10 deletions

File tree

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ Please read the [issue guidelines](https://github.com/blueimp/jQuery-File-Upload
6464
* [JavaScript Templates engine](https://github.com/blueimp/JavaScript-Templates) v. 2.1.0+ (optional)
6565
* [JavaScript Load Image function](https://github.com/blueimp/JavaScript-Load-Image) v. 1.5.0+ (optional)
6666
* [JavaScript Canvas to Blob function](https://github.com/blueimp/JavaScript-Canvas-to-Blob) v. 2.0.5+ (optional)
67-
* [Bootstrap CSS Toolkit](https://github.com/twitter/bootstrap/) v. 2.1+ (optional)
67+
* [Bootstrap CSS Toolkit](https://github.com/twitter/bootstrap/) v. 2.3+ (optional)
6868

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

‎angularjs.html‎

Lines changed: 209 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
<!DOCTYPE HTML>
2+
<!--
3+
/*
4+
* jQuery File Upload Plugin AngularJS Demo 1.0
5+
* https://github.com/blueimp/jQuery-File-Upload
6+
*
7+
* Copyright 2013, Sebastian Tschan
8+
* https://blueimp.net
9+
*
10+
* Licensed under the MIT license:
11+
* http://www.opensource.org/licenses/MIT
12+
*/
13+
-->
14+
<html lang="en">
15+
<head>
16+
<!-- Force latest IE rendering engine or ChromeFrame if installed -->
17+
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
18+
<meta charset="utf-8">
19+
<title>jQuery File Upload Demo - AngularJS version</title>
20+
<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.">
21+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
22+
<!-- Bootstrap CSS Toolkit styles -->
23+
<link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap.min.css">
24+
<!-- Generic page styles -->
25+
<link rel="stylesheet" href="css/style.css">
26+
<!-- Bootstrap styles for responsive website layout, supporting different screen sizes -->
27+
<link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap-responsive.min.css">
28+
<!-- Bootstrap CSS fixes for IE6 -->
29+
<!--[if lt IE 7]><link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap-ie6.min.css"><![endif]-->
30+
<!-- Bootstrap Image Gallery styles -->
31+
<link rel="stylesheet" href="http://blueimp.github.com/Bootstrap-Image-Gallery/css/bootstrap-image-gallery.min.css">
32+
<!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
33+
<link rel="stylesheet" href="css/jquery.fileupload-ui.css">
34+
<!-- CSS adjustments for browsers with JavaScript disabled -->
35+
<noscript><link rel="stylesheet" href="css/jquery.fileupload-ui-noscript.css"></noscript>
36+
</head>
37+
<body>
38+
<div class="navbar navbar-fixed-top">
39+
<div class="navbar-inner">
40+
<div class="container">
41+
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
42+
<span class="icon-bar"></span>
43+
<span class="icon-bar"></span>
44+
<span class="icon-bar"></span>
45+
</a>
46+
<a class="brand" href="https://github.com/blueimp/jQuery-File-Upload">jQuery File Upload</a>
47+
<div class="nav-collapse">
48+
<ul class="nav">
49+
<li class="active"><a href="http://blueimp.github.com/jQuery-File-Upload/">Demo</a></li>
50+
<li><a href="https://github.com/blueimp/jQuery-File-Upload#download">Download</a></li>
51+
<li><a href="https://github.com/blueimp/jQuery-File-Upload">Source Code</a></li>
52+
<li><a href="https://github.com/blueimp/jQuery-File-Upload/wiki">Documentation</a></li>
53+
<li><a href="https://github.com/blueimp/jQuery-File-Upload#support">Support</a></li>
54+
<li><a href="https://blueimp.net">&copy; Sebastian Tschan</a></li>
55+
</ul>
56+
</div>
57+
</div>
58+
</div>
59+
</div>
60+
<div class="container">
61+
<div class="page-header">
62+
<h1>jQuery File Upload Demo</h1>
63+
<h2 class="lead">AngularJS version</h2>
64+
<ul class="nav nav-tabs">
65+
<li><a href="index.html">Default</a></li>
66+
<li><a href="basic.html">Basic</a></li>
67+
<li class="active"><a href="angularjs.html">Angular JS</a></li>
68+
</ul>
69+
<blockquote>
70+
<p>File Upload widget with multiple file selection, drag&amp;drop support, progress bars and preview images for jQuery.<br>
71+
Supports cross-domain, chunked and resumable file uploads and client-side image resizing.<br>
72+
Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.</p>
73+
</blockquote>
74+
</div>
75+
<!-- The file upload form used as target for the file upload widget -->
76+
<form id="fileupload" action="server/php/" method="POST" enctype="multipart/form-data" data-ng-app="demo" data-ng-controller="DemoFileUploadController" data-fileupload="options" ng-class="{true: 'fileupload-processing'}[!!processing() || loadingFiles]">
77+
<!-- Redirect browsers with JavaScript disabled to the origin page -->
78+
<noscript><input type="hidden" name="redirect" value="http://blueimp.github.com/jQuery-File-Upload/"></noscript>
79+
<!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
80+
<div class="row fileupload-buttonbar">
81+
<div class="span7">
82+
<!-- The fileinput-button span is used to style the file input field as button -->
83+
<span class="btn btn-success fileinput-button">
84+
<i class="icon-plus icon-white"></i>
85+
<span>Add files...</span>
86+
<input type="file" name="files[]" multiple>
87+
</span>
88+
<button type="button" class="btn btn-primary start" data-ng-click="submit()">
89+
<i class="icon-upload icon-white"></i>
90+
<span>Start upload</span>
91+
</button>
92+
<button type="button" class="btn btn-warning cancel" data-ng-click="cancel()">
93+
<i class="icon-ban-circle icon-white"></i>
94+
<span>Cancel upload</span>
95+
</button>
96+
<!-- The loading indicator is shown during file processing -->
97+
<div class="fileupload-loading"></div>
98+
</div>
99+
<!-- The global progress information -->
100+
<div class="span5 fade" data-ng-class="{true: 'in'}[!!active()]">
101+
<!-- The global progress bar -->
102+
<div class="progress progress-success progress-striped active" data-progress="progress()"><div class="bar" ng-style="{width: num + '%'}"></div></div>
103+
<!-- The extended global progress information -->
104+
<div class="progress-extended">&nbsp;</div>
105+
</div>
106+
</div>
107+
<!-- The table listing the files available for upload/download -->
108+
<table class="table table-striped files ng-cloak" data-toggle="modal-gallery" data-target="#modal-gallery">
109+
<tr data-ng-repeat="file in queue">
110+
<td data-ng-switch on="!!file.thumbnail_url">
111+
<div class="preview" data-ng-switch-when="true">
112+
<a data-ng-href="{{file.url}}" title="{{file.name}}" data-gallery="gallery" download="{{file.name}}"><img data-ng-src="{{file.thumbnail_url}}"></a>
113+
</div>
114+
<div class="preview" data-ng-switch-default data-preview="file"></div>
115+
</td>
116+
<td>
117+
<p class="name" data-ng-switch on="!!file.url">
118+
<a data-ng-switch-when="true" data-ng-href="{{file.url}}" title="{{file.name}}" data-gallery="gallery" download="{{file.name}}">{{file.name}}</a>
119+
<span data-ng-switch-default>{{file.name}}</span>
120+
</p>
121+
<div ng-show="file.error"><span class="label label-important">Error</span> {{file.error}}</div>
122+
</td>
123+
<td>
124+
<p class="size">{{file.size | formatFileSize}}</p>
125+
<div class="progress progress-success progress-striped active fade" data-ng-class="{pending: 'in'}[file.$state()]" data-progress="file.$progress()"><div class="bar" ng-style="{width: num + '%'}"></div></div>
126+
</td>
127+
<td>
128+
<button type="button" class="btn btn-primary start" data-ng-click="file.$submit()" data-ng-hide="!file.$submit">
129+
<i class="icon-upload icon-white"></i>
130+
<span>Start</span>
131+
</button>
132+
<button type="button" class="btn btn-warning cancel" data-ng-click="file.$cancel()" data-ng-hide="!file.$cancel">
133+
<i class="icon-ban-circle icon-white"></i>
134+
<span>Cancel</span>
135+
</button>
136+
<button data-ng-controller="FileDestroyController" type="button" class="btn btn-danger destroy" data-ng-click="file.$destroy()" data-ng-hide="!file.$destroy">
137+
<i class="icon-ban-circle icon-white"></i>
138+
<span>Delete</span>
139+
</button>
140+
</td>
141+
</tr>
142+
</table>
143+
</form>
144+
<br>
145+
<div class="well">
146+
<h3>Demo Notes</h3>
147+
<ul>
148+
<li>The maximum file size for uploads in this demo is <strong>5 MB</strong> (default file size is unlimited).</li>
149+
<li>Only image files (<strong>JPG, GIF, PNG</strong>) are allowed in this demo (by default there is no file type restriction).</li>
150+
<li>Uploaded files will be deleted automatically after <strong>5 minutes</strong> (demo setting).</li>
151+
<li>You can <strong>drag &amp; drop</strong> files from your desktop on this webpage with Google Chrome, Mozilla Firefox and Apple Safari.</li>
152+
<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>
153+
<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>
154+
</ul>
155+
</div>
156+
</div>
157+
<!-- modal-gallery is the modal dialog used for the image gallery -->
158+
<div id="modal-gallery" class="modal modal-gallery hide fade" data-filter=":odd" tabindex="-1">
159+
<div class="modal-header">
160+
<a class="close" data-dismiss="modal">&times;</a>
161+
<h3 class="modal-title"></h3>
162+
</div>
163+
<div class="modal-body"><div class="modal-image"></div></div>
164+
<div class="modal-footer">
165+
<a class="btn modal-download" target="_blank">
166+
<i class="icon-download"></i>
167+
<span>Download</span>
168+
</a>
169+
<a class="btn btn-success modal-play modal-slideshow" data-slideshow="5000">
170+
<i class="icon-play icon-white"></i>
171+
<span>Slideshow</span>
172+
</a>
173+
<a class="btn btn-info modal-prev">
174+
<i class="icon-arrow-left icon-white"></i>
175+
<span>Previous</span>
176+
</a>
177+
<a class="btn btn-primary modal-next">
178+
<span>Next</span>
179+
<i class="icon-arrow-right icon-white"></i>
180+
</a>
181+
</div>
182+
</div>
183+
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
184+
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
185+
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
186+
<script src="js/vendor/jquery.ui.widget.js"></script>
187+
<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
188+
<script src="http://blueimp.github.com/JavaScript-Load-Image/load-image.min.js"></script>
189+
<!-- The Canvas to Blob plugin is included for image resizing functionality -->
190+
<script src="http://blueimp.github.com/JavaScript-Canvas-to-Blob/canvas-to-blob.min.js"></script>
191+
<!-- Bootstrap JS and Bootstrap Image Gallery are not required, but included for the demo -->
192+
<script src="http://blueimp.github.com/cdn/js/bootstrap.min.js"></script>
193+
<script src="http://blueimp.github.com/Bootstrap-Image-Gallery/js/bootstrap-image-gallery.min.js"></script>
194+
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
195+
<script src="js/jquery.iframe-transport.js"></script>
196+
<!-- The basic File Upload plugin -->
197+
<script src="js/jquery.fileupload.js"></script>
198+
<!-- The File Upload processing plugin -->
199+
<script src="js/jquery.fileupload-process.js"></script>
200+
<!-- The File Upload image resize plugin -->
201+
<script src="js/jquery.fileupload-resize.js"></script>
202+
<!-- The File Upload validation plugin -->
203+
<script src="js/jquery.fileupload-validate.js"></script>
204+
<!-- The File Upload Angular JS module -->
205+
<script src="js/jquery.fileupload-angular.js"></script>
206+
<!-- The main application script -->
207+
<script src="js/app.js"></script>
208+
</body>
209+
</html>

‎basic.html‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
<!DOCTYPE HTML>
2+
<!--
3+
/*
4+
* jQuery File Upload Plugin Basic Demo 1.0
5+
* https://github.com/blueimp/jQuery-File-Upload
6+
*
7+
* Copyright 2013, Sebastian Tschan
8+
* https://blueimp.net
9+
*
10+
* Licensed under the MIT license:
11+
* http://www.opensource.org/licenses/MIT
12+
*/
13+
-->
14+
<html lang="en">
15+
<head>
16+
<!-- Force latest IE rendering engine or ChromeFrame if installed -->
17+
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
18+
<meta charset="utf-8">
19+
<title>jQuery File Upload Demo - Basic version</title>
20+
<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.">
21+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
22+
<!-- Bootstrap CSS Toolkit styles -->
23+
<link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap.min.css">
24+
<!-- Generic page styles -->
25+
<link rel="stylesheet" href="css/style.css">
26+
<!-- Bootstrap styles for responsive website layout, supporting different screen sizes -->
27+
<link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap-responsive.min.css">
28+
<!-- Bootstrap CSS fixes for IE6 -->
29+
<!--[if lt IE 7]><link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap-ie6.min.css"><![endif]-->
30+
</head>
31+
<body>
32+
<div class="navbar navbar-fixed-top">
33+
<div class="navbar-inner">
34+
<div class="container">
35+
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
36+
<span class="icon-bar"></span>
37+
<span class="icon-bar"></span>
38+
<span class="icon-bar"></span>
39+
</a>
40+
<a class="brand" href="https://github.com/blueimp/jQuery-File-Upload">jQuery File Upload</a>
41+
<div class="nav-collapse">
42+
<ul class="nav">
43+
<li class="active"><a href="http://blueimp.github.com/jQuery-File-Upload/">Demo</a></li>
44+
<li><a href="https://github.com/blueimp/jQuery-File-Upload#download">Download</a></li>
45+
<li><a href="https://github.com/blueimp/jQuery-File-Upload">Source Code</a></li>
46+
<li><a href="https://github.com/blueimp/jQuery-File-Upload/wiki">Documentation</a></li>
47+
<li><a href="https://github.com/blueimp/jQuery-File-Upload#support">Support</a></li>
48+
<li><a href="https://blueimp.net">&copy; Sebastian Tschan</a></li>
49+
</ul>
50+
</div>
51+
</div>
52+
</div>
53+
</div>
54+
<div class="container">
55+
<div class="page-header">
56+
<h1>jQuery File Upload Demo</h1>
57+
<h2 class="lead">Basic version</h2>
58+
<ul class="nav nav-tabs">
59+
<li><a href="index.html">Default</a></li>
60+
<li class="active"><a href="basic.html">Basic</a></li>
61+
<li><a href="angularjs.html">Angular JS</a></li>
62+
</ul>
63+
<blockquote>
64+
<p>File Upload widget with multiple file selection, drag&amp;drop support, progress bars and preview images for jQuery.<br>
65+
Supports cross-domain, chunked and resumable file uploads and client-side image resizing.<br>
66+
Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.</p>
67+
</blockquote>
68+
</div>
69+
<!-- The file input field used as target for the file upload widget -->
70+
<input id="fileupload" type="file" name="files[]" multiple>
71+
<!-- The global progress bar -->
72+
<div id="progress" class="progress progress-success progress-striped">
73+
<div class="bar"></div>
74+
</div>
75+
<!-- The container for the uploaded files -->
76+
<div id="files"></div>
77+
<br>
78+
<div class="well">
79+
<h3>Demo Notes</h3>
80+
<ul>
81+
<li>The maximum file size for uploads in this demo is <strong>5 MB</strong> (default file size is unlimited).</li>
82+
<li>Only image files (<strong>JPG, GIF, PNG</strong>) are allowed in this demo (by default there is no file type restriction).</li>
83+
<li>Uploaded files will be deleted automatically after <strong>5 minutes</strong> (demo setting).</li>
84+
<li>You can <strong>drag &amp; drop</strong> files from your desktop on this webpage with Google Chrome, Mozilla Firefox and Apple Safari.</li>
85+
<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>
86+
<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>
87+
</ul>
88+
</div>
89+
</div>
90+
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
91+
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
92+
<script src="js/vendor/jquery.ui.widget.js"></script>
93+
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
94+
<script src="js/jquery.iframe-transport.js"></script>
95+
<!-- The basic File Upload plugin -->
96+
<script src="js/jquery.fileupload.js"></script>
97+
<script>
98+
/*jslint unparam: true */
99+
/*global window, $ */
100+
$(function () {
101+
'use strict';
102+
// Change this to the location of your server-side upload handler:
103+
var url = (window.location.hostname === 'blueimp.github.com' ||
104+
window.location.hostname === 'blueimp.github.io') ?
105+
'//jquery-file-upload.appspot.com/' : 'server/php/';
106+
$('#fileupload').fileupload({
107+
url: url,
108+
dataType: 'json',
109+
done: function (e, data) {
110+
$.each(data.result.files, function (index, file) {
111+
$('<p/>').text(file.name).appendTo('#files');
112+
});
113+
},
114+
progressall: function (e, data) {
115+
var progress = parseInt(data.loaded / data.total * 100, 10);
116+
$('#progress .bar').css(
117+
'width',
118+
progress + '%'
119+
);
120+
}
121+
});
122+
});
123+
</script>
124+
</body>
125+
</html>

‎css/style.css‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,19 @@
11
@charset "UTF-8";
22
/*
3-
* jQuery File Upload Plugin CSS Example 1.0.1
3+
* jQuery File Upload Plugin CSS Example 8.0
44
* https://github.com/blueimp/jQuery-File-Upload
55
*
6-
* Copyright 2012, Sebastian Tschan
6+
* Copyright 2013, Sebastian Tschan
77
* https://blueimp.net
88
*
99
* Licensed under the MIT license:
1010
* http://www.opensource.org/licenses/MIT
1111
*/
1212

13-
body{
13+
body {
1414
padding-top: 60px;
1515
}
16+
17+
.ng-cloak {
18+
display: none;
19+
}

0 commit comments

Comments
 (0)