Wordpress - Get an image using the media library - php

Question

I'm creating a plugin and i have an admin page
In the options of that page, i would like to add a button that allow me to open the Wordpress media library and select an image from it, after that, get the URL of the selected image and the alt attribute.
If it is possible, how can i do that using AJAX?

Answer 1

First you would need to enqueue wordpress core media scripts and a custom js script
function my_enqueue_media_lib_uploader() {
//Core media script
wp_enqueue_media();
// Your custom js file
wp_register_script( 'media-lib-uploader-js', plugins_url( 'media-lib-uploader.js' , __FILE__ ), array('jquery') );
wp_enqueue_script( 'media-lib-uploader-js' );
}
add_action('admin_enqueue_scripts', 'my_enqueue_media_lib_uploader');
Then let say you have this markup within your options page: an upload button and a text input to store the selected image url
<form method="post">
<input id="image-url" type="text" name="image" />
<input id="upload-button" type="button" class="button" value="Upload Image" />
<input type="submit" value="Submit" />
</form>
You need to add this javascript code to invoke the uploader popup
jQuery(document).ready(function($){
var mediaUploader;
$('#upload-button').click(function(e) {
e.preventDefault();
// If the uploader object has already been created, reopen the dialog
if (mediaUploader) {
mediaUploader.open();
return;
}
// Extend the wp.media object
mediaUploader = 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
mediaUploader.on('select', function() {
attachment = mediaUploader.state().get('selection').first().toJSON();
$('#image-url').val(attachment.url);
});
// Open the uploader dialog
mediaUploader.open();
});
});
Once the image is selected, your image-url input will now contain the url and will be saved on form submit.

Answer 2

The use case is: I have plugin that contain index.php as main file, I want to be able to click on a button and the media library opened and select an image from it, this image should be load into an image tag.
1- add script to your main PHP plugin
// index.php
// ...
// add script js for page
add_action('admin_enqueue_scripts', function () {
// Enqueue WordPress media scripts
if ($_GET["page"]== 'debug_area') {
wp_enqueue_media();
// Enqueue custom script that will interact with wp.media
wp_enqueue_script(
'myprefix_script',
plugins_url('/load_img.js', __FILE__),
array('jquery'),
'0.1');
}
});
// add ajax action to get the image async
add_action('wp_ajax_get_image_from_media_lib', function () {
if (isset($_GET['id'])) {
$image = wp_get_attachment_image(
filter_input(INPUT_GET, 'id', FILTER_VALIDATE_INT),
'medium',
false,
array('id' => 'image_preview')
);
$data = array(
'image' => $image,
);
wp_send_json_success($data);
} else {
wp_send_json_error();
}
});
2- add file JS that already included in enqueue
// load_img.js
jQuery(document).ready(_ => {
console.clear();
/**
* Define media_lib_frame as wp.media object
*/
const media_lib_frame = wp.media({
title: 'Select Media',
multiple: false,
library: {
type: 'image',
}
});
/**
* On close, get selections and save to the hidden input
* plus other AJAX stuff to refresh the image preview
*/
media_lib_frame.on('close', _ => {
const selection = media_lib_frame.state().get('selection');
const gallery_ids = selection.map(attachment => attachment['id']);
const ids = gallery_ids.join(",");
jQuery('input#idImage').val(ids);
loadImage(ids);
});
/**
* On open, get the id from the hidden input
* and select the appropriate images in the media manager
*/
media_lib_frame.on('open', _ => {
const selection = media_lib_frame.state().get('selection');
const ids = jQuery('input#idImage').val().split(',');
ids.forEach(id => {
const attachment = wp.media.attachment(id);
attachment.fetch();
selection.add(attachment ? [attachment] : []);
});
});
jQuery('button#btnOpenMediaLibFrame').click(e => {
e.preventDefault();
media_lib_frame.open();
});
});
// Ajax request to refresh the image preview
const loadImage = the_id => {
const data = {action: 'get_image_from_media_lib', id: the_id};
jQuery.get(ajaxurl, data, response => {
if (response.success === true) {
jQuery('#image_preview').replaceWith(response.data.image);
}
});
}
3- add this HTML into the function that responsible for render view
<img id="image_preview"/>
<input
type="hidden"
id="idImage"
class="regular-text"/>
<button
type='button'
class="button-primary"
id="btnOpenMediaLibFrame">
Select a image
</button>