WordPress.org
Get WordPress

Make WordPress Core

Changeset 21814


Ignore:
Timestamp:
09/11/2012 04:55:58 PM (14 years ago)
Author:
koopersmith
Message:

Use JS Attachment models in wp.Uploader. fixes #21868.

Moves the uploading Attachments queue from the media workspace view to the uploader itself. This ensures that all attachments are added to the central attachmnet store.

Updates wp.Uploader to pass Attachment models to callbacks instead of Plupload file objects. Attachments in the process of uploading have a reference to the file object (which can be fetched by calling attachment.get('file');).

Also updates the customizer to be compatible with the API changes.

Location:
trunk
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/wp-admin/includes/ajax-actions.php

    r21682 r21814  
    16121612
    16131613        if ( ! current_user_can( 'upload_files' ) )
    1614                 wp_die( -1 );
     1614                wp_send_json_error();
    16151615
    16161616        if ( isset( $_REQUEST['post_id'] ) ) {
    16171617                $post_id = $_REQUEST['post_id'];
    16181618                if ( ! current_user_can( 'edit_post', $post_id ) )
    1619                         wp_die( -1 );
     1619                        wp_send_json_error();
    16201620        } else {
    16211621                $post_id = null;
    … …  
    16271627
    16281628        if ( is_wp_error( $attachment_id ) ) {
    1629                 echo json_encode( array(
    1630                         'type' => 'error',
    1631                         'data' => array(
    1632                                 'message'  => $attachment_id->get_error_message(),
    1633                                 'filename' => $_FILES['async-upload']['name'],
    1634                         ),
     1629                wp_send_json_error( array(
     1630                        'message'  => $attachment_id->get_error_message(),
     1631                        'filename' => $_FILES['async-upload']['name'],
    16351632                ) );
    1636                 wp_die();
    16371633        }
    16381634
    … …  
    16451641        }
    16461642
    1647         $post = get_post( $attachment_id );
    1648 
    1649         echo json_encode( array(
    1650                 'type' => 'success',
    1651                 'data' => array(
    1652                         'id'       => $attachment_id,
    1653                         'title'    => esc_attr( $post->post_title ),
    1654                         'filename' => esc_html( basename( $post->guid ) ),
    1655                         'url'      => wp_get_attachment_url( $attachment_id ),
    1656                         'meta'     => wp_get_attachment_metadata( $attachment_id ),
    1657                 ),
    1658         ) );
    1659         wp_die();
     1643        if ( ! $attachment = wp_prepare_attachment_for_js( $attachment_id ) )
     1644                wp_send_json_error();
     1645
     1646        wp_send_json_success( $attachment );
    16601647}
    16611648

  • trunk/wp-admin/js/customize-controls.js

    r21592 r21814  
    169169                },
    170170                success: function( attachment ) {
    171                         this.setting.set( attachment.url );
     171                        this.setting.set( attachment.get('url') );
    172172                },
    173173                removerVisibility: function( to ) {
    … …  
    273273                                this.tabs.uploaded.both.removeClass('hidden');
    274274
     275                                // @todo: Do NOT store this on the attachment model. That is bad.
    275276                                attachment.element = $( '<a href="#" class="thumbnail"></a>' )
    276                                         .data( 'customizeImageValue', attachment.url )
    277                                         .append( '<img src="' +  attachment.url+ '" />' )
     277                                        .data( 'customizeImageValue', attachment.get('url') )
     278                                        .append( '<img src="' +  attachment.get('url')+ '" />' )
    278279                                        .appendTo( this.tabs.uploaded.target );
    279280                        }
    … …  
    946947
    947948                                data = {
    948                                         attachment_id: attachment.id,
    949                                         url:           attachment.url,
    950                                         thumbnail_url: attachment.url,
    951                                         height:        attachment.meta.height,
    952                                         width:         attachment.meta.width
     949                                        attachment_id: attachment.get('id'),
     950                                        url:           attachment.get('url'),
     951                                        thumbnail_url: attachment.get('url'),
     952                                        height:        attachment.get('height'),
     953                                        width:         attachment.get('width')
    953954                                };
    954955
    955956                                attachment.element.data( 'customizeHeaderImageData', data );
    956957                                control.settings.data.set( data );
    957                         }
     958                        };
    958959                });
    959960

  • trunk/wp-includes/js/media-views.js

    r21784 r21814  
    280280
    281281                        // Track uploading attachments.
    282                         this.pending = new Attachments( [], { query: false });
    283                         this.pending.on( 'add remove reset change:percent', function() {
    284                                 this.$el.toggleClass( 'uploading', !! this.pending.length );
    285 
    286                                 if ( ! this.$bar || ! this.pending.length )
    287                                         return;
    288 
    289                                 this.$bar.width( ( this.pending.reduce( function( memo, attachment ) {
    290                                         if ( attachment.get('uploading') )
    291                                                 return memo + ( attachment.get('percent') || 0 );
    292                                         else
    293                                                 return memo + 100;
    294                                 }, 0 ) / this.pending.length ) + '%' );
    295                         }, this );
     282                        wp.Uploader.queue.on( 'add remove reset change:percent', this.renderUploadProgress, this );
    296283                },
    297284
    298285                render: function() {
    299286                        this.attachmentsView.render();
     287                        this.renderUploadProgress();
    300288                        this.$el.html( this.template( this.options ) ).append( this.$content );
    301                         this.$bar = this.$('.media-progress-bar div');
     289                        this.$bar = this.$('.upload-attachments .media-progress-bar div');
    302290                        return this;
    303291                },
    … …  
    313301                                container: this.$el,
    314302                                dropzone:  this.$el,
    315                                 browser:   this.$('.upload-attachments a'),
    316 
    317                                 added: function( file ) {
    318                                         file.attachment = Attachment.create( _.extend({
    319                                                 file: file,
    320                                                 uploading: true,
    321                                                 date: new Date()
    322                                         }, _.pick( file, 'loaded', 'size', 'percent' ) ) );
    323 
    324                                         workspace.pending.add( file.attachment );
    325                                 },
    326 
    327                                 progress: function( file ) {
    328                                         file.attachment.set( _.pick( file, 'loaded', 'percent' ) );
    329                                 },
    330 
    331                                 success: function( resp, file ) {
    332                                         var complete;
    333 
    334                                         _.each(['file','loaded','size','uploading','percent'], function( key ) {
    335                                                 file.attachment.unset( key );
    336                                         });
    337 
    338                                         file.attachment.set( 'id', resp.id );
    339                                         Attachment.get( resp.id, file.attachment ).fetch();
    340 
    341                                         complete = workspace.pending.all( function( attachment ) {
    342                                                 return ! attachment.get('uploading');
    343                                         });
    344 
    345                                         if ( complete )
    346                                                 workspace.pending.reset();
    347                                 },
    348 
    349                                 error: function( message, error, file ) {
    350                                         file.attachment.destroy();
    351                                 }
     303                                browser:   this.$('.upload-attachments a')
    352304                        }, this.options.uploader ) );
     305                },
     306
     307                renderUploadProgress: function() {
     308                        var queue = wp.Uploader.queue;
     309
     310                        this.$el.toggleClass( 'uploading', !! queue.length );
     311
     312                        if ( ! this.$bar || ! queue.length )
     313                                return;
     314
     315                        this.$bar.width( ( queue.reduce( function( memo, attachment ) {
     316                                if ( attachment.get('uploading') )
     317                                        return memo + ( attachment.get('percent') || 0 );
     318                                else
     319                                        return memo + 100;
     320                        }, 0 ) / queue.length ) + '%' );
    353321                },
    354322

  • trunk/wp-includes/js/plupload/wp-plupload.js

    r21722 r21814  
    2929                                dropzone:  'drop_element'
    3030                        },
    31                         key;
     31                        key, error;
    3232
    3333                this.supports = {
    … …  
    8484                this.param( this.params || {} );
    8585                delete this.params;
     86
     87                error = function( message, data, file ) {
     88                        if ( file.attachment )
     89                                file.attachment.destroy();
     90                        self.error( message, data, file );
     91                };
    8692
    8793                this.uploader.init();
    … …  
    135141                }
    136142
     143                this.uploader.bind( 'FilesAdded', function( up, files ) {
     144                        _.each( files, function( file ) {
     145                                file.attachment = wp.media.model.Attachment.create( _.extend({
     146                                        file:      file,
     147                                        uploading: true,
     148                                        date:      new Date()
     149                                }, _.pick( file, 'loaded', 'size', 'percent' ) ) );
     150
     151                                Uploader.queue.add( file.attachment );
     152
     153                                self.added( file.attachment );
     154                        });
     155
     156                        up.refresh();
     157                        up.start();
     158                });
     159
    137160                this.uploader.bind( 'UploadProgress', function( up, file ) {
    138                         self.progress( file );
     161                        file.attachment.set( _.pick( file, 'loaded', 'percent' ) );
     162                        self.progress( file.attachment );
    139163                });
    140164
    141165                this.uploader.bind( 'FileUploaded', function( up, file, response ) {
     166                        var complete;
     167
    142168                        try {
    143169                                response = JSON.parse( response.response );
    144170                        } catch ( e ) {
    145                                 return self.error( pluploadL10n.default_error, e );
    146                         }
    147 
    148                         if ( ! response || ! response.type || ! response.data )
    149                                 return self.error( pluploadL10n.default_error );
    150 
    151                         if ( 'error' === response.type )
    152                                 return self.error( response.data.message, response.data, file );
    153 
    154                         if ( 'success' === response.type )
    155                                 return self.success( response.data, file );
    156 
     171                                return error( pluploadL10n.default_error, e, file );
     172                        }
     173
     174                        if ( ! _.isObject( response ) || _.isUndefined( response.success ) )
     175                                return error( pluploadL10n.default_error, null, file );
     176                        else if ( ! response.success )
     177                                return error( response.data.message, response.data, file );
     178
     179                        _.each(['file','loaded','size','uploading','percent'], function( key ) {
     180                                file.attachment.unset( key );
     181                        });
     182
     183                        file.attachment.set( response.data );
     184                        wp.media.model.Attachment.get( response.data.id, file.attachment );
     185
     186                        complete = Uploader.queue.all( function( attachment ) {
     187                                return ! attachment.get('uploading');
     188                        });
     189
     190                        if ( complete )
     191                                Uploader.queue.reset();
     192
     193                        self.success( file.attachment );
    157194                });
    158195
    … …  
    169206                        }
    170207
    171                         self.error( message, error, error.file );
     208                        error( message, error, error.file );
    172209                        up.refresh();
    173                 });
    174 
    175                 this.uploader.bind( 'FilesAdded', function( up, files ) {
    176                         $.each( files, function() {
    177                                 self.added( this );
    178                         });
    179 
    180                         up.refresh();
    181                         up.start();
    182210                });
    183211
    … …  
    238266        });
    239267
     268        Uploader.queue = new wp.media.model.Attachments( [], { query: false });
     269
    240270        exports.Uploader = Uploader;
    241271})( wp, jQuery );

  • trunk/wp-includes/script-loader.php

    r21770 r21814  
    233233        did_action( 'init' ) && $scripts->localize( 'plupload-handlers', 'pluploadL10n', $uploader_l10n );
    234234
    235         $scripts->add( 'wp-plupload', "/wp-includes/js/plupload/wp-plupload$suffix.js", array('plupload-all', 'jquery', 'json2') );
     235        $scripts->add( 'wp-plupload', "/wp-includes/js/plupload/wp-plupload$suffix.js", array('plupload-all', 'jquery', 'json2', 'media-models'), false, 1 );
    236236        did_action( 'init' ) && $scripts->localize( 'wp-plupload', 'pluploadL10n', $uploader_l10n );
    237237
Note: See TracChangeset for help on using the changeset viewer.