Changeset 20179

Timestamp:

03/15/2012 04:14:05 AM (13 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:

• wp-admin/admin-ajax.php (modified) (1 diff)
• wp-admin/includes/ajax-actions.php (modified) (1 diff)
• wp-includes/class-wp-customize-setting.php (modified) (2 diffs)
• wp-includes/class-wp-customize.php (modified) (1 diff)
• wp-includes/js/customize-controls.dev.js (modified) (3 diffs)
• wp-includes/js/plupload/wp-plupload.dev.js (added)
• wp-includes/js/plupload/wp-plupload.js (added)
• wp-includes/media.php (modified) (1 diff)
• wp-includes/script-loader.php (modified) (1 diff)

trunk/wp-admin/admin-ajax.php

@@ -46 +46 @@
     'sample-permalink', 'inline-save', 'inline-save-tax', 'find_posts', 'widgets-order',
     'save-widget', 'set-post-thumbnail', 'date_format', 'time_format', 'wp-fullscreen-save-post',
-    'wp-remove-post-lock', 'dismiss-wp-pointer',
+    'wp-remove-post-lock', 'dismiss-wp-pointer', 'upload-attachment',
 );
 

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

@@ -1545 +1545 @@
 }
 
+function wp_ajax_upload_attachment() {
+    check_ajax_referer( 'media-form' );
+
+    if ( ! current_user_can( 'upload_files' ) )
+        wp_die( -1 );
+
+    if ( isset( $_REQUEST['post_id'] ) ) {
+        $post_id = $_REQUEST['post_id'];
+        if ( ! current_user_can( 'edit_post', $post_id ) )
+            wp_die( -1 );
+    } else {
+        $post_id = null;
+    }
+
+    $post_data = is_array( $_REQUEST['post_data'] ) ? $_REQUEST['post_data'] : array();
+
+    $attachment_id = media_handle_upload( 'async-upload', $post_id, $post_data );
+
+    if ( is_wp_error( $attachment_id ) ) {
+        echo json_encode( array(
+            'type' => 'error',
+            'data' => array(
+                'message'  => $attachment_id->get_error_message(),
+                'filename' => $_FILES['async-upload']['name'],
+            ),
+        ) );
+        wp_die();
+    }
+
+    $post = get_post( $attachment_id );
+
+    echo json_encode( array(
+        'type' => 'success',
+        'data' => array(
+            'id'       => $attachment_id,
+            'title'    => esc_attr( $post->post_title ),
+            'filename' => esc_html( basename( $post->guid ) ),
+            'url'      => wp_get_attachment_url( $attachment_id ),
+            'meta'     => wp_get_attachment_metadata( $attachment_id ),
+        ),
+    ) );
+    wp_die();
+}
+
 function wp_ajax_image_editor() {
     $attachment_id = intval($_POST['postid']);

trunk/wp-includes/class-wp-customize-setting.php

@@ -70 +70 @@
                 wp_enqueue_script( 'farbtastic' );
                 wp_enqueue_style( 'farbtastic' );
+                break;
+            case 'upload':
+                wp_enqueue_script( 'wp-plupload' );
                 break;
         }
@@ -395 +398 @@
                 <?php
                 break;
+            case 'upload':
+                ?>
+                <label><?php echo esc_html( $this->label ); ?><br/>
+                    <input type="hidden" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->name(); ?> />
+                    <a href="#" class="button-secondary upload"><?php _e( 'Upload' ); ?></a>
+                    <a href="#" class="remove"><?php _e( 'Remove' ); ?></a>
+                </label>
+                <?php
+                break;
             default:
                 do_action( 'customize_render_control-' . $this->control, $this );

trunk/wp-includes/class-wp-customize.php

@@ -524 +524 @@
             'control'           => 'color',
             'default'           => defined( 'BACKGROUND_COLOR' ) ? BACKGROUND_COLOR : '',
-            'sanitize_callback' => 'sanitize_hexcolor'
+            'sanitize_callback' => 'sanitize_hexcolor',
+        ) );
+
+        $this->add_setting( 'background_image', array(
+            'label'             => 'Background Image',
+            'section'           => 'background',
+            'control'           => 'upload',
         ) );
 

trunk/wp-includes/js/customize-controls.dev.js

@@ -68 +68 @@
         validate: function( to ) {
             return /^[a-fA-F0-9]{3}([a-fA-F0-9]{3})?$/.test( to ) ? to : null;
+        }
+    });
+
+    api.UploadControl = api.Control.extend({
+        initialize: function( id, value, options ) {
+            var control = this;
+
+            api.Control.prototype.initialize.call( this, id, value, options );
+
+            this.uploader = new wp.Uploader({
+                browser: this.container.find('.upload'),
+                success: function( attachment ) {
+                    control.set( attachment.url );
+                }
+            });
+
+            this.container.on( 'click', '.remove', function( event ) {
+                control.set('');
+                event.preventDefault();
+            });
         }
     });
@@ -195 +215 @@
 
     api.controls = {
-        color: api.ColorControl
+        color:  api.ColorControl,
+        upload: api.UploadControl
     };
 
@@ -230 +251 @@
         // Background color uses postMessage by default
         api('background_color').method = 'postMessage';
+
+        // api('background_image').method = 'postMessage';
+        api('background_image').uploader.param( 'post_data', { context: 'custom-background' });
     });
 

trunk/wp-includes/media.php

@@ -1442 +1442 @@
     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 );
 }
+
+/**
+ * Prints default plupload arguments.
+ *
+ * @since 3.4.0
+ */
+function wp_plupload_default_settings() {
+    global $wp_scripts;
+
+    $max_upload_size = wp_max_upload_size();
+
+    $params = array(
+        'action' => 'upload-attachment',
+    );
+    $params = apply_filters( 'plupload_default_params', $params );
+
+    $params['_wpnonce'] = wp_create_nonce( 'media-form' );
+
+    $settings = array(
+        'runtimes'            => 'html5,silverlight,flash,html4',
+        'file_data_name'      => 'async-upload', // key passed to $_FILE.
+        'multiple_queues'     => true,
+        'max_file_size'       => $max_upload_size . 'b',
+        'url'                 => admin_url( 'admin-ajax.php' ),
+        'flash_swf_url'       => includes_url( 'js/plupload/plupload.flash.swf' ),
+        'silverlight_xap_url' => includes_url( 'js/plupload/plupload.silverlight.xap' ),
+        'filters'             => array( array( 'title' => __( 'Allowed Files' ), 'extensions' => '*') ),
+        'multipart'           => true,
+        'urlstream_upload'    => true,
+        'multipart_params'    => $params,
+    );
+
+    $settings = apply_filters( 'plupload_default_settings', $settings );
+
+    $script = 'var wpPluploadDefaults = ' . json_encode( $settings ) . ';';
+
+    $data = $wp_scripts->get_data( 'wp-plupload', 'data' );
+    if ( $data )
+        $script = "$data\n$script";
+
+    $wp_scripts->add_data( 'wp-plupload', 'data', $script );
+}
+add_action( 'admin_init', 'wp_plupload_default_settings' );

trunk/wp-includes/script-loader.php

@@ -229 +229 @@
     $scripts->localize( 'plupload-handlers', 'pluploadL10n', $uploader_l10n );
 
+    $scripts->add( 'wp-plupload', "/wp-includes/js/plupload/wp-plupload$suffix.js", array('plupload-all', 'jquery', 'json2') );
+    $scripts->localize( 'wp-plupload', 'pluploadL10n', $uploader_l10n );
+
     // keep 'swfupload' for back-compat.
     $scripts->add( 'swfupload', '/wp-includes/js/swfupload/swfupload.js', array(), '2201-20110113');