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: https://develop.svn.wordpress.org/trunk@22543 602fd350-edb4-49c9-b593-d223f7449a82

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

@@ -1954,14 +1954,19 @@
 		render: function() {
 			var attachment = this.model.toJSON(),
 				options = _.defaults( this.model.toJSON(), {
-					orientation: 'landscape',
-					uploading:   false,
-					type:        '',
-					subtype:     '',
-					icon:        '',
-					filename:    '',
-					caption:     '',
-					title:       ''
+					orientation:   'landscape',
+					uploading:     false,
+					type:          '',
+					subtype:       '',
+					icon:          '',
+					filename:      '',
+					caption:       '',
+					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>