Use WordPress’s default WP-Media library for your custom file uploader.

Posted on Posted in PHP, Technology
Use WordPress's default WP-Media library for your custom file uploader
Use WordPress’s default WP-Media library for your custom file uploader

Sometime we need to upload a media for our requirement in a custom plugin, in a widget or in any wordpress module. Inspite of using basic file upload button, we can use wordpress’s own wp-media library and use already uploaded images as well.

There are some code tweeks for using this. so when using wp-media for your upload file section, we can save Media-ID instead of saving Full Image Path and get the image path from that ID by easy wordpress functions.

You can check the demo for this, from my recent Plugin : Custom Advertisements Management Plugin

Here is the code regarding this :

First you need to include some required wordpress files :


Now create a form where you want to add that media field

<form enctype="multipart/form-data" method="POST"> 
<div class="media-field">
<div class="media_upload_field"> 
<label for="upload_image"> 
<input class="upload_button" type="button" value="Upload Media" title="Upload Media" /> 
<div class = 'uploaded_image'></div> 
<input type="submit" value="Upload image" name="submit" /> 

Now some jQuery tweeks, Bind that upload button with the wp-media library thickbox.

<br />
jQuery('.upload_button').live('click', function() {
tb_show('', 'media-upload.php?TB_iframe=true');

Now get the selected image when user press the click on ‘Insert into Post’ button by javascript code. and in the response of the ajax request you get the full media info and place that image thumbnail with image info in the form.

window.send_to_editor = function(html) { 
var htmlDv = '<div class = "hdAttData" style = "display:none;">'+html+'</div>'; 
var mediaUrl = jQuery('body').find('div.hdAttData').last().find('a').attr('href'); 
var data = { 
'attachementUrl': mediaUrl, 
'action'        : 'ajax_media_upload'
};, data, function(response) { 
var data = jQuery.parseJSON(response); 
var imgURL = data.attachement_url; 
var img = jQuery('<img src="'+imgURL+'"/>').load(function(){ 
alert('Something wrong occured, Please try again.'); 
<p>   function appendAddAttachment(response){ 
var data = jQuery.parseJSON(response); 
jQuery('.uploaded_image').html("<div class='add'><img src="+data.attachement_url+" width=100><input type='hidden' name='uploaded_image_id' value="+data.attachment_id+ "></div>"); 

Now bind that ajax request to a php function and perform specific operations on inserted media. in this example i am getting all the information regarding the inserted media. you can also put some validation here for your media. In this example i am validating to upload only images here by checking Mime-type of that media.

 function ajax_media_upload(){ 
$response = array(); 
if(!filter_var($_REQUEST['attachementUrl'], FILTER_VALIDATE_URL) === false){ 
$attachment_Id = get_image_id_from_url($_REQUEST['attachementUrl']); 
$file_attachment = get_post($attachment_Id); 
 		if (!empty($file_attachment)) { 
if($file_attachment->post_mime_type == 'image/jpeg' || $file_attachment->post_mime_type == 'image/pjpeg' || $file_attachment->post_mime_type == 'image/png' || $file_attachment->post_mime_type == 'image/gif'){ 
$attachement_url = wp_get_attachment_url($attachment_Id); 
 		$response['attachment_id'] = $attachment_Id; 
$response['attachement_url'] = $attachement_url; 
$response['mime_type'] = $file_attachment->post_mime_type; 
$response['link'] = $file_attachment->post_excerpt; 
echo json_encode($response); 
$response['message'] = "Something wrong occured, Please try again."; 
echo json_encode($response); 
 function get_image_id_from_url($image_url) { 
global $wpdb; 
$attachment = $wpdb->get_col($wpdb->prepare("SELECT ID FROM $wpdb->posts WHERE guid='%s';", $image_url )); 
return $attachment[0]; 
 add_action( 'wp_ajax_ajax_media_upload', 'ajax_media_upload' ); 

Now you can see the Uploaded image in your form and on click on the submit button, you’ll also get the image ID in $_POST variable. Then save that Image ID in database as per your need.

Now whenever you want that image, you have the Image ID stored. Put that image Id in below wordpress function to get the image.

$image_url = wp_get_attachment_url($image_id); 
echo "<img src = $image_url />"; 

If you need any help integrating this into your system. Post your queries in the comments below or feel free to contact me.