Unable to get Preview of Uploaded image within a Custom Meta box

by

I first followed the steps in this tutorial.
Added the Image Uploader, tried it out but I realized it’s an older version of the WP Uploader…

So I then found this post, and now my uploader is updated.

The issue, is that I can’t get the preview image working…

First off this is the Image section for the Meta Box details//

case 'image':
$image = get_template_directory_uri().'/images/image.png';  
echo '<span class="custom_default_image" style="display:none">'.$image.'</span>'; 
if ($meta) { $image = wp_get_attachment_image_src($meta, 'medium'); $image = $image[0]; }      
echo '<label for="upload_image">
<input id="upload_image" name="'.$field['id'].'" type="hidden" class="custom_upload_image" value="'.$meta.'" />
<img src="'.$image.'" class="custom_preview_image" alt="" />
 
<input id="upload_image_button" class="custom_upload_image_button button" type="button" value="Upload Image"  /]

<a href="#" class="custom_clear_image_button">Remove Image</a> 
</label>';

break;

This is the code used for the uploader//

jQuery(document).ready(function($){
    var custom_uploader;
    $('#upload_image_button').click(function(e) {
        e.preventDefault();
        //If the uploader object has already been created, reopen the dialog
        if (custom_uploader) {
            custom_uploader.open();
            return;
        }

        //Extend the wp.media object
        custom_uploader = wp.media.frames.file_frame = wp.media({
            title: 'Choose Image',
            button: {
                text: 'Choose Image'
            },
            multiple: false
        });

        //When a file is selected, grab the URL and set it as the text field's value
        custom_uploader.on('select', function() {
            attachment = custom_uploader.state().get('selection').first().toJSON();
            $('#upload_image').val(attachment.url);
        });

        //Open the uploader dialog
        custom_uploader.open();

    });
        jQuery('.custom_clear_image_button').click(function() {  
        var defaultImage = jQuery(this).parent().siblings('.custom_default_image').text();  
        jQuery(this).parent().siblings('.custom_upload_image').val('');  
        jQuery(this).parent().siblings('.custom_preview_image').attr('src', defaultImage);  
        return false;  
    });  

});

My attempt to add the preview was using these lines for JS//

     preview = jQuery(this).siblings('.custom_preview_image');  
        window.send_to_editor = function(html) {  
            imgurl = jQuery('img',html).attr('src');  
            classes = jQuery('img', html).attr('class');  
            id = classes.replace(/(.*?)wp-image-/, '');  
            formfield.val(id);  
            preview.attr('src', imgurl);  
            tb_remove();  
        }  
        return false;

So my question would be, how can I get a preview working for my Image Uploader inside of a Custom Meta Box?

All help appreciated, Thanks.

1 Answer
1

I see your problem in the javascript. I’ve done something similar using the “on close” event of the wp.media object. You can use the “select event”, as you are actually doing, but I would use “on select” event mainly for events within the modal window (but it is just preference, you can use the “on select” if you want).

Here my suggested javascript code for you.

  jQuery(document).ready(function($){
      var custom_uploader;
      $('#insert-video-button').click(function(e) {
          e.preventDefault();
          //If the uploader object has already been created, reopen the dialog
          if (custom_uploader) {
              custom_uploader.open();
              return;
          }
          //Extend the wp.media object
          custom_uploader = wp.media({
              title: 'Choose Image',
              button: {
                  text: 'Choose Image',
              },
              multiple: false,
             // If you pretent a function only for images you can limit the media elements only to images
             library : { type : 'image'}
         });

         //When close, grab the url of the image where needed
        custom_uploader.on('close', function() {
            attachment = custom_uploader.state().get('selection').first().toJSON();
            $('#upload_image').val(attachment.url);
            $('.custom_preview_image').attr("src", attachment.url);
        });

       //Open the uploader dialog
       custom_uploader.open();
   });
});

This code should works with the HTML code you posted in the question. Note that actually it works only for ONE image, if you open the image selection window again and select a new image, the previous image will be replaced by the new selected image.

Leave a Comment