diff --git a/wp-includes/css/media-views.css b/wp-includes/css/media-views.css index 68e677ea65..fe5491f33c 100644 --- a/wp-includes/css/media-views.css +++ b/wp-includes/css/media-views.css @@ -797,15 +797,16 @@ a.media-modal-close { text-decoration: none; } -.media-uploader-status .upload-error { - margin: 8px 0 0 0; +.upload-errors .upload-error { + max-width: 400px; + margin: 8px auto 0 auto; padding: 8px; border: 1px #c00 solid; background: #ffebe8; border-radius: 3px; } -.media-uploader-status .upload-error-label { +.upload-errors .upload-error-label { padding: 2px 4px; margin-right: 8px; font-weight: bold; @@ -815,7 +816,7 @@ a.media-modal-close { border-radius: 3px; } -.media-uploader-status .upload-error-message { +.upload-errors .upload-error-message { display: block; padding-top: 8px; color: #b44; diff --git a/wp-includes/js/media-views.js b/wp-includes/js/media-views.js index 9398198414..f3ab57b0ff 100644 --- a/wp-includes/js/media-views.js +++ b/wp-includes/js/media-views.js @@ -1792,6 +1792,21 @@ if ( ! this.options.$browser && this.controller.uploader ) this.options.$browser = this.controller.uploader.$browser; + + wp.Uploader.errors.on( 'add', this.error, this ); + }, + + dispose: function() { + wp.Uploader.errors.off( null, null, this ); + media.View.prototype.dispose.apply( this, arguments ); + return this; + }, + + error: function( error ) { + this.views.set( '.upload-errors', new media.view.UploaderStatusError({ + filename: error.get('file').name, + message: error.get('message') + }) ); }, ready: function() { diff --git a/wp-includes/media.php b/wp-includes/media.php index 248c14eb4c..eab9e276a6 100644 --- a/wp-includes/media.php +++ b/wp-includes/media.php @@ -1497,6 +1497,8 @@ function wp_print_media_templates( $attachment ) { +
+