WordPress.org

Make WordPress Core

Changeset 20179


Ignore:
Timestamp:
03/15/12 04:14:05 (3 years ago)
Author:
koopersmith
Message:

Theme Customizer: First pass for upload controls, using background image as an example. Add a wrapper for Plupload that allows for custom upload UIs. see #19910.

wp.Uploader is a wrapper that provides a simple way to upload an attachment (using the wp_ajax_upload_attachment handler). It is intentionally decoupled from the UI. When an upload succeeds, it will receive the attachment information (id, url, meta, etc) as a JSON response. If the upload fails, the wrapper handles both WordPress and plupload errors through a single handler.

As todos, we should add drag classes for the uploader dropzone and account for the rough 100mb filesize limit in most browsers. The UI for the customizer upload controls could be improved as well.

Location:
trunk
Files:
2 added
7 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-admin/admin-ajax.php

    r19917 r20179  
    4646    'sample-permalink', 'inline-save', 'inline-save-tax', 'find_posts', 'widgets-order', 
    4747    'save-widget', 'set-post-thumbnail', 'date_format', 'time_format', 'wp-fullscreen-save-post', 
    48     'wp-remove-post-lock', 'dismiss-wp-pointer', 
     48    'wp-remove-post-lock', 'dismiss-wp-pointer', 'upload-attachment', 
    4949); 
    5050 
  • trunk/wp-admin/includes/ajax-actions.php

    r20072 r20179  
    15451545} 
    15461546 
     1547function wp_ajax_upload_attachment() { 
     1548    check_ajax_referer( 'media-form' ); 
     1549 
     1550    if ( ! current_user_can( 'upload_files' ) ) 
     1551        wp_die( -1 ); 
     1552 
     1553    if ( isset( $_REQUEST['post_id'] ) ) { 
     1554        $post_id = $_REQUEST['post_id']; 
     1555        if ( ! current_user_can( 'edit_post', $post_id ) ) 
     1556            wp_die( -1 ); 
     1557    } else { 
     1558        $post_id = null; 
     1559    } 
     1560 
     1561    $post_data = is_array( $_REQUEST['post_data'] ) ? $_REQUEST['post_data'] : array(); 
     1562 
     1563    $attachment_id = media_handle_upload( 'async-upload', $post_id, $post_data ); 
     1564 
     1565    if ( is_wp_error( $attachment_id ) ) { 
     1566        echo json_encode( array( 
     1567            'type' => 'error', 
     1568            'data' => array( 
     1569                'message'  => $attachment_id->get_error_message(), 
     1570                'filename' => $_FILES['async-upload']['name'], 
     1571            ), 
     1572        ) ); 
     1573        wp_die(); 
     1574    } 
     1575 
     1576    $post = get_post( $attachment_id ); 
     1577 
     1578    echo json_encode( array( 
     1579        'type' => 'success', 
     1580        'data' => array( 
     1581            'id'       => $attachment_id, 
     1582            'title'    => esc_attr( $post->post_title ), 
     1583            'filename' => esc_html( basename( $post->guid ) ), 
     1584            'url'      => wp_get_attachment_url( $attachment_id ), 
     1585            'meta'     => wp_get_attachment_metadata( $attachment_id ), 
     1586        ), 
     1587    ) ); 
     1588    wp_die(); 
     1589} 
     1590 
    15471591function wp_ajax_image_editor() { 
    15481592    $attachment_id = intval($_POST['postid']); 
  • trunk/wp-includes/class-wp-customize-setting.php

    r20136 r20179  
    7070                wp_enqueue_script( 'farbtastic' ); 
    7171                wp_enqueue_style( 'farbtastic' ); 
     72                break; 
     73            case 'upload': 
     74                wp_enqueue_script( 'wp-plupload' ); 
    7275                break; 
    7376        } 
     
    395398                <?php 
    396399                break; 
     400            case 'upload': 
     401                ?> 
     402                <label><?php echo esc_html( $this->label ); ?><br/> 
     403                    <input type="hidden" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->name(); ?> /> 
     404                    <a href="#" class="button-secondary upload"><?php _e( 'Upload' ); ?></a> 
     405                    <a href="#" class="remove"><?php _e( 'Remove' ); ?></a> 
     406                </label> 
     407                <?php 
     408                break; 
    397409            default: 
    398410                do_action( 'customize_render_control-' . $this->control, $this ); 
  • trunk/wp-includes/class-wp-customize.php

    r20133 r20179  
    524524            'control'           => 'color', 
    525525            'default'           => defined( 'BACKGROUND_COLOR' ) ? BACKGROUND_COLOR : '', 
    526             'sanitize_callback' => 'sanitize_hexcolor' 
     526            'sanitize_callback' => 'sanitize_hexcolor', 
     527        ) ); 
     528 
     529        $this->add_setting( 'background_image', array( 
     530            'label'             => 'Background Image', 
     531            'section'           => 'background', 
     532            'control'           => 'upload', 
    527533        ) ); 
    528534 
  • trunk/wp-includes/js/customize-controls.dev.js

    r20128 r20179  
    6868        validate: function( to ) { 
    6969            return /^[a-fA-F0-9]{3}([a-fA-F0-9]{3})?$/.test( to ) ? to : null; 
     70        } 
     71    }); 
     72 
     73    api.UploadControl = api.Control.extend({ 
     74        initialize: function( id, value, options ) { 
     75            var control = this; 
     76 
     77            api.Control.prototype.initialize.call( this, id, value, options ); 
     78 
     79            this.uploader = new wp.Uploader({ 
     80                browser: this.container.find('.upload'), 
     81                success: function( attachment ) { 
     82                    control.set( attachment.url ); 
     83                } 
     84            }); 
     85 
     86            this.container.on( 'click', '.remove', function( event ) { 
     87                control.set(''); 
     88                event.preventDefault(); 
     89            }); 
    7090        } 
    7191    }); 
     
    195215 
    196216    api.controls = { 
    197         color: api.ColorControl 
     217        color:  api.ColorControl, 
     218        upload: api.UploadControl 
    198219    }; 
    199220 
     
    230251        // Background color uses postMessage by default 
    231252        api('background_color').method = 'postMessage'; 
     253 
     254        // api('background_image').method = 'postMessage'; 
     255        api('background_image').uploader.param( 'post_data', { context: 'custom-background' }); 
    232256    }); 
    233257 
  • trunk/wp-includes/media.php

    r19871 r20179  
    14421442    return apply_filters( 'embed_googlevideo', '<embed type="application/x-shockwave-flash" src="http://video.google.com/googleplayer.swf?docid=' . esc_attr($matches[2]) . '&amp;hl=en&amp;fs=true" style="width:' . esc_attr($width) . 'px;height:' . esc_attr($height) . 'px" allowFullScreen="true" allowScriptAccess="always" />', $matches, $attr, $url, $rawattr ); 
    14431443} 
     1444 
     1445/** 
     1446 * Prints default plupload arguments. 
     1447 * 
     1448 * @since 3.4.0 
     1449 */ 
     1450function wp_plupload_default_settings() { 
     1451    global $wp_scripts; 
     1452 
     1453    $max_upload_size = wp_max_upload_size(); 
     1454 
     1455    $params = array( 
     1456        'action' => 'upload-attachment', 
     1457    ); 
     1458    $params = apply_filters( 'plupload_default_params', $params ); 
     1459 
     1460    $params['_wpnonce'] = wp_create_nonce( 'media-form' ); 
     1461 
     1462    $settings = array( 
     1463        'runtimes'            => 'html5,silverlight,flash,html4', 
     1464        'file_data_name'      => 'async-upload', // key passed to $_FILE. 
     1465        'multiple_queues'     => true, 
     1466        'max_file_size'       => $max_upload_size . 'b', 
     1467        'url'                 => admin_url( 'admin-ajax.php' ), 
     1468        'flash_swf_url'       => includes_url( 'js/plupload/plupload.flash.swf' ), 
     1469        'silverlight_xap_url' => includes_url( 'js/plupload/plupload.silverlight.xap' ), 
     1470        'filters'             => array( array( 'title' => __( 'Allowed Files' ), 'extensions' => '*') ), 
     1471        'multipart'           => true, 
     1472        'urlstream_upload'    => true, 
     1473        'multipart_params'    => $params, 
     1474    ); 
     1475 
     1476    $settings = apply_filters( 'plupload_default_settings', $settings ); 
     1477 
     1478    $script = 'var wpPluploadDefaults = ' . json_encode( $settings ) . ';'; 
     1479 
     1480    $data = $wp_scripts->get_data( 'wp-plupload', 'data' ); 
     1481    if ( $data ) 
     1482        $script = "$data\n$script"; 
     1483 
     1484    $wp_scripts->add_data( 'wp-plupload', 'data', $script ); 
     1485} 
     1486add_action( 'admin_init', 'wp_plupload_default_settings' ); 
  • trunk/wp-includes/script-loader.php

    r20133 r20179  
    229229    $scripts->localize( 'plupload-handlers', 'pluploadL10n', $uploader_l10n ); 
    230230 
     231    $scripts->add( 'wp-plupload', "/wp-includes/js/plupload/wp-plupload$suffix.js", array('plupload-all', 'jquery', 'json2') ); 
     232    $scripts->localize( 'wp-plupload', 'pluploadL10n', $uploader_l10n ); 
     233 
    231234    // keep 'swfupload' for back-compat. 
    232235    $scripts->add( 'swfupload', '/wp-includes/js/swfupload/swfupload.js', array(), '2201-20110113'); 
Note: See TracChangeset for help on using the changeset viewer.