Add meta box image upload option into options page

Question

This is custom Meta box image upload options under general post. I want the same options under add_options_page or add_menu_page. How should I do it?

  <?php
    /**
     * Adds a meta box to the post editing screen
     */
    function prfx_custom_meta() {
        add_meta_box( 'prfx_meta', __( 'Meta Box Title', 'prfx-textdomain' ), 'prfx_meta_callback', 'post' );
    }
    add_action( 'add_meta_boxes', 'prfx_custom_meta' );

    /**
     * Outputs the content of the meta box
     */
    function prfx_meta_callback( $post ) {
        wp_nonce_field( basename( __FILE__ ), 'prfx_nonce' );
        $prfx_stored_meta = get_post_meta( $post->ID );
        ?>

        <p>
            <label for="meta-image" class="prfx-row-title"><?php _e( 'Example File Upload', 'prfx-textdomain' )?></label>
            <input type="text" name="meta-image" id="meta-image" value="<?php if ( isset ( $prfx_stored_meta['meta-image'] ) ) echo $prfx_stored_meta['meta-image'][0]; ?>" />
            <input type="button" id="meta-image-button" class="button" value="<?php _e( 'Choose or Upload an Image', 'prfx-textdomain' )?>" />
        </p>


        <?php
    }     
    /**
     * Saves the custom meta input
     */
    function prfx_meta_save( $post_id ) {

        // Checks save status
        $is_autosave = wp_is_post_autosave( $post_id );
        $is_revision = wp_is_post_revision( $post_id );
        $is_valid_nonce = ( isset( $_POST[ 'prfx_nonce' ] ) && wp_verify_nonce( $_POST[ 'prfx_nonce' ], basename( __FILE__ ) ) ) ? 'true' : 'false';

        // Exits script depending on save status
        if ( $is_autosave || $is_revision || !$is_valid_nonce ) {
            return;
        }

        // Checks for input and sanitizes/saves if needed
        if( isset( $_POST[ 'meta-text' ] ) ) {
            update_post_meta( $post_id, 'meta-text', sanitize_text_field( $_POST[ 'meta-text' ] ) );
        }

        // Checks for input and saves if needed
        if( isset( $_POST[ 'meta-image' ] ) ) {
            update_post_meta( $post_id, 'meta-image', $_POST[ 'meta-image' ] );
        }

    }
    add_action( 'save_post', 'prfx_meta_save' );


    /**
     * Adds the meta box stylesheet when appropriate
     */
    function prfx_admin_styles(){
        global $typenow;
        if( $typenow == 'post' ) {
            wp_enqueue_style( 'prfx_meta_box_styles', plugin_dir_url( __FILE__ ) . 'meta-box-styles.css' );
        }
    }
    add_action( 'admin_print_styles', 'prfx_admin_styles' );


    /**
     * Loads the color picker javascript
     */
    function prfx_color_enqueue() {
        global $typenow;
        if( $typenow == 'post' ) {
            wp_enqueue_style( 'wp-color-picker' );
            wp_enqueue_script( 'meta-box-color-js', plugin_dir_url( __FILE__ ) . 'meta-box-color.js', array( 'wp-color-picker' ) );
        }
    }
    add_action( 'admin_enqueue_scripts', 'prfx_color_enqueue' );

    /**
     * Loads the image management javascript
     */
    function prfx_image_enqueue() {
        global $typenow;
        if( $typenow == 'post' ) {
            wp_enqueue_media();

            // Registers and enqueues the required javascript.
            wp_register_script( 'meta-box-image', plugin_dir_url( __FILE__ ) . 'meta-box-image.js', array( 'jquery' ) );
            wp_localize_script( 'meta-box-image', 'meta_image',
                array(
                    'title' => __( 'Choose or Upload an Image', 'prfx-textdomain' ),
                    'button' => __( 'Use this image', 'prfx-textdomain' ),
                )
            );
            wp_enqueue_script( 'meta-box-image' );
        }
    }
    add_action( 'admin_enqueue_scripts', 'prfx_image_enqueue' );

I would like to set options page under the upload option.

Answer 1

Below is option page code for upload image:

PHP CODE:

function your_enqueue_scripts(){
    wp_enqueue_script('media-upload');
    wp_enqueue_script('thickbox');
    wp_enqueue_style('thickbox');   
}
?>

JS CODE:

jQuery(document).ready(function($){
        //upload image                      
         $("#upload_image_button").click(function(event) {                          
             formfield = jQuery('#your_image').attr('name');                                                         
             tb_show('', 'media-upload.php?type=image&TB_iframe=true');                          
             return false;
        });
        window.send_to_editor = function(html) {
            if(formfield) {
                jQuery('#your_image').replaceWith('<input id="your_image"  type="text"  name="your_image"  value="" style="width:500px"   />');
                fileurl = jQuery('img','<div>'+html+'</div>').attr('src');                      
                jQuery('#your_image').val(fileurl);
                jQuery('#your_image_hidden').attr('value',fileurl);
            }
            tb_remove();
        }
});

HTML RENDERING:

if(get_option('your_image')!='')
        {   
        ?>
        <img src="<?php echo get_option('your_image');?>" name="your_image" id="your_image" height="100" width="100" />
        <input id="bos_logo_hidden"  type="hidden"  name="your_image" value="<?php echo get_option('your_image');?>" style="width:500px"  />
        <?php
        }
        else
        {
        ?>
        <input id="your_image"  type="text"  name="your_image" value="" style="width:500px"  />
        <?php
        }   
    ?>
    <br/><br/>
    <input id="upload_image_id"  type="hidden" name="upload_image_id" value="" readonly="readonly" />
    <?php
    if(get_option('your_image')!='')
        {
            ?>
            <input id="upload_image_button"  type="button"  value="Change Image"  class="button-primary " />
            <?php
        }
        else
        {
            ?>
            <input id="upload_image_button"  type="button" value="Upload Image" class="button-primary" />
            <?php
        }