Display the details of server errors when they occur in the multi-image uploader

CHANGELOG.txt

@@ -24,6 +24,7 @@ Changelog
  * Added title text to action buttons in the page explorer (Liam Brenner)
  * Changed project template to explicitly import development settings via `settings.dev` (Tomas Olander)
  * Improved L10N and I18N for revisions list (Roel Bruggink)
+ * The multiple image uploader now displays details of server errors (Nigel Fletton)
  * Fix: The currently selected day is now highlighted only in the correct month in date pickers (Jonas Lergell)
  * Fix: Fixed crash when an image without a source file was resized with the "dynamic serve view"
  * Fix: Registered settings admin menu items now show active correctly (Matthew Downey)

docs/releases/1.5.rst

@@ -49,6 +49,7 @@ Minor features
  * Added title text to action buttons in the page explorer (Liam Brenner)
  * Changed project template to explicitly import development settings via ``settings.dev`` (Tomas Olander)
  * Improved L10N and I18N for revisions list (Roel Bruggink)
+ * The multiple image uploader now displays details of server errors (Nigel Fletton)
 
 Bug fixes
 ~~~~~~~~~

wagtail/wagtailimages/static_src/wagtailimages/js/add-multiple.js

@@ -114,7 +114,11 @@ $(function() {
 
         fail: function(e, data) {
             var itemElement = $(data.context);
-            itemElement.addClass('upload-failure');
+            var errorMessage = $('.server-error', itemElement);
+            $('.error-text', errorMessage).text(data.errorThrown);
+            $('.error-code', errorMessage).text(data.jqXHR.status);
+
+            itemElement.addClass('upload-server-error');
         },
 
         always: function(e, data) {

wagtail/wagtailimages/static_src/wagtailimages/scss/add-multiple.scss

@@ -52,10 +52,10 @@
         margin: auto;
     }
 
-    .progress, 
-    .thumb, 
-    .thumb:before, 
-    canvas, 
+    .progress,
+    .thumb,
+    .thumb:before,
+    canvas,
     img {
         position: absolute;
         max-width: 100%;
@@ -71,7 +71,7 @@
     }
 
     .thumb {
-        top: 0; 
+        top: 0;
         right: 0;
         bottom: 0;
         left: 0;
@@ -79,8 +79,8 @@
         width: 100%;
     }
 
-    .thumb:before, 
-    canvas, 
+    .thumb:before,
+    canvas,
     img {
         left: 0;
         right: 0;
@@ -98,14 +98,14 @@
         color: lighten($color-grey-4, 4%);
     }
 
-    canvas, 
+    canvas,
     img {
         z-index: 3;
     }
 
     .hasthumb {
         &:before {
-            display: none;        
+            display: none;
         }
     }
 
@@ -131,9 +131,21 @@
         .preview {
             display: none;
         }
-        
+
         .status-msg.failure {
             display: block;
         }
     }
+
+    .upload-server-error {
+        border-color: $color-red;
+
+        .preview {
+            display: none;
+        }
+
+        .status-msg.server-error {
+            display: block;
+        }
+    }
 }

wagtail/wagtailimages/templates/wagtailimages/multiple/add.html

@@ -57,6 +57,11 @@
             <div class="right col9">
                 <p class="status-msg success">{% trans "Upload successful. Please update this image with a more appropriate title, if necessary. You may also delete the image completely if the upload wasn't required." %}</p>
                 <p class="status-msg failure">{% trans "Sorry, upload failed." %}</p>
+                <p class="status-msg server-error">
+                    <strong>{% trans "Server Error" %}</strong>
+                    {% trans "Report this error to your webmaster with the following information:"%}
+                    <br /><span class="error-text"></span> - <span class="error-code"></span>
+                </p>
                 <p class="status-msg update-success">{% trans "Image updated." %}</p>
                 <p class="status-msg failure error_messages"></p>
             </div>