Permalink
Browse files

Reorganizing the plugin files into folders.

Adding comments to every included resource in index.html.
  • Loading branch information...
blueimp committed Feb 9, 2012
1 parent c7023fc commit 67969d468a98e692eba1d4b0ed917c38cd94ecc0
@@ -36,6 +36,6 @@
width: 200px;
}
.progress-animated .bar {
- background: url(progressbar.gif);
+ background: url(../progressbar.gif);
filter: none;
}
File renamed without changes.
View
@@ -16,12 +16,18 @@
<meta charset="utf-8">
<title>jQuery File Upload Demo</title>
<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.">
+<!-- Bootstrap CSS Toolkit styles -->
<link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap.min.css">
<style>body{padding-top:60px;}</style>
+<!-- Bootstrap styles for responsive website layout, supporting different screen sizes -->
<link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap-responsive.min.css">
+<!-- Bootstrap CSS adjustments for IE6 -->
<!--[if lt IE 7]><link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap-ie6.min.css"><![endif]-->
+<!-- Bootstrap Image Gallery styles -->
<link rel="stylesheet" href="http://blueimp.github.com/Bootstrap-Image-Gallery/bootstrap-image-gallery.min.css">
-<link rel="stylesheet" href="jquery.fileupload-ui.css">
+<!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
+<link rel="stylesheet" href="css/jquery.fileupload-ui.css">
+<!-- Shim to make HTML5 elements usable in older Internet Explorer versions -->
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
@@ -58,9 +64,12 @@ <h1>jQuery File Upload Demo</h1>
Works with any server-side platform (Google App Engine, PHP, Python, Ruby on Rails, Java, etc.) that supports standard HTML form file uploads.</p>
</blockquote>
<br>
- <form id="fileupload" action="php/index.php" method="POST" enctype="multipart/form-data">
+ <!-- The file upload form used as target for the file upload widget -->
+ <form id="fileupload" action="server/php/" method="POST" enctype="multipart/form-data">
+ <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
<div class="row fileupload-buttonbar">
<div class="span6">
+ <!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button">
<span><i class="icon-plus icon-white"></i> Add files...</span>
<input type="file" name="files[]" multiple>
@@ -77,12 +86,14 @@ <h1>jQuery File Upload Demo</h1>
<input type="checkbox" class="toggle">
</div>
<div class="span6">
+ <!-- The global progress bar -->
<div class="progress progress-success progress-striped active fade">
<div class="bar" style="width:0%;"></div>
</div>
</div>
</div>
<br>
+ <!-- The table listing the files available for upload/download -->
<table class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>
</form>
<br>
@@ -112,6 +123,7 @@ <h3 class="modal-title"></h3>
<a class="btn modal-download" target="_blank"><i class="icon-download"></i> Download</a>
</div>
</div>
+<!-- Error messages for the upload/download templates -->
<script>
var fileUploadErrors = {
maxFileSize: 'File is too big',
@@ -122,6 +134,7 @@ <h3 class="modal-title"></h3>
emptyResult: 'Empty file upload result'
};
</script>
+<!-- The template to display files available for upload -->
<script id="template-upload" type="text/html">
{% for (var i=0, files=o.files, l=files.length, file=files[0]; i<l; file=files[++i]) { %}
<tr class="template-upload fade">
@@ -150,6 +163,7 @@ <h3 class="modal-title"></h3>
</tr>
{% } %}
</script>
+<!-- The template to display files available for download -->
<script id="template-download" type="text/html">
{% for (var i=0, files=o.files, l=files.length, file=files[0]; i<l; file=files[++i]) { %}
<tr class="template-download fade">
@@ -179,19 +193,22 @@ <h3 class="modal-title"></h3>
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
-<script src="vendor/jquery.ui.widget.js"></script>
+<script src="js/vendor/jquery.ui.widget.js"></script>
<!-- The Templates and Load Image plugins are included for the FileUpload user interface -->
<script src="http://blueimp.github.com/JavaScript-Templates/tmpl.min.js"></script>
<script src="http://blueimp.github.com/JavaScript-Load-Image/load-image.min.js"></script>
<!-- Bootstrap JS and Bootstrap Image Gallery are not required, but included for the demo -->
<script src="http://blueimp.github.com/cdn/js/bootstrap.min.js"></script>
<script src="http://blueimp.github.com/Bootstrap-Image-Gallery/bootstrap-image-gallery.min.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
-<script src="jquery.iframe-transport.js"></script>
-<script src="jquery.fileupload.js"></script>
-<script src="jquery.fileupload-ui.js"></script>
-<script src="application.js"></script>
+<script src="js/jquery.iframe-transport.js"></script>
+<!-- The basic File Upload plugin -->
+<script src="js/jquery.fileupload.js"></script>
+<!-- The File Upload user interface plugin -->
+<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]><script src="cors/jquery.xdr-transport.js"></script><![endif]-->
+<!--[if gte IE 8]><script src="js/cors/jquery.xdr-transport.js"></script><![endif]-->
</body>
</html>
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
View
@@ -24,9 +24,12 @@ <h2 id="qunit-banner"></h2>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture">
- <form id="fileupload" action="../php/index.php" method="POST" enctype="multipart/form-data">
+ <!-- The file upload form used as target for the file upload widget -->
+ <form id="fileupload" action="../server/php/" method="POST" enctype="multipart/form-data">
+ <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
<div class="row fileupload-buttonbar">
<div class="span6">
+ <!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button">
<span><i class="icon-plus icon-white"></i> Add files...</span>
<input type="file" name="files[]" multiple>
@@ -43,15 +46,18 @@ <h2 id="qunit-userAgent"></h2>
<input type="checkbox" class="toggle">
</div>
<div class="span6">
+ <!-- The global progress bar -->
<div class="progress progress-success progress-striped active fade">
<div class="bar" style="width:0%;"></div>
</div>
</div>
</div>
<br>
+ <!-- The table listing the files available for upload/download -->
<table class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>
</form>
</div>
+<!-- Error messages for the upload/download templates -->
<script>
var fileUploadErrors = {
maxFileSize: 'File is too big',
@@ -62,6 +68,7 @@ <h2 id="qunit-userAgent"></h2>
emptyResult: 'Empty file upload result'
};
</script>
+<!-- The template to display files available for upload -->
<script id="template-upload" type="text/html">
{% for (var i=0, files=o.files, l=files.length, file=files[0]; i<l; file=files[++i]) { %}
<tr class="template-upload fade">
@@ -90,6 +97,7 @@ <h2 id="qunit-userAgent"></h2>
</tr>
{% } %}
</script>
+<!-- The template to display files available for download -->
<script id="template-download" type="text/html">
{% for (var i=0, files=o.files, l=files.length, file=files[0]; i<l; file=files[++i]) { %}
<tr class="template-download fade">
@@ -118,12 +126,12 @@ <h2 id="qunit-userAgent"></h2>
{% } %}
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
-<script src="../vendor/jquery.ui.widget.js"></script>
+<script src="../js/vendor/jquery.ui.widget.js"></script>
<script src="http://blueimp.github.com/JavaScript-Templates/tmpl.min.js"></script>
<script src="http://blueimp.github.com/JavaScript-Load-Image/load-image.min.js"></script>
-<script src="../jquery.iframe-transport.js"></script>
-<script src="../jquery.fileupload.js"></script>
-<script src="../jquery.fileupload-ui.js"></script>
+<script src="../js/jquery.iframe-transport.js"></script>
+<script src="../js/jquery.fileupload.js"></script>
+<script src="../js/jquery.fileupload-ui.js"></script>
<script src="http://code.jquery.com/qunit/git/qunit.js"></script>
<script src="test.js"></script>
</body>

0 comments on commit 67969d4

Please sign in to comment.