WordPress.org

Make WordPress Core

Changeset 21814


Ignore:
Timestamp:
09/11/2012 04:55:58 PM (7 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.