Changeset 6659

Timestamp:

01/25/08 19:21:11 (7 months ago)

Author:

matt

Message:

First pass at async upload, multi-upload, and gallery feature. Modified names from patch. Hat tip: tellyworth, skeltoac.

Files:

• trunk/wp-admin/async-upload.php (added)
• trunk/wp-admin/css/media.css (modified) (4 diffs)
• trunk/wp-admin/includes/media.php (modified) (10 diffs)
• trunk/wp-admin/includes/template.php (modified) (1 diff)
• trunk/wp-admin/media-upload.php (modified) (1 diff)
• trunk/wp-includes/js/swfupload (added)
• trunk/wp-includes/js/swfupload/handlers.js (added)
• trunk/wp-includes/js/swfupload/plugins (added)
• trunk/wp-includes/js/swfupload/plugins/swfupload.cookies.js (added)
• trunk/wp-includes/js/swfupload/plugins/swfupload.documentready.js (added)
• trunk/wp-includes/js/swfupload/plugins/swfupload.graceful_degradation.js (added)
• trunk/wp-includes/js/swfupload/plugins/swfupload.queue.js (added)
• trunk/wp-includes/js/swfupload/swfupload.js (added)
• trunk/wp-includes/js/swfupload/swfupload_f9.swf (added)
• trunk/wp-includes/script-loader.php (modified) (1 diff)
• trunk/wp-includes/shortcodes.php (added)
• trunk/wp-settings.php (modified) (1 diff)

trunk/wp-admin/css/media.css

@@ -42 +42 @@
-    font-weight: bold;
-    margin-bottom: 0.5em;
+    margin: 0 0 0.5em 0;
-}
-
@@ -59 +60 @@
-
-.media-upload-form fieldset {
+    width: 100%;
-    border: none;
-    text-align: justify;
-
+
+
-}
-
@@ -84 +87 @@
-.media-upload-form fieldset#image-align label {
-    display: inline;
-
+
+
-}
-
@@ -102 +106 @@
-    background: url(../images/align-right.png) no-repeat center left;
-}
+
+.pinkynail {
+    max-width: 40px;
+    max-height: 40px;
+}
+
+#multimedia-items {
+    border: 1px solid #c0c0c0;
+    border-bottom: none;
+    width: 623px;
+}
+.multimedia-item {
+    border-bottom: 1px solid #d0d0d0;
+    width: 623px;
+    position: relative;
+}
+span.filename {
+    position: absolute;
+    left: 46px;
+    top: 0px;
+    line-height: 36px;
+    z-index: 2;
+}
+.progress {
+    width: 623px;
+    height: 36px;
+}
+.bar {
+    width: 0px;
+    height: 36px;
+    background-color: #e8e8e8;
+    border-right: 3px solid #99d;
+}
+.multimedia-item .thumbnail {
+
+}
+.multimedia-item .pinkynail {
+    position: absolute;
+    top: 3px;
+    left: 3px;
+    max-width: 40px;
+    max-height: 40px;
+}
+.describe {
+    display: none;
+    border-top: 1px solid #d0d0d0;
+    padding: 5px;
+}
+.describe fieldset {
+    width: 470px;
+    float: right;
+}
+.describe img {
+    float: left;
+}
+.describe input[type="text"], .describe textarea {
+    width: 450px;
+}
+.describe label {
+    padding-right: 1em;
+}
+
+a.delete {
+    clear: both;
+}
+.describe-toggle-on, .describe-toggle-off {
+    line-height: 36px;
+    z-index: 2;
+    position: absolute;
+    top: 0px;
+    right: 20px;
+}
+.describe-toggle-off {
+    display: none;
+}
+.clickmask {
+    background: transparent;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    cursor: pointer;
+    border: none;
+    z-index: 10;
+}

trunk/wp-admin/includes/media.php

@@ -15 +15 @@
-    $image_title = attribute_escape( @$values['image-title'] );
-    $image_align = @$values['image-url'];
-
+
+
-?>
-<div id="media-upload-header">
@@ -25 +26 @@
-</ul>
-</div>
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-<form enctype="multipart/form-data" method="post" action="<?php echo attribute_escape($action_url); ?>" id="image-upload" class="media-upload-form">
-
+
+
+
+
+
-    <input type="file" name="image-file" id="image-file" />
-    <label for="image-file" class="form-help"><?php _e('Only PNG, JPG, GIF'); ?></label></p>
@@ -58 +101 @@
-    <a href="#" onclick="return top.tb_remove();" id="image-cancel" class="button-cancel"><?php _e('Cancel'); ?></a>
-</p>
-arent_post_id" value="<?php echo attribute_escape('parent_post_id'
+ost_id" value="<?php echo attribute_escape($post_id
-    <?php wp_nonce_field( 'inlineuploading' ); ?>
-</form>
@@ -70 +113 @@
-    }
-
-    check_admin_referer('inlineuploading');
-    
-    if ( empty($_POST['image-add']) ) {
-        // no button click, we're just displaying the form
@@ -78 +119 @@
-    else {
-        // Add Image button was clicked
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-        
-        // if the input was invalid, redisplay the form with its current values
@@ -89 +145 @@
-}
-
+// this returns html to include in the single image upload form when the async flash upload has finished
+// i.e. show a thumb of the image, and include the attachment id as a hidden input
+function async_image_callback($id) {
+    $thumb_url = wp_get_attachment_thumb_url($id);
+    if ( empty($thumb_url) )
+        $thumb_url = wp_mime_type_icon($id);
+        
+    if ($thumb_url) {
+        $out = '<p><input type="hidden" name="attachment_id" id="attachment_id" value="'.intval($id).'" />'
+            . '<img src="'.wp_get_attachment_thumb_url($id).'" class="pinkynail" /> '
+            . basename(wp_get_attachment_url($id)).'</p>';
+    }
+    else {
+        $out = '<p><input type="hidden" name="attachment_id" id="attachment_id" value="'.intval($id).'" />'
+            . basename(wp_get_attachment_url($id)).'</p>';
+    }
+    
+    $post = get_post($id);
+    $title = addslashes($post->post_title);
+    $alt = addslashes($post->post_content);
+    
+    // populate the input fields with post data (which in turn comes from exif/iptc)
+    $out .= <<<EOF
+<script type="text/javascript">
+<!--
+jQuery('#image-alt').val('{$alt}').attr('disabled', false);
+jQuery('#image-title').val('{$title}').attr('disabled', false);
+jQuery('#image-url').attr('disabled', false);
+jQuery('#image-add').attr('disabled', false);
+-->
+</script>   
+EOF;
+
+    return $out;
+}
+
+add_filter('async_upload_image', 'async_image_callback');
+
+
-function image_send_to_editor($id, $alt, $title, $align, $url='') {
-    
@@ -98 +193 @@
-        $hwstring = ' width="'.intval($meta['width']).'" height="'.intval($meta['height']).'"';
-
-
+rel="attachment wp-att-'.attribute_escape($id).'" 
-
-    if ( $url )
@@ -153 +248 @@
-        wp_update_attachment_metadata( $id, wp_generate_attachment_metadata( $id, $file ) );
-
+    return $id;     
+}
+
+// this handles the file upload POST itself, creating the attachment post
+function media_handle_upload($file_id, $post_id, $post_data = array()) {
+    $overrides = array('test_form'=>false);
+    $file = wp_handle_upload($_FILES[$file_id], $overrides);
+
+    if ( isset($file['error']) )
+        return new wp_error( 'upload_error', $file['error'] );
+
+    $url = $file['url'];
+    $type = $file['type'];
+    $file = $file['file'];
+    $title = preg_replace('/\.[^.]+$/', '', basename($file));
+    $content = '';
+
+    // use image exif/iptc data for title and caption defaults if possible
+    if ( $image_meta = @wp_read_image_metadata($file) ) {
+        if ( trim($image_meta['title']) )
+            $title = $image_meta['title'];
+        if ( trim($image_meta['caption']) )
+            $content = $image_meta['caption'];
+    }
+
+    // Construct the attachment array
+    $attachment = array_merge( array(
+        'post_mime_type' => $type,
+        'guid' => $url,
+        'post_parent' => $post_id,
+        'post_title' => $title,
+        'post_content' => $content,
+    ), $post_data );
+
+    // Save the data
+    $id = wp_insert_attachment($attachment, $file, $post_parent);
+    if ( !is_wp_error($id) ) {
+        wp_update_attachment_metadata( $id, wp_generate_attachment_metadata( $id, $file ) );
+    }
+
-    return $id;
-
-
-
-
+
+
-
-// wrap iframe content (produced by $content_func) in a doctype, html head/body etc
@@ -195 +329 @@
-    global $post_ID, $temp_ID;
-    $uploading_iframe_ID = (int) (0 == $post_ID ? $temp_ID : $post_ID);
-
-
+
+
+
+
-    $out = <<<EOF
-
+
+
-<img src="./images/media-buttons.gif" alt="" />
-</a>
@@ -226 +363 @@
-}
-
+add_action('media_upload_multimedia', 'multimedia_upload_handler');
-add_action('media_upload_image', 'image_upload_handler');
-add_action('admin_head_image_upload_form', 'media_admin_css');
-
+function multimedia_upload_handler() {
+    if ( !current_user_can('upload_files') ) {
+        return new wp_error( 'upload_not_allowed', __('You are not allowed to upload files.') );
+    }
+
+    if ( empty($_POST) ) {
+        // no button click, we're just displaying the form
+            wp_iframe( 'multimedia_upload_form' );
+    } elseif ( empty($_POST['upload-button']) ) {
+        // Insert multimedia button was clicked
+        check_admin_referer('multimedia-form');
+
+        if ( !empty($_POST['attachments']) ) foreach ( $_POST['attachments'] as $attachment_id => $attachment ) {
+            $post = $_post = get_post($attachment_id, ARRAY_A);
+            $post['post_content'] = $attachment['post_content'];
+            $post['post_title'] = $attachment['post_title'];
+            if ( $post != $_post )
+                wp_update_post($post);
+
+            if ( $taxonomies = get_object_taxonomies('attachment') ) foreach ( $taxonomies as $t )
+                if ( isset($attachment[$t]) )
+                    wp_set_object_terms($attachment_id, array_map('trim', preg_split('/,+/', $attachment[$t])), $t, false);
+        }
+
+        media_send_to_editor('[gallery]');
+    } else {
+        // Upload File button was clicked
+
+        $id = media_handle_upload('async-upload', $_REQUEST['post_id']);
+
+        wp_iframe( 'multimedia_upload_form' );
+    }
+}
+
+function get_multimedia_items( $post_id ) {
+    $attachments = get_children("post_parent=$post_id&post_type=attachment&orderby=\"menu_order ASC, ID ASC\"");
+
+    if ( empty($attachments) )
+        return '';
+
+    foreach ( $attachments as $id => $attachment ) {
+        $output .= "\n<div id='multimedia-item-$id' class='multimedia-item preloaded'><div id='media-upload-error-$id'></div><span class='filename'></span><div class='progress'><div class='bar'></div></div>";
+        $output .= get_multimedia_item($id);
+        $output .= "    <div class='progress clickmask'></div>\n</div>";
+    }
+
+    return $output;
+}
+
+function get_multimedia_item( $attachment_id ) {
+    $thumb_url = wp_get_attachment_thumb_url( $attachment_id );
+    if ( empty($thumb_url) )
+        $thumb_url = wp_mime_type_icon( $attachment_id );
+
+    $title_label = __('Title');
+    $description_label = __('Description');
+    $tags_label = __('Tags');
+
+    $toggle_on = __('Describe &raquo;');
+    $toggle_off = __('Describe &laquo;');
+
+    $post = get_post($attachment_id);
+
+    $filename = basename($post->guid);
+    $title = attribute_escape($post->post_title);
+    $description = attribute_escape($post->post_content);
+    if ( $_tags = get_the_tags($attachment_id) ) {
+        foreach ( $_tags as $tag )
+            $tags[] = $tag->name;
+        $tags = attribute_escape(join(', ', $tags));
+    }
+
+    $delete_href = wp_nonce_url("post.php?action=delete-post&amp;post=$attachment_id", 'delete-post_' . $attachment_id);
+    $delete = __('Delete');
+
+    $item = "
+    <a class='toggle describe-toggle-on' href='#'>$toggle_on</a>
+    <a class='toggle describe-toggle-off' href='#'>$toggle_off</a>
+    <span class='filename new'>$filename</span>
+    <div class='slidetoggle describe'>
+        <img class='thumbnail' src='$thumb_url' alt='' />
+        <fieldset>
+        <p><label for='attachments[$attachment_id][post_title]'>$title_label</label><input type='text' id='attachments[$attachment_id][post_title]' name='attachments[$attachment_id][post_title]' value='$title' /></p>
+        <p><label for='attachments[$attachment_id][post_content]'>$description_label</label><input type='text' id='attachments[$attachment_id][post_content]' name='attachments[$attachment_id][post_content]' value='$description' /></p>
+";
+
+    if ( $taxonomies = get_object_taxonomies('attachment') ) foreach ( $taxonomies as $t ) {
+        $tax = get_taxonomy($t);
+        $t_title = !empty($tax->title) ? $tax->title : $t;
+        if ( false === $terms = get_object_term_cache( $attachment_id, $t ) )
+            $_terms = wp_get_object_terms($attachment_id, $t);
+        if ( $_terms ) {
+            foreach ( $_terms as $term )
+                $terms[] = $term->name;
+            $terms = join(', ', $terms);
+        } else
+            $terms = '';
+        $item .= "<p><label for='attachments[$attachment_id][$t]'>$t_title</label><input type='text' id='attachments[$attachment_id][$t]' name='attachments[$attachment_id][$t]' value='$terms' /></p>\n";
+    }
+
+    $item .= "
+        </fieldset>
+        <p><a id='del$attachment_id' class='delete' href='$delete_href'>$delete</a></p>
+    </div>
+";
+
+    return $item;
+}
+
+function multimedia_upload_form( $error = null ) {
+    $flash_action_url = get_option('siteurl') . '/wp-admin/async-upload.php?type=multimedia';
+    $form_action_url = get_option('siteurl') . '/wp-admin/media-upload.php?type=multimedia';
+
+    $post_id = intval($_REQUEST['post_id']);
+
-?>
+<div id="media-upload-header">
+<h3>Add Images</h3>
+</div>
+    <div id="media-upload-error">
+<?php if ($error) { ?>
+    <?php echo $error->get_error_message(); ?>
+<?php } ?>
+    </div>
+<script type="text/javascript">
+<!--
+jQuery(function($){
+    swfu = new SWFUpload({
+            upload_url : "<?php echo attribute_escape( $flash_action_url ); ?>",
+            flash_url : "<?php echo get_option('siteurl').'/wp-includes/js/swfupload/swfupload_f9.swf'; ?>",
+            file_post_name: "async-upload",
+            file_types: "*.*",
+            post_params : {
+                "post_id" : "<?php echo $post_id; ?>",
+                "auth_cookie" : "<?php echo $_COOKIE[AUTH_COOKIE]; ?>",
+                "type" : "multimedia"
+            },
+            swfupload_element_id : "flash-upload-ui", // id of the element displayed when swfupload is available
+            degraded_element_id : "html-upload-ui",   // when swfupload is unavailable
+            //upload_start_handler : uploadStart,
+            upload_progress_handler : uploadProgressMultimedia,
+            //upload_error_handler : uploadError,
+            upload_success_handler : uploadSuccessMultimedia,
+            upload_complete_handler : uploadCompleteMultimedia,
+            file_dialog_start_handler : fileDialogStart,
+            file_queued_handler : fileQueuedMultimedia,
+            file_queue_error_handler : fileQueueError,
+            file_dialog_complete_handler : fileDialogComplete,
+
+            debug: false,
+        });
+    $("#flash-browse-button").bind( "click", function(){swfu.selectFiles();});
+    $("#insert-multimedia").bind( "click", function(){jQuery(this).parents('form').get(0).submit();});
+    $(".multimedia-item.preloaded").each(function(){uploadSuccessMultimedia({id:this.id.replace(/[^0-9]/g, '')},'');jQuery('#insert-multimedia').attr('disabled', '');});
+    $("a.delete").bind('click',function(){$.ajax({url:'admin-ajax.php',type:'post',data:{id:this.id.replace(/del/,''),action:'delete-post',_ajax_nonce:this.href.replace(/^.*wpnonce=/,'')}});$(this).parents(".multimedia-item").eq(0).slideToggle(300, function(){$(this).remove();});return false;});
+});
+//-->
+</script>
+<p id="flash-upload-ui" style="display:none">
+    <input id="flash-browse-button" type="button" value="<?php _e('Choose Files'); ?>" />
+    <label for="image-file" class="form-help"><?php _e('Only PNG, JPG, GIF'); ?></label>
+</p>
+
+<form enctype="multipart/form-data" method="post" action="<?php echo attribute_escape($form_action_url); ?>" class="media-upload-form">
+
+<div id="html-upload-ui">
+    <p><label for="async-upload"><?php _e('Choose image'); ?></label>
+    <input type="file" name="async-upload" id="async-upload" />
+    <label for="image-file" class="form-help"><?php _e('Only PNG, JPG, GIF'); ?></label>
+    </p>
+    <p>
+    <button id="upload-button" name="upload-button" value="1" class="button-ok"><?php _e('Add Image'); ?></button>
+    <a href="#" onClick="return top.tb_remove();" id="image-cancel" class="button-cancel"><?php _e('Cancel'); ?></a>
+    </p>
+    <input type="hidden" name="post_id" id="post_id" value="<?php echo $post_id; ?>" />
+    <br style="clear:both" />
+</div>
+
+
+
+<div id="multimedia-items">
+
+<?php echo get_multimedia_items($post_id); ?>
+
+</div>
+
+<p class="submit">
+    <a href="#" onClick="return top.tb_remove();" id="image-cancel" class="button-cancel"><?php _e('Cancel'); ?></a>
+    <input type="button" class="submit" id="insert-multimedia" value="<?php _e('Insert gallery into post'); ?>" disabled="disabled" />
+</p>
+
+<?php wp_nonce_field('multimedia-form'); ?>
+
+</form>
+
+<?php
+}
+
+add_action('admin_head_multimedia_upload_form', 'media_admin_css');
+add_filter('async_upload_multimedia', 'get_multimedia_item');
+add_filter('media_upload_multimedia', 'multimedia_upload_handler');
+
+// Any 'attachment' taxonomy will be included in the description input form for the multi uploader
+// Example:
+//register_taxonomy('attachment_people', 'attachment', array('title' => 'People'));
+
+?>

trunk/wp-admin/includes/template.php

@@ -746 +746 @@
-}
-
-import_upload_form( $action 
+max_upload_size(
-    $u_bytes = wp_convert_hr_to_bytes( ini_get( 'upload_max_filesize' ) );
-    $p_bytes = wp_convert_hr_to_bytes( ini_get( 'post_max_size' ) );
-
+
+
+
+
+
+
-    $size = wp_convert_bytes_to_hr( $bytes );
-?>

trunk/wp-admin/media-upload.php

@@ -1 +1 @@
-<?php
-require_once('admin.php');
+wp_enqueue_script('swfupload');
+wp_enqueue_script('swfupload-degrade');
+wp_enqueue_script('swfupload-queue');
+wp_enqueue_script('swfupload-handlers');
-
-@header('Content-Type: ' . get_option('html_type') . '; charset=' . get_option('blog_charset'));

trunk/wp-includes/script-loader.php

@@ -86 +86 @@
-        $this->add( 'schedule', '/wp-includes/js/jquery/jquery.schedule.js', array('jquery'), '20');
-        $this->add( 'thickbox', '/wp-includes/js/thickbox/thickbox.js', array('jquery'), '3.1');
+        $this->add( 'swfupload', '/wp-includes/js/swfupload/swfupload.js', false, '2.0.2');
+        $this->add( 'swfupload-degrade', '/wp-includes/js/swfupload/plugins/swfupload.graceful_degradation.js', array('swfupload'), '2.0.2');
+        $this->add( 'swfupload-queue', '/wp-includes/js/swfupload/plugins/swfupload.queue.js', array('swfupload'), '2.0.2');
+        $this->add( 'swfupload-handlers', '/wp-includes/js/swfupload/handlers.js', array('swfupload'), '2.0.2');
+        // these error messages came from the sample swfupload js, they might need changing.
+        $this->localize( 'swfupload-handlers', 'swfuploadL10n', array(
+                'queue_limit_exceeded' => 'You have attempted to queue too many files.',
+                'file_exceeds_size_limit' => 'The file you have selected is too big.',
+                'zero_byte_file' => 'The file you selected is empty.  Please select another file.',
+                'invalid_filetype' => 'The file you choose is not an allowed file type.',
+                'default_error' => 'An error occurred in the upload. Please try again later.',
+                'missing_upload_url' => 'There was a configuration error.  Please contact the server administrator.',
+                'upload_limit_exceeded' => 'You may only upload 1 file.',
+                'http_error' => 'HTTP error.',
+                'upload_failed' => 'Upload failed.',
+                'io_error' => 'IO error.',
+                'security_error' => 'Security error.',
+                'file_cancelled' => 'File cancelled.',
+                'upload_stopped' => 'Upload stopped.',
+                
+        ) );
-
-        $this->add( 'jquery-ui-tabs', '/wp-includes/js/jquery/ui.tabs.js', array('jquery'), '3' );

trunk/wp-settings.php

@@ -257 +257 @@
-require (ABSPATH . WPINC . '/update.php');
-require (ABSPATH . WPINC . '/canonical.php');
+require (ABSPATH . WPINC . '/shortcodes.php');
-
-if (strpos($_SERVER['PHP_SELF'], 'install.php') === false) {