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.

1. That add tag form has no [`enctype="multipart/form-data"`](https://stackoverflow.com/questions/4526273/what-does-enctype-multipart-form-data-mean). See source code for [add tag form](https://core.trac.wordpress.org/browser/tags/5.8.1/src/wp-admin/edit-tags.php#L431), [edit tag form](https://core.trac.wordpress.org/browser/tags/5.8.1/src/wp-admin/edit-tag-form.php#L97). Here are hooks for use in [add tag form](https://developer.wordpress.org/reference/hooks/taxonomy_term_new_form_tag/), [edit tag form](https://developer.wordpress.org/reference/hooks/taxonomy_term_edit_form_tag/). — vee, Dec 14 '21 at 00:55
2. You use input `type="file"` but access it using `$_POST` which is completely wrong! Please learn more about PHP upload. You can't use that post to upload a file. — vee, Dec 14 '21 at 01:00
3. **IF** you are trying to access user's local file path, that is not possible. See reference [1](https://stackoverflow.com/questions/371875/local-file-access-with-javascript/27221186), [2](https://stackoverflow.com/questions/4851595/how-to-resolve-the-c-fakepath). — vee, Dec 14 '21 at 01:03

score 1 · Accepted Answer · edited Jun 14 '22 at 08:07

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 Featured Image', EG360_TEXT_DOMAIN ); ?>',
            button: {
                text: '<?php _e( 'Use as Featured 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;
        }
    });
});

Adding image upload in tag section - WordPress plugin development

1 Answers1