Creating an Upload Function For an Options Page?

[Edwin]

For an options page I'm working on I would like instead of assigning an image URL have an upload function, so you can easily upload an image to a specific directory and that image will then be used for the created get_option function.


If you have some good bookmarks on this please let me know about them, because I find it hard to find some good information on options pages using an upload function directly from the options page.

Cheers!

[mfields]

Edwin, If you're comfortable with reading code, you might want to check out my Taxonomy Images plugin which harnesses the power of WordPress' media upload thick box to assign images to categories. IMO there is no need to create a new uploader because WordPress has already provided us with one. In addition, if you use the media library to store the image, you have the option of easily inserting this image into a post or assigning it to be a post image.

If you find the code does not make sense, I have no problem walking you through the process of adding functionality to your plugin here in the forum. Let me know what you are thinking.

[Edwin]

Thanks! - I'll check it out.

I'll need a day or so to look into it.

[Edwin]

Hi Michael,

I don't think this is what I'm looking for, or it might be but I just don't understand how to use it... which is more likely.


I've got an options page that already has some options, like a text box to create a custom message, managing footer codes like Google Analytics and advertisements.

It's the advertisement aspect that I would like to do different, right now you would have to manually upload a banner image and specify the URL for the image location as well as the URL of the destination page.

I would find it more user friendly if I can do the upload straight from the options page, it's also easier for others involved with the site to manage this task.

Something like this:

[mfields]

I don't think this is what I'm looking for, or it might be but I just don't understand how to use it... which is more likely.

I think that similar functionality to that demonstrated in the plugin will ultimately benefit your project especially if you are going to release this code publicly. I'm going to try to extract the pertinent bits from the plugin and post back in a little while. I've been meaning to do this anyway to write a tutorial so this thread is a great kick in the pants for me!

[Edwin]

I think that similar functionality to that demonstrated in the plugin will ultimately benefit your project especially if you are going to release this code publicly. I'm going to try to extract the pertinent bits from the plugin and post back in a little while. I've been meaning to do this anyway to write a tutorial so this thread is a great kick in the pants for me!

I'll keep a close eye on this thread then. ;)

[mfields]

Wow! that was a lot more work than I expected! But I think that I have successfully extracted everything and created a solution that will work for you and others.

I am not sure if you are making a plugin or a theme, but the following code should work for either purpose. I have tested it inside a plugin with success. Here's a break down of what you will need to do:

1. Require Custom Media Upload Function Library.
2. Enqueue thickbox scripts and styles.
3. Setup an array for all of the media upload buttons that you want to use.
4. Optional: Customize setting name and query var.
5. Add mfields_media_upload_init() to the list of functions called during the 'admin_init' action.
6. Add a custom page to the Admin Menu.
7. Create the custom Administration Page.
8. Define dir url for default image.

And example code:

 /* 1. Require Custom Media Upload Function Library. */
require_once( 'mfields-media-upload-library.php' );

/* 2. We need to make sure that the thickbox scripts + styles are included. */
function my_plugin_scripts() { wp_enqueue_script( 'thickbox' ); }
add_action( 'admin_print_scripts', 'my_plugin_scripts' );

function my_plugin_styles() { wp_enqueue_style( 'thickbox' ); }
add_action( 'admin_print_styles', 'my_plugin_styles' );

/* 3. Setup a multidimensional array for all of the media upload buttons that you will use. */
$mfields_media_upload_buttons = array(
    'taco' => array(
        'label' => 'This is a taco.',
        'link_text' => 'Select this image for your taco picture.'
        ),
    'bunny' => array(
        'label' => 'This is a bunny.',
        'link_text' => 'Select this image for your bunny picture.'
        )
    );
    
/* 4. Optional: Customize setting name and query var. */
#    $mfields_media_upload_setting_name = 'my_plugin';
#    $mfields_media_upload_query_var = 'my_plugin';
    
/* 5. Registers setting with WordPress */
add_action( 'admin_init', 'mfields_media_upload_init', 10 );

/* 6. Hook into Menu and add admin page. */
add_action( 'admin_menu', 'my_plugin_admin_menu' );
function my_plugin_admin_menu() {
    add_menu_page( 'My Settings', 'My Settings', 'level_10', 'my_settings', 'my_plugin_settings_page', '' );
}

/* 7. Display buttons on a custom admin page. */
function my_plugin_settings_page() {
    mfields_media_upload_control( 'taco' );
    mfields_media_upload_control( 'bunny' );
}

/* 8. Define url to default image */
$mfields_media_upload_default_image_dir_url = plugin_dir_url( __FILE__ ); 
  

[Basilakis]

It looks great for a plugin.

Although i am actually using http://magicfields.org/ and it is a really nice plugin. You might want to take a look.

It is a bigger implementation but it is a nice solution.

[Edwin]

Wow! that was a lot more work than I expected! But I think that I have successfully extracted everything and created a solution that will work for you and others.

Hi Michael,

Totally missed your post man, I'll definitely have a go with it and see if I can work it out.

Thank you!

[Otto]

Dealing with uploads is quite simple, actually. All you have to do is to create the input type=file bit, add the enctype to the form, and add special code to call wp_handle_upload to deal with the incoming file.

Here's a demo of a plugin with a settings page that has an upload form on it. It assumes you're uploading an image and tries to display it on the page. The file will be stored in the uploads directory, as per usual uploads. Nothing special there.

 <?php
/*
Plugin Name: Upload Demo
Description: Demonstrate a plugin that lets you upload an image
Author: Otto
Author URI: http://ottodestruct.com
License: GPL2

    Copyright 2010  Samuel Wood  (email : otto@ottodestruct.com)

    This program is free software; you can redistribute it and/or modify
    it under the terms of the GNU General Public License version 2, 
    as published by the Free Software Foundation. 
    
    You may NOT assume that you can use any other version of the GPL.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.
    
    The license for this software can likely be found here: 
    http://www.gnu.org/licenses/gpl-2.0.html
    
*/

// add the admin page and such
add_action('admin_init', 'ud_admin_init');
function ud_admin_init() {
    register_setting( 'ud_options', 'ud_options', 'ud_options_validate' );
    add_settings_section('ud_main', 'Main Section', 'ud_section_text', 'ud');
    add_settings_field('ud_filename', 'File:', 'ud_setting_filename', 'ud', 'ud_main');
}

// add the admin options page
add_action('admin_menu', 'ud_admin_add_page');
function ud_admin_add_page() {
    $mypage = add_options_page('Upload Demo', 'Upload Demo', 'manage_options', 'ud', 'ud_options_page');
}

// display the admin options page
function ud_options_page() {
?>
    <div class="wrap">
    <h2>Upload Demo</h2>
    <p>You can upload a file. It'll go in the uploads directory.</p>
    <form method="post" enctype="multipart/form-data" action="options.php">
    <?php settings_fields('ud_options'); ?>
    <?php do_settings_sections('ud'); ?>
    <p class="submit">
    <input type="submit" name="Submit" class="button-primary" value="<?php esc_attr_e('Save Changes') ?>" />
    </p>
    </form>

    </div>
    
<?php
}

function ud_section_text() {
    $options = get_option('ud_options');
    echo '<p>Upload your file here:</p>';
    if ($file = $options['file']) {
        // var_dump($file);
        echo "<img src='{$file['url']}' />";
    }
}

function ud_setting_filename() {
    echo '<input type="file" name="ud_filename" size="40" />';
}

function ud_options_validate($input) {
    $newinput = array();
    if ($_FILES['ud_filename']) {
        $overrides = array('test_form' => false); 
        $file = wp_handle_upload($_FILES['ud_filename'], $overrides);
        $newinput['file'] = $file;
    }
    return $newinput;
}  

Note that almost all of that is merely creating the settings page.

• ud_admin_init registers the setting and creates the relevant sections and fields.
• ud_admin_add_page creates the options page for the Upload Demo.
• ud_options_page displays the options page. Only thing special here is the enctype="multipart/form-data" bit, to allow file uploads to work.
• ud_section_text gets called to display the section intro. I chose to display the uploaded image here.
• ud_setting_filename is the input piece for the file browser and such.
• ud_options_validate is called to handle the resulting form submission. It checks for the presence of the file in the $_FILES superglobal, then calls wp_handle_upload to deal with it. wp_handle_upload returns an array of info about the resulting file, which we store in our options setting for later usage. The options are returned here, and WordPress handles saving them for us.

Settings pages can be really, really easy once you start using the Settings API.


Edit: Also note the "test_form" override being set to false? This is because wp_handle_upload, by default, does nothing. It ignores the file upload. You have to explicitly set test_form to false to get it to work. This is handy for development, when you don't want your file uploads actually happening while you test other pieces.