Posted By

FatFolderDesigner on 10/21/12


Tagged

plugin wordpress upload theme Development


Versions (?)

Intergrating the wordpress media uploader into your plugin


 / Published in: PHP
 

URL: http://fatfolderdesign.com/684/wordpress/implementing-the-wordpress-media-uploader-into-your-plugin

It's a 3 part process, first is the PHP that you need to run, which includes the appropriate scripts and styles into the admin header, then you need an html button and input field to put the stored value in, then you need some jQuery to open the popup and get the appropriate information from it (then close it again).

There more information on implementation at the URL.

  1. // PHP, adds the appropriate scripts and styles in admin
  2. add_action('admin_print_scripts',array(&$this,'uploader_scripts'));
  3. add_action('admin_print_styles',array(&$this,'uploader_styles'));
  4. public function uploader_scripts(){
  5. wp_enqueue_script('media-upload');
  6. wp_enqueue_script('thinkbox');
  7. }
  8. public function uploader_styles(){
  9. wp_enqueue_style('thickbox');
  10. }
  11.  
  12. // The html for the button and hidden input for result (super simple)
  13. <input id="backdrop_upload_button" value="Upload/Select Image" type="button" class="button" />
  14. <input type="hidden" name="the_image" id="the_image" value="<?= $settings['the_image'] ?>" />
  15.  
  16. // The jQuery to open the media uploader and get the response
  17. var $ = jQuery;
  18. // Handels image uploading
  19. $(document).ready(function(){
  20. $("input#upload_button").click(function(){
  21. tb_show('','media-upload.php?type=image&post_id=1&TB_iframe=true&flash=0&backdrop=true');
  22. return false;
  23. })
  24. window.send_to_editor=function(html){
  25. var img = $('<div>'+html+'</div>').find('img').attr('src');
  26. $('#the_image').val(img);
  27. tb_remove();
  28. };
  29. });

Report this snippet  

You need to login to post a comment.