Add Image Upload To Navigation Menu

add-nav-menu-image-field.php

<?php
/**
 * Menu item custom fields example
 *
 * Copy this file into your wp-content/mu-plugins directory.
 *
 * @package Menu_Item_Custom_Fields_Example
 * @version 0.2.0
 * @author Dzikri Aziz <[email protected]>
 *
 *
 * Plugin name: Menu Item Custom Fields Example
 * Plugin URI: https://github.com/kucrut/wp-menu-item-custom-fields
 * Description: Example usage of Menu Item Custom Fields in plugins/themes
 * Version: 0.2.0
 * Author: Dzikri Aziz
 * Author URI: http://kucrut.org/
 * License: GPL v2
 * Text Domain: menu-item-custom-fields-example
 */


/**
 * Sample menu item metadata
 *
 * This class demonstrate the usage of Menu Item Custom Fields in plugins/themes.
 *
 * @since 0.1.0
 */
class Menu_Item_Custom_Fields_Example {

	/**
	 * Holds our custom fields
	 *
	 * @var    array
	 * @access protected
	 * @since  Menu_Item_Custom_Fields_Example 0.2.0
	 */
	protected static $fields = array();


	/**
	 * Initialize plugin
	 */
	public static function init() {
		add_action( 'wp_nav_menu_item_custom_fields', array( __CLASS__, '_fields' ), 10, 4 );
		add_action( 'wp_update_nav_menu_item', array( __CLASS__, '_save' ), 10, 3 );
		add_filter( 'manage_nav-menus_columns', array( __CLASS__, '_columns' ), 99 );

		/*Enqueue scripts for Edit Menu upload image*/
		add_action('admin_enqueue_scripts', function(){
			    wp_enqueue_media();
			    wp_enqueue_script( 'jt-nav-menu-edit', get_template_directory_uri().'/js/jt-nav-media-uploader.js', array('jquery'), '', true );
		});
	}


	/**
	 * Save custom field value
	 *
	 * @wp_hook action wp_update_nav_menu_item
	 *
	 * @param int   $menu_id         Nav menu ID
	 * @param int   $menu_item_db_id Menu item ID
	 * @param array $menu_item_args  Menu item data
	 */
	public static function _save( $menu_id, $menu_item_db_id, $menu_item_args ) {
		if ( defined( 'DOING_AJAX' ) && DOING_AJAX ) {
			return;
		}

		check_admin_referer( 'update-nav_menu', 'update-nav-menu-nonce' );

		if( isset($_POST['jt-img-id']) && !empty($_POST['jt-img-id'])  ){
			
			$value = $_POST['jt-img-id'][$menu_item_db_id];
			if( !empty($value) ){
				update_post_meta($menu_item_db_id, 'jt_hover_image', $value );
			}else{
				delete_post_meta($menu_item_db_id, 'jt_hover_image' );
			}
		}
			

	}


	/**
	 * Print field
	 *
	 * @param object $item  Menu item data object.
	 * @param int    $depth  Depth of menu item. Used for padding.
	 * @param array  $args  Menu item args.
	 * @param int    $id    Nav menu ID.
	 *
	 * @return string Form fields
	 */
	public static function _fields( $id, $item, $depth, $args ) {
		include get_template_directory().'/inc/nav/digthis-nav-menu-uploader.php';
	}


	/**
	 * Add our fields to the screen options toggle
	 *
	 * @param array $columns Menu item columns
	 * @return array
	 */
	public static function _columns( $columns ) {
		$columns = array_merge( $columns, self::$fields );

		return $columns;
	}
}
Menu_Item_Custom_Fields_Example::init();

nav-media-uploader.js

jQuery(function($){

  // Set all variables to be used in scope
  var frame,
      metaBox = $('.jt-bg-image-upload-wrapper'), // Your meta box id here
      addImgLink = metaBox.find('.upload-custom-img');
      delImgLink = metaBox.find( '.delete-custom-img');
     
  
  // ADD IMAGE LINK
  addImgLink.on( 'click', function( event ){
    
    event.preventDefault();
    
    var addImgLink1  = $(this).parent().parent().find('.upload-custom-img');
    var delImgLink1  = $(this).parent().parent().find( '.delete-custom-img');
    var imgContainer = $(this).parent().parent().find( '.custom-img-container');
    var imgIdInput   = $(this).parent().parent().find( '.jt-img-id' );

    console.log(imgIdInput);
    console.log(imgContainer);
    
    // If the media frame already exists, reopen it.
    // if ( frame ) {
    //   frame.open();
    //   return;
    // }
    
    // Create a new media frame
    frame = wp.media({
      title: 'Select or Upload Media Of Your Chosen Persuasion',
      button: {
        text: 'Use this media'
      },
      multiple: false  // Set to true to allow multiple files to be selected
    });

    
    // When an image is selected in the media frame...
    frame.on( 'select', function() {

      
      // Get media attachment details from the frame state
      var attachment = frame.state().get('selection').first().toJSON();

      // Send the attachment URL to our custom image input field.
      imgContainer.append( '<img src="'+attachment.url+'" alt="" style="max-width:100%;"/>' );

      // Send the attachment id to our hidden input
      imgIdInput.val( attachment.id );
  
      // Hide the add image link
      addImgLink1.addClass( 'hidden' );

      // Unhide the remove image link
      delImgLink1.removeClass( 'hidden' );

      frame.close();
    });

    // Finally, open the modal on click
    frame.open();
  });
  
  
  // DELETE IMAGE LINK
  delImgLink.on( 'click', function( event ){

    event.preventDefault();
	
	var addImgLink1  = $(this).parent().parent().find('.upload-custom-img');
    var delImgLink1  = $(this).parent().parent().find( '.delete-custom-img');
    var imgContainer = $(this).parent().parent().find( '.custom-img-container');
    var imgIdInput   = $(this).parent().parent().find( '.jt-img-id' );

    // Clear out the preview image
    imgContainer.html( '' );

    // Un-hide the add image link
    addImgLink1.removeClass( 'hidden' );

    // Hide the delete image link
    delImgLink1.addClass( 'hidden' );

    // Delete the image id from the hidden input
    imgIdInput.val( '' );

  });
});

nav-menu-uploader.php

<?php
    // Get WordPress' media upload URL
    $upload_link = esc_url( get_upload_iframe_src( 'image', $item->ID ) );

    // See if there's a media id already saved as post meta
    $your_img_id = get_post_meta( $item->ID, 'jt_hover_image', true );

    // Get the image src
    $your_img_src = wp_get_attachment_image_src( $your_img_id, 'full' );

    // For convenience, see if the array is valid
    $you_have_img = is_array( $your_img_src );
    ?>

    <div class="description description-wide jt-bg-image-upload-wrapper">
        <!-- Your image container, which can be manipulated with js -->
        <div class="custom-img-container">
            <?php if ( $you_have_img ) : ?>
                <img src="<?php echo $your_img_src[0] ?>" alt="" style="max-width:100%;" />
            <?php endif; ?>
        </div>

            <!-- Your add & remove image links -->
            <p class="hide-if-no-js">
                <a class="upload-custom-img <?php if ( $you_have_img  ) { echo 'hidden'; } ?>" 
                   href="<?php echo $upload_link ?>">
                    <?php _e('Set custom image') ?>
                </a>
                <a class="delete-custom-img <?php if ( ! $you_have_img  ) { echo 'hidden'; } ?>" 
                  href="#">
                    <?php _e('Remove this image') ?>
                </a>
            </p>

        <!-- A hidden input to set and post the chosen image id -->
        <input class="jt-img-id" name="jt-img-id[<?php echo $item->ID; ?>]" type="hidden" value="<?php echo esc_attr( $your_img_id ); ?>" />
    </div>

if any one get the following error [TypeError: this.activateMode is not a function]
use this two line of codes in your functions.php
*
wp_enqueue_script( 'lodash', '...' );
wp_add_inline_script( 'lodash', 'window.lodash = _.noConflict();', 'after' );
*

Thank you
it works
But replace line 82 with:
include 'nav-menu-uploader.php';
and put the nav-menu-uploader.php file side main file