Changeset 22818

Timestamp:

11/22/2012 10:56:10 AM (12 years ago)

Author:

koopersmith

Message:

Media: Display WordPress and plupload error messages whenever an upload fails. see #22243, #22186, #21390.

Location:

trunk/wp-includes

Files:

• css/media-views.css (modified) (5 diffs)
• js/media-views.js (modified) (6 diffs)
• js/plupload/wp-plupload.js (modified) (2 diffs)
• media.php (modified) (2 diffs)

trunk/wp-includes/css/media-views.css

@@ -739 +739 @@
 
 .media-uploader-status .media-progress-bar {
-    width: 100%;
+    display: none;
+    width: 100%;
+}
+
+.uploading.media-uploader-status .media-progress-bar {
+    display: block;
 }
 
@@ -751 +756 @@
 
 .media-uploader-status {
+    position: relative;
     padding-bottom: 10px;
     border-bottom: 1px solid #dfdfdf;
@@ -757 +763 @@
 
 .media-uploader-status .upload-details {
+    display: none;
     font-size: 12px;
     color: #666;
@@ -762 +769 @@
 }
 
+.uploading.media-uploader-status .upload-details {
+    display: block;
+}
+
 .media-uploader-status .upload-detail-separator {
     padding: 0 4px;
@@ -768 +779 @@
 .media-uploader-status .upload-count {
     color: #464646;
+}
+
+.media-uploader-status .upload-dismiss-errors,
+.media-uploader-status .upload-errors {
+    display: none;
+}
+
+.errors.media-uploader-status .upload-dismiss-errors,
+.errors.media-uploader-status .upload-errors {
+    display: block;
+}
+
+.media-uploader-status .upload-dismiss-errors {
+    position: absolute;
+    top: 0;
+    right: 0;
+    text-decoration: none;
+}
+
+.media-uploader-status .upload-error {
+    margin: 8px 0 0 0;
+    padding: 8px;
+    border: 1px #c00 solid;
+    background: #ffebe8;
+    border-radius: 3px;
+}
+
+.media-uploader-status .upload-error-label {
+    padding: 2px 4px;
+    margin-right: 8px;
+    font-weight: bold;
+    color: #fff;
+    background: #f00;
+    background: -webkit-linear-gradient( top, #e00, #a00 );
+    border-radius: 3px;
+}
+
+.media-uploader-status .upload-error-message {
+    display: block;
+    padding-top: 8px;
+    color: #b44;
 }
 

trunk/wp-includes/js/media-views.js

@@ -33 +33 @@
 
     // Makes it easier to bind events using transitions.
-    media.transition = function( selector ) {
+    media.transition = function( selector, sensitivity ) {
         var deferred = $.Deferred();
+
+        sensitivity = sensitivity || 2000;
 
         if ( $.support.transition ) {
@@ -42 +44 @@
             // Resolve the deferred when the first element finishes animating.
             selector.first().one( $.support.transition.end, deferred.resolve );
+
+            // Just in case the event doesn't trigger, fire a callback.
+            _.delay( deferred.resolve, sensitivity );
 
         // Otherwise, execute on the spot.
@@ -1836 +1841 @@
         template:  media.template('uploader-status'),
 
+        events: {
+            'click .upload-dismiss-errors': 'dismiss'
+        },
+
         initialize: function() {
             this.controller = this.options.controller;
@@ -1845 +1854 @@
 
             this.errors = wp.Uploader.errors;
+            this.errors.on( 'add remove reset', this.visibility, this );
+            this.errors.on( 'add', this.error, this );
         },
 
@@ -1855 +1866 @@
         visibility: function() {
             this.$el.toggleClass( 'uploading', !! this.queue.length );
+            this.$el.toggleClass( 'errors', !! this.errors.length );
             this.$el.toggle( !! this.queue.length || !! this.errors.length );
         },
@@ -1904 +1916 @@
             this.$index.text( index + 1 );
             this.$total.text( queue.length );
-            this.$filename.html( active ? media.truncate( _.escape( active.get('filename') ), 24 ) : '' );
-        }
+            this.$filename.html( active ? this.filename( active.get('filename') ) : '' );
+        },
+
+        filename: function( filename ) {
+            return media.truncate( _.escape( filename ), 24 );
+        },
+
+        error: function( error ) {
+            this.views.add( '.upload-errors', new media.view.UploaderStatusError({
+                filename: this.filename( error.get('file').name ),
+                message:  error.get('message')
+            }), { at: 0 });
+        },
+
+        dismiss: function( event ) {
+            var errors = this.views.get('.upload-errors');
+
+            event.preventDefault();
+
+            if ( errors )
+                _.invoke( errors, 'remove' );
+            wp.Uploader.errors.reset();
+        }
+    });
+
+    media.view.UploaderStatusError = media.View.extend({
+        className: 'upload-error',
+        template:  media.template('uploader-status-error')
     });
 

trunk/wp-includes/js/plupload/wp-plupload.js

@@ -89 +89 @@
 
             Uploader.errors.unshift({
-                message: message,
+                message: message || pluploadL10n.default_error,
                 data:    data,
                 file:    file
@@ -200 +200 @@
                 return error( pluploadL10n.default_error, null, file );
             else if ( ! response.success )
-                return error( response.data.message, response.data, file );
+                return error( response.data && response.data.message, response.data, file );
 
             _.each(['file','loaded','size','percent'], function( key ) {

trunk/wp-includes/media.php

@@ -1504 +1504 @@
     <script type="text/html" id="tmpl-uploader-status">
         <h3><?php _e( 'Uploading' ); ?></h3>
+        <a class="upload-dismiss-errors" href="#"><?php _e('Dismiss Errors'); ?></a>
+
         <div class="media-progress-bar"><div></div></div>
         <div class="upload-details">
@@ -1514 +1516 @@
         <div class="upload-errors">
         </div>
+    </script>
+
+    <script type="text/html" id="tmpl-uploader-status-error">
+        <span class="upload-error-label"><?php _e('Error'); ?></span>
+        <span class="upload-error-filename">{{{ data.filename }}}</span>
+        <span class="upload-error-message">{{ data.message }}</span>
     </script>