custom meta field in taxonomy media up loader button no working

Question

I have added a meta field to upload image in custom taxonomy. It has a problem that image is not uploading.

    function product_categories_custom_fields($tag)
    {
        // Check for existing taxonomy meta for the term you're editing
        $t_id = $tag->term_id; 
        // Get the ID of the term you're editing
        $term_meta = get_option("taxonomy_term_$t_id"); // Do the check

    ?>

   <tr class="form-field">
   <th scope="row" valign="top"><label for="cat_Image_url"><?php _e('Product            Category Banner URL'); ?></label></th>
   <td>
   <input id="banner-url" name="term_meta[banner]" type="text" style="width: 100%;" value="<?php echo $term_meta['banner'] ? $term_meta['banner'] : ''; ?>" name="image" />
   <input id="banner-button" field-id="banner-url" type="button" class="upload button" value="Upload Image" /><br />
   <span class="description"><?php _e('Upload Product Banner Image (Resolution: 1920x550)'); ?></span>
   </td>
   </tr>

   <tr class="form-field">
   <th scope="row" valign="top"><label for="cat_Image_url"><?php _e('Product Category Image URL'); ?></label></th>
   <td>
   <input id="image-url" name="term_meta[img]" type="text" style="width: 100%;" value="<?php echo $term_meta['img'] ? $term_meta['img'] : ''; ?>" name="image" />
   <input id="upload-button" field-id="image-url" type="button" class="upload button" value="Upload Image" /><br />
   <span class="description"><?php _e('Upload Product Category Image (Resolution: 370x370)'); ?></span>
   </td>
   </tr>

   <tr class="form-field">
   <th scope="row" valign="top"><label for="cat_sort_order"><?php _e('Product Sort Order'); ?></label></th>
   <td>
   <input id="banner-url" name="term_meta[sort_order]" type="text" style="width: 100%;" value="<?php echo $term_meta['sort_order'] ? $term_meta['sort_order'] : ''; ?>" />
   <span class="description"><?php _e('&nbsp;'); ?></span>
   </td>
   </tr>

javascript file after this in the same file is

<script type="text/javascript">
jQuery(document).ready(function($){

var mediaUploader;
window.field_id = '';

$('.upload').click(function(e) {
e.preventDefault();
window.field_id = $(this).attr('field-id');
// 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();
  $('#'+window.field_id).val(attachment.url);
 });
   // Open the uploader dialog
   mediaUploader.open();
  });

  });
 </script>

After this function and for hooking i have then made a function to use this

  function save_product_categories_custom_fields($term_id)
  {
  if (isset($_POST['term_meta'])) {
    $t_id = $term_id;
    $term_meta = get_option("taxonomy_term_$t_id");
    $cat_keys = array_keys($_POST['term_meta']);
    foreach ($cat_keys as $key) {
        if (isset($_POST['term_meta'][$key])) {
            $term_meta[$key] = $_POST['term_meta'][$key];
        }
    }
    //save the option array
    update_option("taxonomy_term_$t_id", $term_meta);
   }
 }
add_action('product_categories_edit_form_fields', 'product_categories_custom_fields', 10, 2);
add_action('edited_product_categories', 'save_product_categories_custom_fields', 10, 2);
add_action('product_categories_add_form_fields', 'product_categories_custom_fields', 10, 2);
add_action('create_product_categories', 'save_product_categories_custom_fields', 10, 2);

dingo_d dingo_d · Accepted Answer · 2016-03-17T07:26:55

Create a function to enqueue your javascript files:

function enqueue_scripts() {
   wp_enqueue_media();
   wp_enqueue_script('admin-script', plugin_dir_url( __FILE__ ) . 'js/admin.js', array( 'jquery' ), false); 
}

Now if you're in your theme, then the path to your admin.js script should be something like

get_template_directory_uri() .'/js/admin.js'

The first code is if you're creating a plugin. The admin.js file is the one with the javascript you've written above.

Now you just need to hook this function to admin_enqueue_scripts hook

add_action( 'admin_enqueue_scripts', 'enqueue_scripts' );

This should be it. If you inspect, on your page the scripts loaded, admin.js should be among them, along with the media upload scripts.

custom meta field in taxonomy media up loader button no working

1 Answers