Display a cancel button if the server-side validation failed. Fixes b…

…lueimp#2538 Replace label-important with label-danger (Bootstrap 3 change).
asadali3210 · Aug 26, 2013 · 5754b98 · 5754b98
1 parent 04954d5
commit 5754b98
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 25 deletions.
diff --git a/angularjs.html b/angularjs.html
@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!--
 /*
- * jQuery File Upload Plugin AngularJS Demo 1.6.2
+ * jQuery File Upload Plugin AngularJS Demo 1.6.3
  * https://github.com/blueimp/jQuery-File-Upload
  *
  * Copyright 2013, Sebastian Tschan
@@ -125,7 +125,7 @@ <h2 class="lead">AngularJS version</h2>
                         </span>
                         <span data-ng-switch-default>{{file.name}}</span>
                     </p>
-                    <div data-ng-show="file.error"><span class="label label-important">Error</span> {{file.error}}</div>
+                    <div data-ng-show="file.error"><span class="label label-danger">Error</span> {{file.error}}</div>
                 </td>
                 <td>
                     <p class="size">{{file.size | formatFileSize}}</p>

diff --git a/index.html b/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!--
 /*
- * jQuery File Upload Plugin Demo 8.8.2
+ * jQuery File Upload Plugin Demo 8.8.3
  * https://github.com/blueimp/jQuery-File-Upload
  *
  * Copyright 2010, Sebastian Tschan
@@ -149,7 +149,7 @@ <h3 class="title"></h3>
         <td>
             <p class="name">{%=file.name%}</p>
             {% if (file.error) { %}
-                <div><span class="label label-important">Error</span> {%=file.error%}</div>
+                <div><span class="label label-danger">Error</span> {%=file.error%}</div>
             {% } %}
         </td>
         <td>
@@ -188,21 +188,32 @@ <h3 class="title"></h3>
         </td>
         <td>
             <p class="name">
-                <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
+                {% if (file.url) { %}
+                    <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
+                {% } else { %}
+                    <span>{%=file.name%}</span>
+                {% } %}
             </p>
             {% if (file.error) { %}
-                <div><span class="label label-important">Error</span> {%=file.error%}</div>
+                <div><span class="label label-danger">Error</span> {%=file.error%}</div>
             {% } %}
         </td>
         <td>
             <span class="size">{%=o.formatFileSize(file.size)%}</span>
         </td>
         <td>
-            <button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
-                <i class="glyphicon glyphicon-trash"></i>
-                <span>Delete</span>
-            </button>
-            <input type="checkbox" name="delete" value="1" class="toggle">
+            {% if (file.deleteUrl) { %}
+                <button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
+                    <i class="glyphicon glyphicon-trash"></i>
+                    <span>Delete</span>
+                </button>
+                <input type="checkbox" name="delete" value="1" class="toggle">
+            {% } else { %}
+                <button class="btn btn-warning cancel">
+                    <i class="glyphicon glyphicon-ban-circle"></i>
+                    <span>Cancel</span>
+                </button>
+            {% } %}
         </td>
     </tr>
 {% } %}

diff --git a/js/jquery.fileupload-ui.js b/js/jquery.fileupload-ui.js
@@ -1,5 +1,5 @@
 /*
- * jQuery File Upload User Interface Plugin 8.8.1
+ * jQuery File Upload User Interface Plugin 8.8.3
  * https://github.com/blueimp/jQuery-File-Upload
  *
  * Copyright 2010, Sebastian Tschan
@@ -460,9 +460,11 @@
 
         _cancelHandler: function (e) {
             e.preventDefault();
-            var template = $(e.currentTarget).closest('.template-upload'),
+            var template = $(e.currentTarget)
+                    .closest('.template-upload,.template-download'),
                 data = template.data('data') || {};
             if (!data.jqXHR) {
+                data.context = data.context || template;
                 data.errorThrown = 'abort';
                 this._trigger('fail', e, data);
             } else {

diff --git a/test/index.html b/test/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!--
 /*
- * jQuery File Upload Plugin Test 8.8.0
+ * jQuery File Upload Plugin Test 8.8.3
  * https://github.com/blueimp/jQuery-File-Upload
  *
  * Copyright 2010, Sebastian Tschan
@@ -20,7 +20,7 @@
 <meta charset="utf-8">
 <title>jQuery File Upload Plugin Test</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css">
+<link rel="stylesheet" href="http://codeorigin.jquery.com/qunit/qunit-1.12.0.css">
 </head>
 <body>
 <h1 id="qunit-header">jQuery File Upload Plugin Test</h1>
@@ -80,7 +80,7 @@ <h2 id="qunit-userAgent"></h2>
         <td>
             <p class="name">{%=file.name%}</p>
             {% if (file.error) { %}
-                <div><span class="label label-important">Error</span> {%=file.error%}</div>
+                <div><span class="label label-danger">Error</span> {%=file.error%}</div>
             {% } %}
         </td>
         <td>
@@ -119,21 +119,32 @@ <h2 id="qunit-userAgent"></h2>
         </td>
         <td>
             <p class="name">
-                <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
+                {% if (file.url) { %}
+                    <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
+                {% } else { %}
+                    <span>{%=file.name%}</span>
+                {% } %}
             </p>
             {% if (file.error) { %}
-                <div><span class="label label-important">Error</span> {%=file.error%}</div>
+                <div><span class="label label-danger">Error</span> {%=file.error%}</div>
             {% } %}
         </td>
         <td>
             <span class="size">{%=o.formatFileSize(file.size)%}</span>
         </td>
         <td>
-            <button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
-                <i class="icon-trash icon-white"></i>
-                <span>Delete</span>
-            </button>
-            <input type="checkbox" name="delete" value="1" class="toggle">
+            {% if (file.deleteUrl) { %}
+                <button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
+                    <i class="glyphicon glyphicon-trash"></i>
+                    <span>Delete</span>
+                </button>
+                <input type="checkbox" name="delete" value="1" class="toggle">
+            {% } else { %}
+                <button class="btn btn-warning cancel">
+                    <i class="glyphicon glyphicon-ban-circle"></i>
+                    <span>Cancel</span>
+                </button>
+            {% } %}
         </td>
     </tr>
 {% } %}
@@ -153,7 +164,7 @@ <h2 id="qunit-userAgent"></h2>
 <script src="../js/jquery.fileupload-validate.js"></script>
 <script src="../js/jquery.fileupload-ui.js"></script>
 <script>window.testUIWidget = $.blueimp.fileupload;</script>
-<script src="http://code.jquery.com/qunit/git/qunit.js"></script>
+<script src="http://codeorigin.jquery.com/qunit/qunit-1.12.0.js"></script>
 <script src="test.js"></script>
 </body> 
 </html>
diff --git a/test/test.js b/test/test.js
@@ -1,5 +1,5 @@
 /*
- * jQuery File Upload Plugin Test 8.6.0
+ * jQuery File Upload Plugin Test 8.8.3
  * https://github.com/blueimp/jQuery-File-Upload
  *
  * Copyright 2010, Sebastian Tschan
@@ -891,6 +891,7 @@ $(function () {
         $('#fileupload').fileupload('add', {files: files});
         buttonbar.find('.start').click();
         buttonbar.find('.cancel').click();
+        files[0].deleteUrl = 'http://example.org/banana.jpg';
         ($('#fileupload').data('blueimp-fileupload') ||
                 $('#fileupload').data('fileupload'))
             ._renderDownload(files)