I have to create a custom WP plugin for work. I have never done anything like this before. so far i am able to upload the images, and see them in their respective preview boxes. However, my problem is getting them to save and stay displayed after the form is submitted. What am I missing or doing wrong?

options-page-wrapper.php

    <form name="upload_form" method="post" action="">
        <input type="hidden" name="upload_form_submitted" value="Y">

          <table class="form-table">
            <tr>
                <th class="row-title">Base Image</th>
                <th>Hover Image</th>
                <th>Link To</th>
            </tr>
            <tr valign="top">
                <td>

                <div class='image-preview-wrapper'>
                    <img name="image-preview1" id='image-preview1' src='<?php echo wp_get_attachment_image_src(get_option('image_1')); ?>' height='100'>
                </div>
                <p>
                <input class="btn" id="upload-button1" type="button" class="button" value="Upload Image" />

                <input type='hidden' name='image_id1' id='image_id1' value='<?php echo get_option('image_1'); ?>'>
                </p>

                </td>
                <td>

                    <div class='image-preview-wrapper'>
                        <img name="image-preview2" id='image-preview2' src='<?php echo wp_get_attachment_image_src(get_option('image_2')); ?>' height='100'>
                    </div>
                    <p>
                        <input class="btn" id="upload-button2" type="button" class="button" value="Upload Image" />

                        <input type='hidden' name='image_id2' id='image_id2' value='<?php echo get_option('image_2'); ?>'>
                    </p>

                </td>
                <td>
                    <label for="link-upload-field">Link to attach to images: </label>
                <input name="link-upload-field" type="text" value="" class="regular-text" />
                </td>
            </tr>

        </table>

        <p align="right">
            <input class="button-primary" type="submit" name="hiu_submit" value="Save" />
        </p>
</form>


hover-image-upload.php

    // save the data
function hiu_save() {

    global $options;

    if (isset($_POST['upload_form_submitted']) && isset($_POST['image_id1']) && isset($_POST['image_id2'])) {

        $hidden_field = esc_html($_POST['upload_form_submitted']);

        if ($hidden_field == 'Y') {

            $image_1 = esc_html($_POST["image_id1"]);
            $image_2 = esc_html($_POST["image_id2"]);

            $options['image_1'] = $image_1;
            $options['image_2'] = $image_2;

            update_option('hiu_images', $options);
        }
    }

    $options = get_option('hiu_images');

    if (!empty($options)) {

        $image_1 = esc_attr($options['image_1']);
        $image_2 = esc_attr($options['image_2']);

        $image_1_src = wp_get_attachment_image_src($image_1);
        $image_2_src = wp_get_attachment_image_src($image_2);

        $img_1_url = $image_1_src[0];
        $img_2_url = $image_2_src[0];


    }
}


image-upload.js


// scriptfor base image upload button
jQuery(document).ready(function($) {

    var mediaUploader;

    var wp_image_id = wp.media.model.settings.post.id; // Store the old id
    var set_to_post_id = 10; // Set this


    $("#upload-button1").click(function(e){
        e.preventDefault();

        if (mediaUploader) {

            mediaUploader.uploader.uploader.param('post_id', set_to_post_id);

            mediaUploader.open();

            return;

        } else {
            // Set the wp.media post id so the uploader grabs the ID we want when initialised
            wp.media.model.settings.post.url = set_to_post_id;
        }

        // sets the title and button text for the media uploader
        mediaUploader = wp.media.frames.file_frame = wp.media({
            title: 'Select an Image',
            button: {
                text: 'Choose Image'
            }, 
            mutilple: false
        });


        // runs when image is selected
        mediaUploader.on('select', function() {

            var image = mediaUploader.state().get('selection').first().toJSON();

            $('#image-preview1').attr('src', image.url).css('width', 'auto');

            $('#image_id1').val(image.id);

            // Restore the main post ID
            wp.media.model.settings.post.id = wp_image_id;

        });

         mediaUploader.open();
    });

    // Restore the main ID when the add media button is pressed
    jQuery('a.add_media').on( 'click', function() {
        wp.media.model.settings.post.id = wp_image_id;
    });

    //mediaUploader.close();
});



// script for hoveri mage upload button
jQuery(document).ready(function($) {

    var mediaUploader;

    var wp_image_id = wp.media.model.settings.post.id; // Store the old id
    var set_to_post_id = 10; // Set this


    $("#upload-button2").click(function(e){
        e.preventDefault();

        if (mediaUploader) {

            mediaUploader.uploader.uploader.param('post_id', set_to_post_id);

            mediaUploader.open();

            return;

        } else {
            // Set the wp.media post id so the uploader grabs the ID we want when initialised
            wp.media.model.settings.post.url = set_to_post_id;
        }

        // sets the title and button text for the media uploader
        mediaUploader = wp.media.frames.file_frame = wp.media({
            title: 'Select an Image',
            button: {
                text: 'Choose Image'
            }, 
            mutilple: false
        });


        // runs when image is selected
        mediaUploader.on('select', function() {

            var image = mediaUploader.state().get('selection').first().toJSON();

            $('#image-preview2').attr('src', image.url).css('width', 'auto');

            $('#image_id2').val(image.id);

            // Restore the main post ID
            wp.media.model.settings.post.id = wp_image_id;

        });

         mediaUploader.open();
    });

    // Restore the main ID when the add media button is pressed
    jQuery('a.add_media').on( 'click', function() {
        wp.media.model.settings.post.id = wp_image_id;
    });

    //mediaUploader.close();
});

Read more here: How to save image data using options in my custom WP plugin?


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: