Media: Ensure variables in the attachment details template have defined defaults.

* Adds styling to the upload progress bar in the attachment details template.
* Defines the `filename` attribute when Plupload creates the client-side `Attachment` model.

fixes #22410, see #21390.


git-svn-id: http://core.svn.wordpress.org/trunk@22543 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/css/media-views.css

@@ -933,6 +933,16 @@
 	margin-bottom: 5px;
 }
 
+.uploading .attachment-info .thumbnail {
+	width: 120px;
+	height: 80px;
+	box-shadow: inset 0 0 15px rgba( 0, 0, 0, 0.1 );
+}
+
+.uploading .attachment-info .media-progress-bar {
+	margin-top: 32px;
+}
+
 .attachment-info .thumbnail:after {
 	content: '';
 	display: block;

wp-includes/js/media-views.js

@@ -1961,7 +1961,12 @@
 					icon:          '',
 					filename:      '',
 					caption:       '',
-					title:       ''
+					title:         '',
+					dateFormatted: '',
+					width:         '',
+					height:        '',
+					compat:        false,
+					alt:           ''
 				});
 
 			options.buttons  = this.buttons;
@@ -1972,6 +1977,7 @@
 
 			this.$el.html( this.template( options ) );
 
+			this.$el.toggleClass( 'uploading', options.uploading );
 			if ( options.uploading )
 				this.$bar = this.$('.media-progress-bar div');
 			else

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

@@ -147,7 +147,8 @@ window.wp = window.wp || {};
 				attributes = _.extend({
 					file:      file,
 					uploading: true,
-					date:      new Date()
+					date:      new Date(),
+					filename:  file.name
 				}, _.pick( file, 'loaded', 'size', 'percent' ) );
 
 				// Handle early mime type scanning for images.

wp-includes/media.php

@@ -1454,7 +1454,7 @@ function wp_print_media_templates( $attachment ) {
 			<div class="details">
 				<div class="filename">{{ filename }}</div>
 				<div class="uploaded">{{ dateFormatted }}</div>
-				<# if ( 'image' === type ) { #>
+				<# if ( 'image' === type && ! uploading ) { #>
 					<div class="dimensions">{{ width }} &times; {{ height }}</div>
 				<# } #>
 			</div>