0

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.

3
  • the form you're adding those inputs to doesn't have the multipart enctype needed and there is no filter to add it. Thankfully this is a well known problem that already has lots of answers
    – Tom J Nowell
    Dec 14, 2021 at 0:41
  • I tried to find it before I asked here, but I didn't find anything. Can you send any example or URL to that solution/article?
    – upss1988
    Dec 14, 2021 at 10:08
  • @upss1988, the "Add New Tag" form on that page uses AJAX, and while there's a way to make the standard/non-AJAX upload works (when JS is not available, e.g. disabled..), I would, like plugins like ACF did, use JS to add a button which allows the user to upload images via the WordPress media uploader - see wp.media().
    – Sally CJ
    Dec 15, 2021 at 1:43

1 Answer 1

0

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;
        }
    });
});

Your Answer

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

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