Wordpress: Upload Image in Admin Options Page

Question

I am developing my first wordpress plugin. It only needs to allow a user to change a logo in a custom template and change a color scheme in the custom template.

I have made an admin options page and now want to add a field to allow a user to upload an image. How can I upload an image to the wp-content/uploads folder. So far, I have this within a table:

<td><input name="logo_image" type="file" id="logo_image" value="" /></td>

Is this the right approach? If so, how do I direct the file to the right folder? Doesn't wordpress have it's own way of handling file uploads?

It will create the upload media directory as empty,but is not rendering the default media popup section — , Jun 03 '15 at 14:05

score 24 · Answer 1 · edited May 23 '17 at 12:02

Add this code to your global custom option function.

if(function_exists( 'wp_enqueue_media' )){
    wp_enqueue_media();
}else{
    wp_enqueue_style('thickbox');
    wp_enqueue_script('media-upload');
    wp_enqueue_script('thickbox');
}

<p><strong>Header Logo Image URL:</strong><br />
                <img class="header_logo" src="<?php echo get_option('header_logo'); ?>" height="100" width="100"/>
                <input class="header_logo_url" type="text" name="header_logo" size="60" value="<?php echo get_option('header_logo'); ?>">
                <a href="#" class="header_logo_upload">Upload</a>

</p>    


<script>
    jQuery(document).ready(function($) {
        $('.header_logo_upload').click(function(e) {
            e.preventDefault();

            var custom_uploader = wp.media({
                title: 'Custom Image',
                button: {
                    text: 'Upload Image'
                },
                multiple: false  // Set this to true to allow multiple files to be selected
            })
            .on('select', function() {
                var attachment = custom_uploader.state().get('selection').first().toJSON();
                $('.header_logo').attr('src', attachment.url);
                $('.header_logo_url').val(attachment.url);

            })
            .open();
        });
    });
</script>

More info

or

Media uploader in theme and plugin

enter image description here

not sure where to add this... The admin menu is a php file, do i simply add the JS part ?? — Adeerlike, Jan 12 '16 at 13:25
this one depend on your function for your setting. how to create look hear https://codex.wordpress.org/Creating_Options_Pages — Ravi Patel, Jan 29 '16 at 13:51
from what i understand - wordpress recommends using the customizer API instead... https://developer.wordpress.org/themes/advanced-topics/customizer-api/ — Adeerlike, Jan 29 '16 at 14:23

score 2 · Answer 2 · answered Apr 05 '14 at 02:39

You can use the inbuilt function of wordpress

<?php wp_handle_upload( $file, $overrides, $time ); ?>

This will automatically move the file to the uploads folder

Or

You can write your own PHP function.

Additional Details can be found here -> Wordpress File Upload

Wordpress: Upload Image in Admin Options Page

2 Answers2

Linked