Home Home Adding Multiple Images using WordPress Media Uploader

Adding Multiple Images using WordPress Media Uploader

This post is a part 2 of Using WordPress Media Uploader in Plugins and Themes post series.
⎗ Previous post in the series is Adding a Single Image using WordPress Media Uploader.

In this tutorial we will see how to open the WordPress media uploader and let user upload or select multiple images. Once the images are selected, media uploader fires the callback with the selected images information.

First you need make sure that Media Uploader is enqueued. Here is the code to enqueue media uploader

function enqueue_media_uploader()
{
    wp_enqueue_media();
}

add_action("admin_enqueue_scripts", "enqueue_media_uploader");

Now we can use the interfaces provided by media uploader library to open it. Here is the code on how to open it and get the images data once user selects the images.

var media_uploader = null;

function open_media_uploader_multiple_images()
{
    media_uploader = wp.media({
        frame:    "post",
        state:    "insert",
        multiple: true
    });

    media_uploader.on("insert", function(){

        var length = media_uploader.state().get("selection").length;
        var images = media_uploader.state().get("selection").models

        for(var iii = 0; iii < length; iii++)
        {
            var image_url = images[iii].changed.url;
            var image_caption = images[iii].changed.caption;
            var image_title = images[iii].changed.title;
        }
    });

    media_uploader.open();
}

You need to call the open_media_uploader_multiple_images() JavaScript function to launch the media uploader and fire callback when selection is completed.

Narayan Prusty
Adding a Single Image using WordPress Media UploaderAdding Image Gallery using WordPress Media Uploader

Leave a Reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

Narayan Prusty

I am a full-stack web developer. I specialize in Blockchain and JavaScript. This is my personal blog where I write about programming and technologies that I learn and feel interesting to share.

4 years ago WordPress
Share this
Related Articles