WordPress.org

Make WordPress Core

Changeset 20179


Ignore:
Timestamp:
03/15/2012 04:14:05 AM (6 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.