Wordpress custom meta box multiple image upload

Question

I am working with a custom post type where I have added a custom meta box. In the custom meta box I am trying to add a media uploader for multiple images. With this uploader I want to store multiple image IDs in a array. The problem is that I only manage to save one ID, even when I select multiple images.

I really hope someone could help me.

My JS:

    jQuery(document).ready(function(){
  var addButton = document.getElementById('last-opp-bilde');
  var deleteButton = document.getElementById('fjern-bilde');
  var img = document.getElementById('image-tag');
  var hidden = document.getElementById('img-hidden-field');
  var imageUploader = wp.media({
    title: 'Velg bilde',
    button: {
      text: 'Bruk dette bildet'
    },
    multiple: true
  });

  addButton.addEventListener( 'click', function() {
    if (imageUploader) {
      imageUploader.open();
    }
  });

  imageUploader.on( 'select', function() {
    var attachment = imageUploader.state().get('selection').first().toJSON();
    img.setAttribute( 'src', attachment.url);
    img.setAttribute( 'style', 'width: 50%;');
    hidden.setAttribute( 'value', JSON.stringify( [ { id: attachment.id, url: attachment.url}]));
  });

  deleteButton.addEventListener( 'click', function(){
    img.removeAttribute( 'src' );
    hidden.removeAttribute( 'value' );
    img.removeAttribute( 'style' );
  });

  window.addEventListener( 'DOMContentLoaded', function(){
    img.setAttribute( 'src', imageUploads.imageData.src);
    img.setAttribute( 'style', 'width: 50%;');
    hidden.setAttribute('value', JSON.stringify( [imageUploads.imageData]));
  });
});

Answer 1

Add the following code to your current themes function.php file. Go to your pages from WordPress admin and check that multiple image upload custom field is added to each page.

<?php
// Add Meta Box to post
add_action( 'add_meta_boxes', 'multi_media_uploader_meta_box' );

function multi_media_uploader_meta_box() {
    add_meta_box( 'my-post-box', 'Media Field', 'multi_media_uploader_meta_box_func', 'post', 'normal', 'high' );
}

function multi_media_uploader_meta_box_func($post) {
    $banner_img = get_post_meta($post->ID,'post_banner_img',true);
    ?>
    <style type="text/css">
        .multi-upload-medias ul li .delete-img { position: absolute; right: 3px; top: 2px; background: aliceblue; border-radius: 50%; cursor: pointer; font-size: 14px; line-height: 20px; color: red; }
        .multi-upload-medias ul li { width: 120px; display: inline-block; vertical-align: middle; margin: 5px; position: relative; }
        .multi-upload-medias ul li img { width: 100%; }
    </style>

    <table cellspacing="10" cellpadding="10">
        <tr>
            <td>Banner Image</td>
            <td>
                <?php echo multi_media_uploader_field( 'post_banner_img', $banner_img ); ?>
            </td>
        </tr>
    </table>

    <script type="text/javascript">
        jQuery(function($) {

            $('body').on('click', '.wc_multi_upload_image_button', function(e) {
                e.preventDefault();

                var button = $(this),
                custom_uploader = wp.media({
                    title: 'Insert image',
                    button: { text: 'Use this image' },
                    multiple: true 
                }).on('select', function() {
                    var attech_ids = '';
                    attachments
                    var attachments = custom_uploader.state().get('selection'),
                    attachment_ids = new Array(),
                    i = 0;
                    attachments.each(function(attachment) {
                        attachment_ids[i] = attachment['id'];
                        attech_ids += ',' + attachment['id'];
                        if (attachment.attributes.type == 'image') {
                            $(button).siblings('ul').append('<li data-attechment-id="' + attachment['id'] + '"><a href="' + attachment.attributes.url + '" target="_blank"><img class="true_pre_image" src="' + attachment.attributes.url + '" /></a><i class=" dashicons dashicons-no delete-img"></i></li>');
                        } else {
                            $(button).siblings('ul').append('<li data-attechment-id="' + attachment['id'] + '"><a href="' + attachment.attributes.url + '" target="_blank"><img class="true_pre_image" src="' + attachment.attributes.icon + '" /></a><i class=" dashicons dashicons-no delete-img"></i></li>');
                        }

                        i++;
                    });

                    var ids = $(button).siblings('.attechments-ids').attr('value');
                    if (ids) {
                        var ids = ids + attech_ids;
                        $(button).siblings('.attechments-ids').attr('value', ids);
                    } else {
                        $(button).siblings('.attechments-ids').attr('value', attachment_ids);
                    }
                    $(button).siblings('.wc_multi_remove_image_button').show();
                })
                .open();
            });

            $('body').on('click', '.wc_multi_remove_image_button', function() {
                $(this).hide().prev().val('').prev().addClass('button').html('Add Media');
                $(this).parent().find('ul').empty();
                return false;
            });

        });

        jQuery(document).ready(function() {
            jQuery(document).on('click', '.multi-upload-medias ul li i.delete-img', function() {
                var ids = [];
                var this_c = jQuery(this);
                jQuery(this).parent().remove();
                jQuery('.multi-upload-medias ul li').each(function() {
                    ids.push(jQuery(this).attr('data-attechment-id'));
                });
                jQuery('.multi-upload-medias').find('input[type="hidden"]').attr('value', ids);
            });
        })
    </script>

    <?php
}


function multi_media_uploader_field($name, $value = '') {
    $image = '">Add Media';
    $image_str = '';
    $image_size = 'full';
    $display = 'none';
    $value = explode(',', $value);

    if (!empty($value)) {
        foreach ($value as $values) {
            if ($image_attributes = wp_get_attachment_image_src($values, $image_size)) {
                $image_str .= '<li data-attechment-id=' . $values . '><a href="' . $image_attributes[0] . '" target="_blank"><img src="' . $image_attributes[0] . '" /></a><i class="dashicons dashicons-no delete-img"></i></li>';
            }
        }

    }

    if($image_str){
        $display = 'inline-block';
    }

    return '<div class="multi-upload-medias"><ul>' . $image_str . '</ul><a href="#" class="wc_multi_upload_image_button button' . $image . '</a><input type="hidden" class="attechments-ids ' . $name . '" name="' . $name . '" id="' . $name . '" value="' . esc_attr(implode(',', $value)) . '" /><a href="#" class="wc_multi_remove_image_button button" style="display:inline-block;display:' . $display . '">Remove media</a></div>';
}

// Save Meta Box values.
add_action( 'save_post', 'wc_meta_box_save' );

function wc_meta_box_save( $post_id ) {
    if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
        return; 
    }

    if( !current_user_can( 'edit_post', $post_id ) ){
        return; 
    }
    
    if( isset( $_POST['post_banner_img'] ) ){
        update_post_meta( $post_id, 'post_banner_img', $_POST['post_banner_img'] );
    }
}?>

Use the below code to show meta box values from anywhere

<?php
// Use below code to show metabox values from anywhere
$id = get_the_ID();
    $banner_img = get_post_meta($id, 'post_banner_img', true);  
    $banner_img = explode(',', $banner_img);
    if(!empty($banner_img)) {
        ?>
        <table class="plugin-detail-tabl" width="100%" cellspacing="0" cellpadding="0">
            <tbody>
                <?php  foreach ($banner_img as $attachment_id) { ?>
                    <tr>
                        <td><img src="<?php echo wp_get_attachment_url( $attachment_id );?>"></td>
                    </tr>
                <?php } ?>
            </tbody>
        </table>
        <?php
    }

Answer 2

Same code as @Maulik patel suggested But update

if( !current_user_can( 'edit_post' ) )

To

if( !current_user_can( 'edit_post', $post_id ) )

Answer 3

I actually managed to solve the problem. Here is the JS that did the job for me.

    jQuery(document).ready(function(){
  var addButton = document.getElementById('last-opp-bilde');
  //var deleteButton = document.getElementById('fjern-bilde');
  var img = document.getElementById('image-tag');
  var hidden = document.getElementById('img-hidden-field');
  var imageUploader = wp.media({
    title: 'Velg bilde',
    button: {
      text: 'Velg bilde(r)'
    },
    multiple: 'add'
  });

  addButton.addEventListener( 'click', function() {
    if (imageUploader) {
      imageUploader.open();
    }
  });

  imageUploader.on('open',function() {
    var selection = imageUploader.state().get('selection');
    ids = jQuery('#img-hidden-field-selected').val().split(',');
      ids.forEach(function(id) {
    attachment = wp.media.attachment(id);
    attachment.fetch();
    selection.add( attachment ? [ attachment ] : [] );
  });
  });

  imageUploader.on( 'close', function() {
    //var attachment = imageUploader.state().get('selection').first().toJSON();
    var attachment = imageUploader.state().get('selection');
    var ids = attachment.map( function (attachment) {
        return attachment.id;
    });
    hidden.setAttribute( 'value', ids.join(',') );
  });

  imageUploader.on( 'select', function() {
    //var attachment = imageUploader.state().get('selection').first().toJSON();
    var attachment = imageUploader.state().get('selection');
    var ids = attachment.map( function (attachment) {
        return attachment.id;
    });
    hidden.setAttribute( 'value', ids.join(',') );
  });
});