Reorganizing the plugin files into folders.

Adding comments to every included resource in index.html.
gawecoti · Feb 9, 2012 · 67969d4 · 67969d4
1 parent c7023fc
commit 67969d4
Show file tree

Hide file tree

Showing 24 changed files with 39 additions and 14 deletions.
diff --git a/jquery.fileupload-ui.css → css/jquery.fileupload-ui.css b/jquery.fileupload-ui.css → css/jquery.fileupload-ui.css
@@ -36,6 +36,6 @@
   width: 200px;
 }
 .progress-animated .bar {
-  background: url(progressbar.gif);
+  background: url(../progressbar.gif);
   filter: none;
 }
diff --git a/progressbar.gif → img/progressbar.gif b/progressbar.gif → img/progressbar.gif
diff --git a/index.html b/index.html
@@ -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>
diff --git a/cors/jquery.postmessage-transport.js → js/cors/jquery.postmessage-transport.js b/cors/jquery.postmessage-transport.js → js/cors/jquery.postmessage-transport.js
diff --git a/cors/jquery.xdr-transport.js → js/cors/jquery.xdr-transport.js b/cors/jquery.xdr-transport.js → js/cors/jquery.xdr-transport.js
diff --git a/jquery.fileupload-ui.js → js/jquery.fileupload-ui.js b/jquery.fileupload-ui.js → js/jquery.fileupload-ui.js
diff --git a/jquery.fileupload.js → js/jquery.fileupload.js b/jquery.fileupload.js → js/jquery.fileupload.js
diff --git a/jquery.iframe-transport.js → js/jquery.iframe-transport.js b/jquery.iframe-transport.js → js/jquery.iframe-transport.js
diff --git a/application.js → js/main.js b/application.js → js/main.js
diff --git a/vendor/jquery.ui.widget.js → js/vendor/jquery.ui.widget.js b/vendor/jquery.ui.widget.js → js/vendor/jquery.ui.widget.js
diff --git a/gae-go/app.yaml → server/gae-go/app.yaml b/gae-go/app.yaml → server/gae-go/app.yaml
diff --git a/gae-go/app/main.go → server/gae-go/app/main.go b/gae-go/app/main.go → server/gae-go/app/main.go
diff --git a/gae-go/resize/resize.go → server/gae-go/resize/resize.go b/gae-go/resize/resize.go → server/gae-go/resize/resize.go
diff --git a/gae-go/static/favicon.ico → server/gae-go/static/favicon.ico b/gae-go/static/favicon.ico → server/gae-go/static/favicon.ico
diff --git a/gae-go/static/robots.txt → server/gae-go/static/robots.txt b/gae-go/static/robots.txt → server/gae-go/static/robots.txt
diff --git a/gae-python/app.yaml → server/gae-python/app.yaml b/gae-python/app.yaml → server/gae-python/app.yaml
diff --git a/gae-python/main.py → server/gae-python/main.py b/gae-python/main.py → server/gae-python/main.py
diff --git a/gae-python/static/favicon.ico → server/gae-python/static/favicon.ico b/gae-python/static/favicon.ico → server/gae-python/static/favicon.ico
diff --git a/gae-python/static/robots.txt → server/gae-python/static/robots.txt b/gae-python/static/robots.txt → server/gae-python/static/robots.txt
diff --git a/php/files/.htaccess → server/php/files/.htaccess b/php/files/.htaccess → server/php/files/.htaccess
diff --git a/php/index.php → server/php/index.php b/php/index.php → server/php/index.php
diff --git a/php/thumbnails/.htaccess → server/php/thumbnails/.htaccess b/php/thumbnails/.htaccess → server/php/thumbnails/.htaccess
diff --git a/php/upload.class.php → server/php/upload.class.php b/php/upload.class.php → server/php/upload.class.php
diff --git a/test/index.html b/test/index.html
@@ -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>