WordPress: Upload Image in Admin Options Page

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:

Read More
<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?

Related posts

Leave a Reply

2 comments

  1. 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

  2. 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