Wordpress: Upload Image in Admin Options Page - php

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?

Answer 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'); ?>">
Upload
</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

Answer 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