QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Adding a Single Image using WordPress Media Uploader

Adding a Single Image using WordPress Media Uploader

This post is a part 1 of Using WordPress Media Uploader in Plugins and Themes post series.
⎘ Next: Adding Multiple Images using WordPress Media Uploader.

In this tutorial we will see how to open the WordPress media uploader and let user upload or select a single image. Once the image is selected, media uploader fires the callback with the selected image 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 image data once user selects the image.

var media_uploader = null;

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

    media_uploader.on("insert", function(){
        var json = media_uploader.state().get("selection").first().toJSON();

        var image_url = json.url;
        var image_caption = json.caption;
        var image_title = json.title;
    });

    media_uploader.open();
}

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

Feb 28, 2015Narayan Prusty
Remove HTML Tags from String using PHPAdding Multiple Images using WordPress Media Uploader
Comments: 8
  1. Ghafor Sabury
    5 years ago

    That was a great and wonderful tutorial for me. would you please give details about wp.media({
    frame: “post”,
    state: “insert”,
    multiple: false
    })?

    ReplyCancel
  2. Brian
    5 years ago

    This looks like exactly what I need. Where should I put the enqueue function to make the uploader accessible on a specific post or page?

    ReplyCancel
    • Brian
      5 years ago

      never mind – the internet is a wonder thing.

      ReplyCancel
  3. chirag
    6 years ago

    how to get attachment id please reply asap

    ReplyCancel
    • Junaid
      6 years ago

      http://prntscr.com/bxoraf
      Hey Chirag you can have a look at the json object and there you will find whatever you need. Have a look at the screenshot

      ReplyCancel
    • 7up
      6 years ago

      Use
      json.id

      ReplyCancel
  4. Rob
    6 years ago

    Thanks that’s a great tutorial.
    One question, how can I fire the callback?

    ReplyCancel
  5. Tharindu
    7 years ago

    It worked! Thanks!!!!

    ReplyCancel

Leave a Reply to Junaid Cancel 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`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

8 years ago 8 Comments WordPress
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
Related Articles
  • Adding Multiple Images using WordPress Media Uploader
  • Adding Image Gallery using WordPress Media Uploader
  • Adding a Video using WordPress Media Uploader
  • Adding a Audio Playlist using WordPress Media Uploader
  • Using WordPress Media Uploader on Frontend
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license