WordPress Using Media uploader in your plugin

• Tweet

• Tweet

Hi Guys,

I have to agree that with wordpress, possibilities are infinite (may be). As I am still learning WordPress API and still have to master the art of Hooks and Crooks (I mean filters) ,

I had developed very basic plugins for my couple of website but they were really basic. So everyday with WordPress I am learning something new. Last week I learned how can I use the available Media Uploader that ships with WordPress. So rather to reinvent the wheel, you can use whatever is already available

Ok so lets get started.

First You will need couple of includes so in you admin_init action or whichever hook you are using to enqueue the scripts put this code there

wp_enqueue_script('thickbox');
wp_enqueue_script('media-upload');
wp_enqueue_style('thickbox');

This makes sure that thickbox (modaled window) and media-upload scripts are available. As you notice that we’ve imported thinkbox style too. WordPress knows where these scripts are so you don’t have to worry about the paths here.

Ok So this is done Now we will create a very basic form as shown below. This form will be on one of your Admin pages.

<table class="widefat">
<tr valign="top">
<th scope="row">Upload CSV</th>
<td><label for="upload_image"></label>
<input id="upload-csv" type="text" size="36&#8243; name="upload_csv" value="" />
<input id="upload-csv-button" type="button" class="button-primary" value="Upload csv" />
<br />Upload your CSV file..</strong>
</td>
</tr>
</table>

Advertisement

Now that our HTML Form has been setup lets do some jQuery magic to open media uploader page. you can place this script just under your form or you can include it in your JS file. because we are using document.ready (pseudo) so the script wont execute until the page get loaded completely.

<script type="text/javascript">
                jQuery(document).ready(function() { 
                    jQuery('#upload-csv-button').click(function() { // bind click event to out form button
                     tb_show('', 'media-upload.php?type=file&TB_iframe=true'); // type= can be image too, browse codex for another option
                     return false;
                    }); // this will open media uploader                     
                    window.send_to_editor = function(html) { // when insert into post is clicked                    
                        var a =jQuery(html); // we get path to file                
                        fileurl = a.attr('href'); // if you are using type=image then use 'src' instead of 'href'
                        jQuery('#upload-csv').val(fileurl);
                        tb_remove();
                        // do you other AJAX magic here
                    }                 
                });
</script>

Ok so this way we will have our file or image uploaded and have path of the Image which we can store in database or do other manipulations.

I hope this Tip will help you.

I will be writing on how to add custom buttons on top of content editor soon so stay tuned

Till then Adios!

Advertisement