Media: Display WordPress and plupload error messages whenever an upload fails. see #22243, #22186, #21390.
git-svn-id: https://develop.svn.wordpress.org/trunk@22818 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
parent
f44d1d009e
commit
b007f89d0d
|
@ -738,9 +738,14 @@ a.media-modal-close {
|
||||||
}
|
}
|
||||||
|
|
||||||
.media-uploader-status .media-progress-bar {
|
.media-uploader-status .media-progress-bar {
|
||||||
|
display: none;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.uploading.media-uploader-status .media-progress-bar {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
.attachment-preview .media-progress-bar {
|
.attachment-preview .media-progress-bar {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
|
@ -750,17 +755,23 @@ a.media-modal-close {
|
||||||
}
|
}
|
||||||
|
|
||||||
.media-uploader-status {
|
.media-uploader-status {
|
||||||
|
position: relative;
|
||||||
padding-bottom: 10px;
|
padding-bottom: 10px;
|
||||||
border-bottom: 1px solid #dfdfdf;
|
border-bottom: 1px solid #dfdfdf;
|
||||||
box-shadow: 0 1px 0 #fff;
|
box-shadow: 0 1px 0 #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.media-uploader-status .upload-details {
|
.media-uploader-status .upload-details {
|
||||||
|
display: none;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #666;
|
color: #666;
|
||||||
text-shadow: 0 1px 0 #fff;
|
text-shadow: 0 1px 0 #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.uploading.media-uploader-status .upload-details {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
.media-uploader-status .upload-detail-separator {
|
.media-uploader-status .upload-detail-separator {
|
||||||
padding: 0 4px;
|
padding: 0 4px;
|
||||||
}
|
}
|
||||||
|
@ -769,6 +780,47 @@ a.media-modal-close {
|
||||||
color: #464646;
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
.uploader-window {
|
.uploader-window {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|
|
@ -32,9 +32,11 @@
|
||||||
}());
|
}());
|
||||||
|
|
||||||
// Makes it easier to bind events using transitions.
|
// Makes it easier to bind events using transitions.
|
||||||
media.transition = function( selector ) {
|
media.transition = function( selector, sensitivity ) {
|
||||||
var deferred = $.Deferred();
|
var deferred = $.Deferred();
|
||||||
|
|
||||||
|
sensitivity = sensitivity || 2000;
|
||||||
|
|
||||||
if ( $.support.transition ) {
|
if ( $.support.transition ) {
|
||||||
if ( ! (selector instanceof $) )
|
if ( ! (selector instanceof $) )
|
||||||
selector = $( selector );
|
selector = $( selector );
|
||||||
|
@ -42,6 +44,9 @@
|
||||||
// Resolve the deferred when the first element finishes animating.
|
// Resolve the deferred when the first element finishes animating.
|
||||||
selector.first().one( $.support.transition.end, deferred.resolve );
|
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.
|
// Otherwise, execute on the spot.
|
||||||
} else {
|
} else {
|
||||||
deferred.resolve();
|
deferred.resolve();
|
||||||
|
@ -1835,6 +1840,10 @@
|
||||||
className: 'media-uploader-status',
|
className: 'media-uploader-status',
|
||||||
template: media.template('uploader-status'),
|
template: media.template('uploader-status'),
|
||||||
|
|
||||||
|
events: {
|
||||||
|
'click .upload-dismiss-errors': 'dismiss'
|
||||||
|
},
|
||||||
|
|
||||||
initialize: function() {
|
initialize: function() {
|
||||||
this.controller = this.options.controller;
|
this.controller = this.options.controller;
|
||||||
|
|
||||||
|
@ -1844,6 +1853,8 @@
|
||||||
this.queue.on( 'add remove reset change:uploading', this.info, this );
|
this.queue.on( 'add remove reset change:uploading', this.info, this );
|
||||||
|
|
||||||
this.errors = wp.Uploader.errors;
|
this.errors = wp.Uploader.errors;
|
||||||
|
this.errors.on( 'add remove reset', this.visibility, this );
|
||||||
|
this.errors.on( 'add', this.error, this );
|
||||||
},
|
},
|
||||||
|
|
||||||
dispose: function() {
|
dispose: function() {
|
||||||
|
@ -1854,6 +1865,7 @@
|
||||||
|
|
||||||
visibility: function() {
|
visibility: function() {
|
||||||
this.$el.toggleClass( 'uploading', !! this.queue.length );
|
this.$el.toggleClass( 'uploading', !! this.queue.length );
|
||||||
|
this.$el.toggleClass( 'errors', !! this.errors.length );
|
||||||
this.$el.toggle( !! this.queue.length || !! this.errors.length );
|
this.$el.toggle( !! this.queue.length || !! this.errors.length );
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -1903,10 +1915,36 @@
|
||||||
|
|
||||||
this.$index.text( index + 1 );
|
this.$index.text( index + 1 );
|
||||||
this.$total.text( queue.length );
|
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')
|
||||||
|
});
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* wp.media.view.Toolbar
|
* wp.media.view.Toolbar
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -88,7 +88,7 @@ window.wp = window.wp || {};
|
||||||
file.attachment.destroy();
|
file.attachment.destroy();
|
||||||
|
|
||||||
Uploader.errors.unshift({
|
Uploader.errors.unshift({
|
||||||
message: message,
|
message: message || pluploadL10n.default_error,
|
||||||
data: data,
|
data: data,
|
||||||
file: file
|
file: file
|
||||||
});
|
});
|
||||||
|
@ -199,7 +199,7 @@ window.wp = window.wp || {};
|
||||||
if ( ! _.isObject( response ) || _.isUndefined( response.success ) )
|
if ( ! _.isObject( response ) || _.isUndefined( response.success ) )
|
||||||
return error( pluploadL10n.default_error, null, file );
|
return error( pluploadL10n.default_error, null, file );
|
||||||
else if ( ! response.success )
|
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 ) {
|
_.each(['file','loaded','size','percent'], function( key ) {
|
||||||
file.attachment.unset( key );
|
file.attachment.unset( key );
|
||||||
|
|
|
@ -1503,6 +1503,8 @@ function wp_print_media_templates( $attachment ) {
|
||||||
|
|
||||||
<script type="text/html" id="tmpl-uploader-status">
|
<script type="text/html" id="tmpl-uploader-status">
|
||||||
<h3><?php _e( 'Uploading' ); ?></h3>
|
<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="media-progress-bar"><div></div></div>
|
||||||
<div class="upload-details">
|
<div class="upload-details">
|
||||||
<span class="upload-count">
|
<span class="upload-count">
|
||||||
|
@ -1515,6 +1517,12 @@ function wp_print_media_templates( $attachment ) {
|
||||||
</div>
|
</div>
|
||||||
</script>
|
</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>
|
||||||
|
|
||||||
<script type="text/html" id="tmpl-attachment">
|
<script type="text/html" id="tmpl-attachment">
|
||||||
<div class="attachment-preview type-{{ data.type }} subtype-{{ data.subtype }} {{ data.orientation }}">
|
<div class="attachment-preview type-{{ data.type }} subtype-{{ data.subtype }} {{ data.orientation }}">
|
||||||
<# if ( data.uploading ) { #>
|
<# if ( data.uploading ) { #>
|
||||||
|
|
Loading…
Reference in New Issue