Adding image upload in tag section - WordPress plugin development

Question

I'm developing a WordPress plugin, and I'm trying to add an additional file field into the tag section. Check the screenshot: https://prnt.sc/22vkf1o

I have successfully added the field, but I can't save it. Also, the image is not appearing in the Media.

Here is the code that I tried:

public function __construct() {
    add_action( 'post_tag_add_form_fields', array( $this, 'eg360_add_tags' ) );
    add_action( 'post_tag_edit_form_fields', array( $this, 'eg360_edit_term_tags' ), 10, 2 );
    add_action( 'created_post_tag', array( $this, 'eg360_save_tags' ) );
    add_action( 'edited_post_tag', array( $this, 'eg360_save_tags' ) );
}

// Adding the input file field to tag section
public function eg360_add_tags( $taxonomy ) {
    ?>
    <div class="form-field">
        <label for="eg360-featured-image"><?php _e( 'Featured image', EG360_TEXT_DOMAIN ) ?></label>
        <input type="file" name="eg360_featured_image" id="eg360-featured-image"/>
        <p><?php _e( 'Add featured image', EG360_TEXT_DOMAIN ) ?></p>
    </div>
    <?php
}

// Adding the input file field to the edit tag section
public function eg360_edit_term_tags( $term, $taxonomy ) {
    ?>
    <tr class="form-field">
        <th>
            <label for="eg360-featured-image"><?php _e( 'Featured image', EG360_TEXT_DOMAIN ) ?></label>
        </th>
        <td>
            <input name="eg360_featured_image" id="eg360-featured-image" type="file"/>
            <p class="description"><?php _e( 'Add featured image', EG360_TEXT_DOMAIN ) ?></p>
        </td>
    </tr>
    <?php
}

// Save the field
public function eg360_save_tags( $term_id ) {
    update_term_meta(
        $term_id,
        'eg360_featured_image',
        sanitize_text_field( $_POST['eg360_featured_image'] )
    );
}

Also, this code above works for all other fields except the file input field.

Any help will be appreciated.

Answer 1

I handle this with AJAX.

Bellow is the solution.

HTML:

<label><?php _e( 'Featured Image', EG360_TEXT_DOMAIN ); ?></label>
<div id="eg360_tax_image" style="float: left; margin-right: 10px;">
    <img src="<?php echo esc_url( eg360_placeholder_image() ); ?>" width="60px" height="60px"/>
</div>
<div style="line-height: 60px;">
    <input type="hidden" id="eg360_tax_image_id" name="eg360_tax_image_id"/>
    <button type="button" class="upload_image_button button"><?php _e( 'Upload/Add image', EG360_TEXT_DOMAIN ); ?></button>
    <button type="button" class="remove_image_button button"><?php _e( 'Remove image', EG360_TEXT_DOMAIN ); ?></button>
</div>

jQuery:

jQuery(document).ready(function ($) {
    if (!$('#product_cat_thumbnail_id').val()) {
        $('.remove_image_button').hide();
    }
    var file_frame;
    $('body').on('click', '.upload_image_button', function (event) {
        event.preventDefault();
        if (file_frame) {
            file_frame.open();
            return;
        }
        file_frame = wp.media.frames.downloadable_file = wp.media({
            title: '<?php _e( 'Choose a Fetured Image', EG360_TEXT_DOMAIN ); ?>',
            button: {
                text: '<?php _e( 'Use as Fetured Image', EG360_TEXT_DOMAIN ); ?>'
            },
            multiple: false
        });
        file_frame.on('select', function () {
            var attachment = file_frame.state().get('selection').first().toJSON();
            var attachment_thumbnail = attachment.sizes.thumbnail || attachment.sizes.full;
            $('#eg360_tax_image_id').val(attachment.id);
            $('#eg360_tax_image').find('img').attr('src', attachment_thumbnail.url);
            $('.remove_image_button').show();
            $('.upload_image_button').hide();
        });
        file_frame.open();
    });

    $('body').on('click', '.remove_image_button', function () {
        $('#eg360_tax_image').find('img').attr('src', '<?php echo esc_js( eg360_placeholder_image() ); ?>');
        $('#eg360_tax_image_id').val('');
        $('.remove_image_button').hide();
        $('.upload_image_button').show();
        return false;
    });

    $('body').ajaxComplete(function (event, request, options) {
        if (request && 4 === request.readyState && 200 === request.status
            && options.data && 0 <= options.data.indexOf('action=add-tag')) {

            var res = wpAjax.parseAjaxResponse(request.responseXML, 'ajax-response');
            if (!res || res.errors) {
                return;
            }
            $('#eg360_tax_image').find('img').attr('src', '<?php echo esc_js( eg360_placeholder_image() ); ?>');
            $('#eg360_tax_image_id').val('');
            return;
        }
    });
});