画像選択ができるカスタムフィールドを追加する方法について

カスタムフィールドで画像選択ボタンを設置したいと思っているのですが、苦戦しています。WordPressのバージョンは4.9.5です。ご助言いただけると幸いです。

まずは、functions.phpに以下を追加して、画像選択用のカスタムフィールドを追加しました。併せてmedia-uploader.jsを呼び出しています。

function uploader_script_load() { 
  wp_enqueue_script( 'media-uploader', get_template_directory_uri() . '/js/media-uploader.js', array(), '1.0', true );
  wp_enqueue_script('thickbox');
}
add_action('admin_print_scripts', 'uploader_script_load');
    
function image_meta() {
  add_meta_box('image-meta', '画像選択', 'image_meta_fields', 'post', 'normal', 'high');
}
add_action('admin_menu', 'image_meta');

function image_meta_fields($post){
  echo wp_nonce_field('image-meta', 'my_meta_nonce');
  $add_img = get_post_meta($post->ID, 'add_img' );
  $add_img[0] = (isset($add_img[0])) ? $add_img[0] : '';
  $view = ($add_img[0] !== '') ? '<img src="' . $add_img[0] . '">' : ''; 
  $html = '<fieldset>' 
        . '<label for="add_img">画像：</label>'
        . '<input id="add_img" type="text" size="50" name="add_img" value="' . $add_img[0] . '">'
        . '<input class="upload_button" type="button" value="画像の選択">'
        . '<input class="media_clear" type="button" name="media_clear" value="クリア">'
        . '<div id="view" class="view">' . $view . '</div>'
        . '</fieldset>';
  echo $html;
}

function image_meta_save($post_id){
  if (isset($_POST['my_meta_nonce_wpnonce']) && !wp_verify_nonce( $_POST['my_meta_nonce'], 'image-meta')) {
    return $post_id;
  }
  if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
    return $post_id;
  }
  if (isset($_POST['post_type']) && 'imagemeta' == $_POST['post_type']) {
    if (!current_user_can('edit_post', $post_id)) {
      return $post_id;
    }
  } else {
    return $post_id;
  }
  // フォームの値を取得
  $upload_img = $_POST['add_img'];
  // フォームの値を更新
  if ($upload_img == '') {
    delete_post_meta($post_id, 'add_img');
  } else {
    update_post_meta($post_id, 'add_img', $upload_img);
  }
}
add_action('save_post', 'image_meta_save');

media-uploader.jsの中身はhttps://firegoby.jp/archives/4031の情報を参考にしました。

jQuery(document).ready(function($){
    var custom_uploader;
    $('.upload_button').click(function(e) {
        e.preventDefault();
        if (custom_uploader) {
            custom_uploader.open();
            return;
        } 
        custom_uploader = wp.media({
            title: 'Choose Image',
            button: {
                text: 'Choose Image'
            },  
            multiple: true
        }); 
        custom_uploader.on('select', function() {
            var images = custom_uploader.state().get('selection');
            images.each(function(file){
                $('#view').append('<img src="'+file.toJSON().url+'" />');
            });
        }); 
        custom_uploader.open();
    }); 
});

投稿画面にカスタムフィールドと画像選択ボタンは表示できたのですが、ボタンをクリックしても何も反応しません。Chromeのデベロッパーツールでコンソールを確認すると、以下のようなエラーが表示されてしまいます。

HTMLInputElement.<anonymous> (media-uploader.js:13)
HTMLInputElement.dispatch (load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,jquery-ui-position,wp-a11y,u&load[]=nderscore,wp-pointer,quicktags,jquery-ui-draggable,jquery-ui-tabs,jquery-ui-resizable,jquery-ui-button,jquery-ui-dialog&ver=4.9.5:3)
HTMLInputElement.r.handle (load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,jquery-ui-position,wp-a11y,u&load[]=nderscore,wp-pointer,quicktags,jquery-ui-draggable,jquery-ui-tabs,jquery-ui-resizable,jquery-ui-button,jquery-ui-dialog&ver=4.9.5:3)

カスタムフィールドでメディアアップローダーの呼び出しをする方法について、ご教示いただけると大変ありがたいです。

どうぞよろしくお願い申し上げます。