How do I make multiple image uploads with WordPress metabox?

wordpress custom post type meta box image upload
wordpress custom meta box image upload
wordpress add multiple image upload custom field to any post type
wordpress custom meta box multiple fields
multiple image upload in wordpress
wordpress add multiple images to custom post type
wordpress add meta box textarea
wordpress custom field image upload

Hello

I created an Image upload with WordPress Meta-box, but it works only with "JPG" extension

By this code

function add_custom_meta_boxes() {

    // Define the custom attachment for posts
    add_meta_box(
        'wp_custom_attachment',
        'Product Images',
        'wp_custom_attachment',
        'post',
        'normal'
    );


} // end add_custom_meta_boxes
add_action('add_meta_boxes', 'add_custom_meta_boxes');

function wp_custom_attachment() {

    wp_nonce_field(plugin_basename(__FILE__), 'wp_custom_attachment_nonce');

    $html = '<p class="description">';
        $html .= 'Upload your Image here.';
    $html .= '</p>';
    $html .= '<input type="file" id="wp_custom_attachment" name="wp_custom_attachment" value="" size="25" />';

    echo $html;

} // end wp_custom_attachment

function save_custom_meta_data($id) {

    /* --- security verification --- */
    if(!wp_verify_nonce($_POST['wp_custom_attachment_nonce'], plugin_basename(__FILE__))) {
      return $id;
    } // end if

    if(defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
      return $id;
    } // end if

    if('page' == $_POST['post_type']) {
      if(!current_user_can('edit_page', $id)) {
        return $id;
      } // end if
    } else {
        if(!current_user_can('edit_page', $id)) {
            return $id;
        } // end if
    } // end if
    /* - end security verification - */

    // Make sure the file array isn't empty
    if(!empty($_FILES['wp_custom_attachment']['name'])) {

        // Setup the array of supported file types. In this case, it's just JPG.
        $supported_types = array('image/jpg', 'image/jpeg', 'image/pjpeg');

        // Get the file type of the upload
        $arr_file_type = wp_check_filetype(basename($_FILES['wp_custom_attachment']['name']));
        $uploaded_type = $arr_file_type['type'];

        // Check if the type is supported. If not, throw an error.
        if(in_array($uploaded_type, $supported_types)) {

            // Use the WordPress API to upload the file
            $upload = wp_upload_bits($_FILES['wp_custom_attachment']['name'], null, file_get_contents($_FILES['wp_custom_attachment']['tmp_name']));

            if(isset($upload['error']) && $upload['error'] != 0) {
                wp_die('There was an error uploading your file. The error is: ' . $upload['error']);
            } else {
                add_post_meta($id, 'wp_custom_attachment', $upload);
                update_post_meta($id, 'wp_custom_attachment', $upload);
            } // end if/else

        } else {
            wp_die("The file type that you've uploaded is not a JPG.");
        } // end if/else

    } // end if

} // end save_custom_meta_data
add_action('save_post', 'save_custom_meta_data');

function update_edit_form() {
    echo ' enctype="multipart/form-data"';
} // end update_edit_form
add_action('post_edit_form_tag', 'update_edit_form');

and it`s work good.

My question now is "How do I create a multiple image uploads and give it more supported_types?"

Thank you

i find that code in site and did some modification on it

//***************************** Start banner images metabox in page page ***********************



function call_Multi_Image_Uploader()
{
    new Multi_Image_Uploader();
}
function get_images($post_id=null)
{
    global $post;

    if ($post_id == null)
    {
        $post_id = $post->ID;
    }

    $value = get_post_meta($post_id, 'images', true);
    $images = unserialize($value);
    $result = array();
    if (!empty($images))
    {
        foreach ($images as $image)
        {
            $image = str_replace('.jpg', '-1903x428.jpg' , $image);
            $result[] = $image;
        }
    }
    return $result;
}

if (is_admin())
{
    add_action('load-post.php', 'call_Multi_Image_Uploader');
    add_action('load-post-new.php', 'call_Multi_Image_Uploader');
}
/**
 * Multi_Image_Uploader
 */
class Multi_Image_Uploader
{
    var $post_types = array();

    /**
     * Initialize Multi_Image_Uploader
     */
    public function __construct()
    {
        $this->post_types = array('page');     //limit meta box to certain post types
        add_action('add_meta_boxes', array($this, 'add_meta_box'));
        add_action('save_post', array($this, 'save'));
        add_action('admin_enqueue_scripts', array($this, 'enqueue_scripts'));
    }

    /**
     * Adds the meta box container.
     */
    public function add_meta_box($post_type)
    {
        if (in_array($post_type, $this->post_types))
        {
            add_meta_box(
                    'multi_image_upload_meta_box'
                    , __('Banner Image Upload', 'textdomain')
                    , array($this, 'render_meta_box_content')
                    , $post_type
                    , 'advanced'
                    , 'high'
            );
        }
    }
    /**
     * Save the images when the post is saved.
     *
     * @param int $post_id The ID of the post being saved.
     */
    public function save($post_id)
    {    /*
         * We need to verify this came from the our screen and with proper authorization,
         * because save_post can be triggered at other times.
         */

        // Check if our nonce is set.
        if (!isset($_POST['inner_custom_box_nonce']))
            return $post_id;

        $nonce = $_POST['inner_custom_box_nonce'];

        // Verify that the nonce is valid.
        if (!wp_verify_nonce($nonce, 'inner_custom_box'))
            return $post_id;

        // If this is an autosave, our form has not been submitted,
        //     so we don't want to do anything.
        if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE)
            return $post_id;

        // Check the user's permissions.
        if ('page' == $_POST['post_type'])
        {
            if (!current_user_can('edit_page', $post_id))
                return $post_id;
        } else
        {
            if (!current_user_can('edit_post', $post_id))
                return $post_id;
        }

        /* OK, its safe for us to save the data now. */
        // Validate user input.
        $posted_images = $_POST['images'];
        $images = array();
        if (!empty($posted_images))
        {
            foreach ($posted_images as $image_url)
            {
                if (!empty($image_url))
                    $images[] = esc_url_raw($image_url);
            }
        }

        // Update the images meta field.
        update_post_meta($post_id, 'images', serialize($images));
    }

    /**
     * Render Meta Box content.
     *
     * @param WP_Post $post The post object.
     */
    public function render_meta_box_content($post)
    {

        // Add an nonce field so we can check for it later.
        wp_nonce_field('inner_custom_box', 'inner_custom_box_nonce');

        // Use get_post_meta to retrieve an existing value from the database.
        $value = get_post_meta($post->ID, 'images', true);

        $metabox_content = '<div id="images"></div><input type="button" onClick="addRow()" value="Add Image" class="button" />';
        echo $metabox_content;

        $images = unserialize($value);

        $script = "<script>
            itemsCount= 0;";
        if (!empty($images))
        {
            foreach ($images as $image)
            {
                $script.="addRow('{$image}');";
            }
        }
        $script .="</script>";
        echo $script;
    }

    function enqueue_scripts($hook)
    {
        if ('post.php' != $hook && 'post-edit.php' != $hook && 'post-new.php' != $hook)
            return;
        wp_enqueue_script('banner_uploader',  get_template_directory_uri()."/js/banner_uploader.js", array('jquery'));
    }

}


//***************************** END banner images metabox in page page ***********************

How do I make multiple image uploads with WordPress metabox , i find that code in site and did some modification on it //***************************** Start banner images metabox in page page *********************** function  The way to display uploaded images in a WordPress gallery is quite simple: get the image IDs, put them in the gallery shortcode and run it. And this can be done without any WordPress gallery plugin. And this can be done without any WordPress gallery plugin.

There is a quick and good way/practice to achieve this.

http://metabox.io/meta-box/

Image Upload, The image upload field displayes an inline upload area that you can drag and drop images into. Note: it might affect other posts if you use same file for multiple posts. To get the uploaded images, use the helper function rwmb_meta():. Overview. The image upload field displayes an inline upload area that you can drag and drop images into. You can also select images from the Media Library. This field is very similar to image advanced. The only different is the image advanced shows a + Add Media button instead of the inline upload area.

I know you did not ask for a plugin but for multiple image uploads I stumbled upon this free plugin that fits all needs: ACF Photo Gallery Field. Simple add this gallery field to the post type you want and you can easily attach as many images as you want. Also fetching the images can be done with a few lines of code.

how make input and image upload in metabox, hi i need in metabox one row that have input and upload image . example under function() { // We set multiple to false so only get one image from the uploader  WordPress makes it pretty easy to capture additional information with your posts through the use of custom meta boxes. Adding checkboxes, select options, textareas, radio buttons, and other input elements are easy. But giving users the ability to upload files from a post screen requires a little more work. If you’re not interested in tapping into the Media Uploader, then here’s how you can programmatically create a WordPress upload meta box.

[Multi Image Metabox] Support, Search forums. Support » Plugin: Multi Image Metabox. Search for: Search forums. or Log in to Create a Topic Video upload is not working. Started by: Nick-  Optional. Note: it might affect other posts if you use same image for multiple posts. max_status: Display how many images uploaded/remaining. Applied only when max_file_uploads is defined. true (default) or false. Optional. image_size: Image size that displays in the edit page. Optional. Default thumbnail. Image size is used to make sure images

Create Multiple Images Upload using Custom field or Meta box in , Create Multiple Images Upload using Custom field or Meta box in Wordpress <?​php /** * Plugin Name: My Gallery */ add_action(  For a project I’m working on, I had to create a file upload in a post meta. I wanted to utilize the WordPress media uploader so I cut down the manual labor, however all code snippets I found either did not work or broke the “Add media” button for the editor. In order to accomplish the task at hand I’ll follow the following plan: 1.

Storing multiple images in a metabox field using a custom , was to use the native WordPress media uploader code to create a custom dialog that would be used for adding multiple images to a metabox  Nice Tutorial post but it’s for just single image upload. In post you have not mention how to display uploaded image on theme pages. Please write about how to upload multiple images dynamically as you shown in first image of client site. That would be great. Waiting for your updated guided post. Thanks

Comments
  • i see meta box with add image button but that's all, nothing happen when i press this botton
  • Sorry for inconvenient. can you please share if you got any after the button press? Please added all respected js to proper work
  • No I don't get anything, it's probably Javascript but i see one js file which is banner_upload, so where to get that?! it's not in metabox and i can't see it in google! so where to find it thanks!
  • @Nisarg Thakkar How to display out the images uploaded with this one in template files. Backend working fine. But in front end i am struggling.
  • addRow is not defined
  • thanks for your answer, but this is an plugin and i created my code but it`s give me own upload image. I search for how can i do multiple uploads with my code.
  • This is essentially an advertisement.