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?


function add_image_test() { 
<script type="text/javascript">
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 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"
/* ]]> */
<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">

<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">
var uploaderMode = 0;
    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;});

<div id="media-upload-notice">
<div id="media-upload-error">
<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);

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

    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>

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

<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>
    <div class="clear"></div>
    <p class="media-upload-size">Maximum upload file size: 4MB</p>


<script type="text/javascript">
    var preloaded = $(".media-item.preloaded");
    if ( preloaded.length > 0 ) {
        preloaded.each(function(){prepareMediaItem({id:this.id.replace(/[^0-9]/g, '')},'');});
<div id="media-items">
<p class="savebutton ml-submit">
<input type="submit" name="save" id="save" class="button" value="Save all changes"  /></p>
<script type='text/javascript'>
/* <![CDATA[ */
var commonL10n = {
    warnDelete: "You are about to permanently delete the selected items.\n  \'Cancel\' to stop, \'OK\' to delete."
var setPostThumbnailL10n = {
    setThumbnail: "Use as featured image",
    saving: "Saving...",
    error: "Could not set that as the thumbnail image. Try a different attachment.",
    done: "Done"
/* ]]> */
<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>


1 Answer 1


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

(Faster Image Insert)

  • 1
    Praise the lord, my prayers have been answered. Been googling/looking for hours. With some minor tweaks this is exactly what I wanted. Thanks alot! (They really should add more "relevant" information so that it shows up on google searches)
    – INT
    Commented Mar 19, 2011 at 0:29
  • I know right! You're in luck that I only stumbled upon it a week or so ago (I think even from WP.SE!) Commented Mar 19, 2011 at 0:31
  • That's a real handy plugin, also note it's compatible with wplupload, should you be wanting to use that to...
    – t31os
    Commented Mar 20, 2011 at 11:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.