2

I want to upload images in my custom plugin options page.

<form action="?page=slideshow_options" method="post">
    <input type="file" name="async-upload" id="async-upload">
    <input type="submit" name="html-upload" id="html-upload" class="button" value="Upload">
</form>

If I try to check wether submit button was clicked with isset I get some weird errors. How can I get it to call a function uploadimages() for example?

2 Answers 2

4

Wow... this one is not a simple one... it's not a matter of calling the magic function uploadimages()... I wish it would :)

I've learned from a tutorial I cannot seem to find (but this one seems fair) and from analyzing other plugins.

The following is just a general orientation, sorry for not making a detailed manual. There may be flaws but hopefully you'll manage to join the pieces and find the way to do your magic.

You'll need to enqueue the following scripts and styles in your plugin's page:

function my_admin_scripts() {
    wp_enqueue_script('media-upload');
    wp_enqueue_script('thickbox');
    wp_register_script('your-plugin-js', THIS_PLUG_DIR . 'js/uploader.js', array('jquery', 'media-upload', 'thickbox'));
    wp_enqueue_script('your-plugin-js');
}

function my_admin_styles() {
    wp_enqueue_style('thickbox');
}

The upload button and the image container.

<?php
$img = (isset($link->link_image) && '' !== $link->link_image) ? '<img src="' . $link->link_image . '" >' : '';
$spanimg = sprintf('<div id="my-link-img">%s</div>', $img);
?>
<a id="upload_image_button" href="#"><?php _e('Set image', 'your-textdomain'); ?></a>
<?php echo $spanimg; ?>

And finally, the jQuery inside the file uploader.js where the trick happens:

jQuery(document).ready(function($) {    
    $('#upload_image_button').click(function() {
        formfield = $('#link_image').attr('name'); 
        tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true');
        return false;
    });

    window.send_to_editor = function(html) {
        imgurl = $('img',html).attr('src');
        imgsrc = '<img src="'+imgurl+'">';
        $('#link_image').val(imgurl); // this populates a text field with the image url
        $('#my-link-img').html(imgsrc); // this prints the image into a div
        tb_remove();
    }
});

These snippets were taken from a plugin of mine (which needs an update, as I learned quite a few things after releasing it).

Good luck!

2

File Upload using WordPress Settings API

The register_setting function saves the value attribute on form submission directly into the database. We can also alter or validate the value based on our choice. The register_setting function takes a third argument which is a callback, this callback is fired before it saves the settings into the database.

For uploading files through settings pages we can handle the uploads via the callback and then store the URL to the file in DB. Here is example code showing how to do that:

<?php

function demo_settings_page()
{
    add_settings_section("section", "Section", null, "demo");
    add_settings_field("demo-file", "Demo File", "demo_file_display", "demo", "section");  
    register_setting("section", "demo-file", "handle_file_upload");
}

function handle_file_upload($option)
{
    if(!empty($_FILES["demo-file"]["tmp_name"]))
    {
        $urls = wp_handle_upload($_FILES["demo-file"], array('test_form' => FALSE));
        $temp = $urls["url"];
        return $temp;   
    }

    return $option;
}

function demo_file_display()
{
   ?>
        <input type="file" name="demo-file" /> 
        <?php echo get_option('demo-file'); ?>
   <?php
}

add_action("admin_init", "demo_settings_page");

function demo_page()
{
  ?>
      <div class="wrap">
         <h1>Demo</h1>

         <form method="post" action="options.php">
            <?php
               settings_fields("section");

               do_settings_sections("demo");

               submit_button(); 
            ?>
         </form>
      </div>
   <?php
}

function menu_item()
{
  add_submenu_page("options-general.php", "Demo", "Demo", "manage_options", "demo", "demo_page"); 
}

add_action("admin_menu", "menu_item");

Here is a screenshot of the settings page: enter image description here

Answer based on this article http://qnimate.com/file-upload-using-wordpress-settings-api/

3
  • How do you get the url of the uploaded file? get_option('demo-file') only returns the filename. Oct 14, 2019 at 14:39
  • 1
    @TimHallman Use get_attached_file( 'file-id' ). I store attachment id in options. This piece of JS will probably help you bitbucket.org/snippets/drinkmaker/eLRoky
    – drinkmaker
    Oct 15, 2019 at 16:47
  • 1
    you need to add ` enctype='multipart/form-data'` to <form> otherwise file cannot be uploaded. Jul 7 at 7:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.