Ticket #29367: 29367-01.patch

wp-includes/js/media-views.js

@@ -4699 +4699 @@
 
                         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 );
@@ -4772 +4773 @@
                                 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 {

wp-includes/media-template.php

@@ -428 +428 @@
                 <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="" />