Put the media uploader in a metabox

Question

I find it very unnecessary to have an "add image" button that brings me to yet another screen that will let me upload content to my post.

Ideally I would like to have a meta box with the option to add images directly in a meta box.

I managed to get some functionality by copy the source for the media-upload form and paste it in a meta box. The image I choose gets uploaded, however I doesn't show any progressbar, and I need to find a way to list attached images below for better overview.

Anyone managed to do this?

Code:

function add_image_test() { 
?>
<script type="text/javascript">
//<![CDATA[
addLoadEvent = function(func){if(typeof jQuery!="undefined")jQuery(document).ready(func);else if(typeof wpOnload!='function'){wpOnload=func;}else{var oldonload=wpOnload;wpOnload=function(){oldonload();func();}}};
var userSettings = {'url':'/','uid':'2','time':'1300489693'};
var ajaxurl = 'http://xxx.com/wp-admin/admin-ajax.php', pagenow = 'media-upload-popup', adminpage = 'media-upload-popup',
isRtl = 0;
//]]>
</script>

<script type='text/javascript'>
/* <![CDATA[ */
var swfuploadL10n = {
    queue_limit_exceeded: "You have attempted to queue too many files.",
    file_exceeds_size_limit: "This file exceeds the maximum upload size for this site.",
    zero_byte_file: "This file is empty. Please try another.",
    invalid_filetype: "This file type is not allowed. Please try another.",
    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 canceled.",
    upload_stopped: "Upload stopped.",
    dismiss: "Dismiss",
    crunching: "Crunching&hellip;",
    deleted: "moved to the trash.",
    error_uploading: "&#8220;%s&#8221; has failed to upload due to an error"
};
try{convertEntities(swfuploadL10n);}catch(e){};
/* ]]> */
</script>
<script type='text/javascript' src='http://xxx.com/wp-admin/load-scripts.php?c=1&amp;load=jquery,utils,swfupload-all,swfupload-handlers,json2&amp;ver=2af6dbb1e89d69a2363895fac893188d'></script>
    <script type="text/javascript">
    jQuery(document).ready(function(){
    jQuery('form#post').attr('enctype','multipart/form-data');
    jQuery('form#post').attr('encoding','multipart/form-data');
    });
</script>


<form enctype="multipart/form-data" method="post" action="http://xxx.com/wp-admin/media-upload.php?type=image&amp;tab=type&amp;post_id=1622" class="media-upload-form type-form validate" id="image-form">
<input type="submit" name="save" id="save" class="hidden" value="Save Changes"  /><input type="hidden" name="post_id" id="post_id" value="1622" />
<input type="hidden" id="_wpnonce" name="_wpnonce" value="2460ab002a" /><input type="hidden" name="_wp_http_referer" value="/wp-admin/media-upload.php?post_id=1622&amp;type=image&amp;" />

<script type="text/javascript">
//<![CDATA[
var uploaderMode = 0;
jQuery(document).ready(function($){
    uploaderMode = getUserSetting('uploader');
    $('.upload-html-bypass a').click(function(){deleteUserSetting('uploader');uploaderMode=0;swfuploadPreLoad();return false;});
    $('.upload-flash-bypass a').click(function(){setUserSetting('uploader', '1');uploaderMode=1;swfuploadPreLoad();return false;});
});
//]]>

</script>
<div id="media-upload-notice">
</div>
<div id="media-upload-error">
</div>
<script type="text/javascript">
var swfu;
SWFUpload.onload = function() {
    var settings = {
            button_text: '<span class="button">Select Files<\/span>',
            button_text_style: '.button { text-align: center; font-weight: bold; font-family:"Lucida Grande",Verdana,Arial,"Bitstream Vera Sans",sans-serif; font-size: 11px; text-shadow: 0 1px 0 #FFFFFF; color:#464646; }',
            button_height: "23",
            button_width: "132",
            button_text_top_padding: 3,
            button_image_url: 'xxx.com/wp-includes/images/upload.png?ver=20100531',
            button_placeholder_id: "flash-browse-button",
            upload_url : "xxx.com/wp-admin/async-upload.php",
            flash_url : "http://xxx.com/wp-includes/js/swfupload/swfupload.swf",
            file_post_name: "async-upload",
            file_types: "*.*",
            post_params : {
                        'post_id' : '1622', 
        'auth_cookie' : 'admin|1301439526|5e5e63158e880597c782656a719f1738', 
        'logged_in_cookie' : 'admin|1301439526|e01206ec12b5cee4a605f9abff385cc0', 
        '_wpnonce' : '2460ab002a', 
        'type' : 'image', 
        'tab' : 'type', 
        'short' : '1'           },
            file_size_limit : "4194304b",
            file_dialog_start_handler : fileDialogStart,
            file_queued_handler : fileQueued,
            upload_start_handler : uploadStart,
            upload_progress_handler : uploadProgress,
            upload_error_handler : uploadError,
            upload_success_handler : uploadSuccess,
            upload_complete_handler : uploadComplete,
            file_queue_error_handler : fileQueueError,
            file_dialog_complete_handler : fileDialogComplete,
            swfupload_pre_load_handler: swfuploadPreLoad,
            swfupload_load_failed_handler: swfuploadLoadFailed,
            custom_settings : {
                degraded_element_id : "html-upload-ui", // id of the element displayed when swfupload is unavailable
                swfupload_element_id : "flash-upload-ui" // id of the element displayed when swfupload is available
            },
            debug: false
        };
        swfu = new SWFUpload(settings);
};
//]]>
</script>

<div id="flash-upload-ui" class="hide-if-no-js">

    <div>
    Choose files to upload  <div id="flash-browse-button"></div>
    <span><input id="cancel-upload" disabled="disabled" onclick="cancelUpload()" type="button" value="Cancel Upload" class="button" /></span>

    </div>
    <p class="media-upload-size">Maximum upload file size: 4MB</p>
</div>

<div id="html-upload-ui">
    <p id="async-upload-wrap">

        <label class="screen-reader-text" for="async-upload">Upload</label>
        <input type="file" name="async-upload" id="async-upload" />
        <input type="submit" name="html-upload" id="html-upload" class="button" value="Upload"  />      <a href="#" onclick="try{top.tb_remove();}catch(e){}; return false;">Cancel</a>
    </p>
    <div class="clear"></div>
    <p class="media-upload-size">Maximum upload file size: 4MB</p>

</div>

<script type="text/javascript">
//<![CDATA[
jQuery(function($){
    var preloaded = $(".media-item.preloaded");
    if ( preloaded.length > 0 ) {
        preloaded.each(function(){prepareMediaItem({id:this.id.replace(/[^0-9]/g, '')},'');});
    }
    updateMediaForm();
});
//]]>
</script>
<div id="media-items">
</div>
<p class="savebutton ml-submit">
<input type="submit" name="save" id="save" class="button" value="Save all changes"  /></p>
</form>
<script type='text/javascript'>
/* <![CDATA[ */
var commonL10n = {
    warnDelete: "You are about to permanently delete the selected items.\n  \'Cancel\' to stop, \'OK\' to delete."
};
try{convertEntities(commonL10n);}catch(e){};
var setPostThumbnailL10n = {
    setThumbnail: "Use as featured image",
    saving: "Saving...",
    error: "Could not set that as the thumbnail image. Try a different attachment.",
    done: "Done"
};
try{convertEntities(setPostThumbnailL10n);}catch(e){};
/* ]]> */
</script>
<script type='text/javascript' src='http://xxx.com/wp-admin/load-scripts.php?c=1&amp;load=hoverIntent,common,jquery-color,imgareaselect,image-edit,set-post-thumbnail&amp;ver=6356b0bc2df931d1f1d78f0d91f6539d'></script>
<script type="text/javascript">if(typeof wpOnload=='function')wpOnload();</script>

<?php
}

Answer 1

As Apple might've put it "There's a plugin for that" :)

(Faster Image Insert)