Changeset 22818

Timestamp:

11/22/2012 10:56:10 AM (14 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>