From f1fe50703236bde6ac9890fab6aa7fea265e98b4 Mon Sep 17 00:00:00 2001
From: Andrew Ozz <azaozz@git.wordpress.org>
Date: Mon, 25 Aug 2014 22:44:32 +0000
Subject: [PATCH] Media modal: fix the progress bar in the attachment
 thumbnail. Props gcorne, fixes #29367

git-svn-id: https://develop.svn.wordpress.org/trunk@29609 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-includes/js/media-views.js  | 8 +++++++-
 src/wp-includes/media-template.php | 2 +-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/wp-includes/js/media-views.js b/src/wp-includes/js/media-views.js
index 5098da8029..233db54420 100644
--- a/src/wp-includes/js/media-views.js
+++ b/src/wp-includes/js/media-views.js
@@ -4680,12 +4680,13 @@
 
 			if ( options.rerenderOnModelChange ) {
 				this.model.on( 'change', this.render, this );
+			} else {
+				this.model.on( 'change:percent', this.progress, this );
 			}
 			this.model.on( 'change:title', this._syncTitle, this );
 			this.model.on( 'change:caption', this._syncCaption, this );
 			this.model.on( 'change:artist', this._syncArtist, this );
 			this.model.on( 'change:album', this._syncAlbum, this );
-			this.model.on( 'change:percent', this.progress, this );
 
 			// Update the selection.
 			this.model.on( 'add', this.select, this );
@@ -4753,10 +4754,15 @@
 				options.allowLocalEdits = true;
 			}
 
+			if ( options.uploading && ! options.percent ) {
+				options.percent = 0;
+			}
+
 			this.views.detach();
 			this.$el.html( this.template( options ) );
 
 			this.$el.toggleClass( 'uploading', options.uploading );
+
 			if ( options.uploading ) {
 				this.$bar = this.$('.media-progress-bar div');
 			} else {
diff --git a/src/wp-includes/media-template.php b/src/wp-includes/media-template.php
index ef7c577142..7609a408f0 100644
--- a/src/wp-includes/media-template.php
+++ b/src/wp-includes/media-template.php
@@ -428,7 +428,7 @@ function wp_print_media_templates() {
 		<div class="attachment-preview js--select-attachment type-{{ data.type }} subtype-{{ data.subtype }} {{ data.orientation }}">
 			<div class="thumbnail">
 				<# if ( data.uploading ) { #>
-					<div class="media-progress-bar"><div>
+					<div class="media-progress-bar"><div style="width: {{ data.percent }}%"></div></div>
 				<# } else if ( 'image' === data.type && data.sizes ) { #>
 					<div class="centered">
 						<img src="{{ data.size.url }}" draggable="false" alt="" />