Ticket #28750: 28750.patch

src/wp-includes/js/media-views.js

@@ -4568 +4568 @@
                         this.model.on( 'change:title', this._syncTitle, this );
                         this.model.on( 'change:caption', this._syncCaption, this );
                         this.model.on( 'change:percent', this.progress, this );
+                        this.model.on( 'change:preview', this.preview, this );
 
                         // Update the selection.
                         this.model.on( 'add', this.select, this );
@@ -4662 +4663 @@
                                 this.$bar.width( this.model.get('percent') + '%' );
                         }
                 },
+
+                preview: function() {
+                        console.log( this.$el );
+                },
+
                 /**
                  * @param {Object} event
                  */

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

@@ -174 +174 @@
 
                 this.uploader.bind( 'FilesAdded', function( up, files ) {
                         _.each( files, function( file ) {
-                                var attributes, image;
+                                var attributes, image, reader;
+
+                                if ( window.FileReader ) {
+                                        reader = new FileReader();
+                                }
 
                                 // Ignore failed uploads.
                                 if ( plupload.FAILED === file.status ) {
@@ -201 +205 @@
                                         // `jpeg`, `png` and `gif` are valid subtypes.
                                         // `jpg` is not, so map it to `jpeg`.
                                         attributes.subtype = ( 'jpg' === image[0] ) ? 'jpeg' : image[0];
+
+                                        if ( reader ) {
+                                                reader.onload = function ( event ) {
+                                                        $( reader ).trigger( 'preview', event.target.result );
+                                                };
+        
+                                                reader.readAsDataURL( file.getNative() );
+                                        }
                                 }
 
                                 // Create the `Attachment`.
                                 file.attachment = wp.media.model.Attachment.create( attributes );
 
+                                reader && $( reader ).on( 'preview', function( event, preview ) {
+                                        file.attachment.set( { preview: preview } );
+                                });
+
                                 Uploader.queue.add( file.attachment );
 
                                 self.added( file.attachment );

src/wp-includes/media-template.php

@@ -393 +393 @@
                 <# } #>
                 <div class="attachment-preview type-{{ data.type }} subtype-{{ data.subtype }} {{ data.orientation }}">
                         <# if ( data.uploading ) { #>
+                                <# if ( data.preview ) { #>
+                                        <div class="thumbnail">
+                                                <div class="centered">
+                                                        <img src="{{ data.preview }}" draggable="false" alt="" style="opacity: 0.5" />
+                                                </div>
+                                        </div>
+                                <# } #>
                                 <div class="media-progress-bar"><div></div></div>
                         <# } else if ( 'image' === data.type ) { #>
                                 <div class="thumbnail">