Support

Account

Home Forums Backend Issues (wp-admin) Admin File Field Values not Displaying on Post Save – Custom Metabox

Solving

Admin File Field Values not Displaying on Post Save – Custom Metabox

  • Hello,

    I am wondering if someone can help me troubleshoot my code.

    Now, I barely understand what I am doing. But have been fiddling around with things all day I finally am very close to what I want.

    What I want is to display a FILE ACF admin field in a custom meta-box. I like the ACF field layout so this is the field I want in the metabox. I need the field in a custom metabox so I can make the metabox appear/disapper only when the right variable from a different metabox is selected.

    I have managed to get the field to appear and operate in the metabox. I can add a document and the visual is perfect. I can edit a document and the lightbox window has all the right variables. And I can delete the document fine. All the functionality is there.

    The problem is: after saving the post all the document fields disappear. The file is still there, I can Edit and Delete as normal. It just shows a faded grey icon instead of the doc icon, says Name: without displaying the name. It’s basically only the visual aspects of the file that are disappearing on post save.

    Below is the code I have stolen and adapted from ACF File.php…
    I’m definitely missing something though. Can someone tell me what I am missing?

    // The Callback
    function show_document_meta_box() {
    global $document_meta_fields, $post;
    // Use nonce for verification
    echo '<input type="hidden" name="show_document_meta_box_nonce" value="'.wp_create_nonce(basename(__FILE__)).'" />'; ?>
         
        <div class="acf-file-uploader clearfix active" data-library="<?php echo $field['library']; ?>">
        <input class="acf-file-value" type="hidden" name="<?php echo $field['name']; ?>" value="277" type="hidden">
        <div class="has-file">
            <ul class="hl clearfix">
                <li>
                    <img class="acf-file-icon" src="<?php echo $field['icon']; ?>" alt=""/>
                    <div class="hover">
                        <ul class="bl">
                            <li><a href="#" class="acf-button-delete ir">Remove</a></li>
                            <li><a href="#" class="acf-button-edit ir">Edit</a></li>
                        </ul>
                    </div>
                </li>
                <li>
                    <p>
                        <strong class="acf-file-title"><?php echo $field['title']; ?></strong>
                    </p>
                    <p>
                        <strong><?php _e('Name', 'acf'); ?>:</strong>
                        <a class="acf-file-name" href="<?php echo $field['url']; ?>" target="_blank"><?php echo end( $explode );; ?></a>
                    </p>
                    <p>
                        <strong><?php _e('Size', 'acf'); ?>:</strong>
                        <span class="acf-file-size"><?php echo $field['size']; ?></span>
                    </p>
                    
                </li>
            </ul>
        </div>
        <div class="no-file">
            <ul class="hl clearfix">
                <li>
                    <span><?php _e('No File Selected','acf'); ?></span>. <a href="#" class="button add-file"><?php _e('Add File','acf'); ?></a>
                </li>
            </ul>
        </div>
    </div>
    
    <?php }
    
    function format_value_for_api( $value, $post_id, $field )
        {
            // validate
            if( !$value )
            {
                return false;
            }
            // format
            if( $field['save_format'] == 'url' )
            {
                $value = wp_get_attachment_url($value);
            }
            elseif( $field['save_format'] == 'object' )
            {
                $attachment = get_post( $value );
    
                // validate
                if( !$attachment )
                {
                    return false;   
                }
                // create array to hold value data
                $value = array(
                    'id' => $attachment->ID,
                    'alt' => get_post_meta($attachment->ID, '_wp_attachment_image_alt', true),
                    'title' => $attachment->post_title,
                    'caption' => $attachment->post_excerpt,
                    'description' => $attachment->post_content,
                    'mime_type' => $attachment->post_mime_type,
                    'url' => wp_get_attachment_url( $attachment->ID ),
                );
            }
            
            return $value;
        }
  • Sorry, here are the document variables from above the previous section of code. Just in case it helps.

    // Field Array DOCUMENT ATTACH Metabox
    $class = 'active';
    $icon = wp_mime_type_icon( $file->ID );
    $title = $file->post_title;
    $size = size_format(filesize( get_attached_file( $file->ID ) ));
    $url = wp_get_attachment_url( $file->ID );
    
    $explode = explode('/', $url );
    $name = end( $explode );
    
    $prefix = 'document_';
    $document_meta_fields = array(
        array(
            'label' => 'Document Upload',
            'desc'  => 'Upload or Select Document.',
            'id'    => $prefix.'file',
            'type'  => 'file',
            'class' => $class,
            'icon'  => $icon,
            'title' => $title,
            'size'  => $size,
            'url'   => $url,
            'name'  => $name,
            'defaults' => array(
                'save_format'   =>  'object',
                'library'       =>  'all',
            ),
            'l10n' => array(
                'select'        =>  __("Select File",'acf'),
                'edit'          =>  __("Edit File",'acf'),
                'update'        =>  __("Update File",'acf'),
                'uploadedTo'    =>  __("Uploaded to this post",'acf'),
            ),  
            
        ),
    );
  • Hi @beachpebble

    If you need to move the field group to the side (the meta boxes area), I think you can set the “Position” settings to “Side” on the field group editor page.

    If you want, you can also move it by using Javascript. This page should give you more idea about it: https://www.advancedcustomfields.com/resources/moving-wp-elements-content-editor-within-acf-fields/. That article is talking about moving the WordPress’ elements to ACF’s, but I believe you can modify it to work the other way around.

    I hope this helps πŸ™‚

  • I’m sorry but position side only applies to a “Field Group” and not an individual field. I need the field to stand alone, so that I can make it disappear and reappear as needed. So this will not work.

    Regarding the Javascript option. I do not see why I should weigh down the website with unnecessary javascript when it is much cleaner to just a add a couple functions to the functions.php document. The code is mostly working at the moment which indicates it is a valid method of implementation. I am simply having trouble getting the saved values to actually appear in the saved fields.

    Please if you are going to answer, try to answer with a solution for the problem I requested assistance with rather than trying to direct towards a completely different method of implementation.

  • Hi @beachpebble

    Could you please tell me how do you hide the meta box?

    What you did basically is recreating the file field type by copying/pasting the code without knowing how it works. This is not a good idea as it can create a security issue in the future.

    I believe append() function doesn’t need a lot of resources, especially with the high specs machines in the current days. And I think it’s rational to sacrifice a small amount of resource on the backend rather than leaving your server vulnerable. Not to mention that it is easier to be implemented and maintained.

    But, if you still want to do it using PHP code, I’m afraid I can’t help you. I’m sorry about that.

    I hope this makes sense πŸ™‚

  • I got it figured out.

    So yes, I did go with your suggestion to create the document attachment metabox using ACF, I then exported the code and dropped it into my functions.php so I could make some small modifications.

    This was my first attempt to modify the UI for wordpress and yes I struggled because my php and js is very weak to put it politely. But I didn’t give up and now I have a nice little user interface that allows one of three field inputs to display, depending on the users desired outcome.

    We all have to walk before we can learn to run, this was me learning how to crawl. lol.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.