[Jonathan Dare]

I’m trying to add a custom metabox that will add a pdf upload field to the Entry Form.

Referencing the Hours extensions, I’ve created a custom extension to register the metabox. The API only seems to support text fields, so I added in a custom case for ‘file’ type to the metbox-api .

case 'file':
    echo '<input type="file" name="resume" id="resume" />';
break;

This gets the uploader to appear on the ‘Add New’ section when I register a metabox with ‘fields’ => ‘type’ => ‘file’, but it doesn’t save the meta to the entry when updated.

How and where do I fit in the media_handle_upload to return and store the file?

And from there, how do I set up a block to add into the template file, and how do I get the field to show up in the Form? I’ve looked through both the Hours and Hobbies extensions from start to finish and I’m afraid I still don’t understand exactly how to add something seemingly simple.

I’m sorry if I’ve approached this solution in the entirely wrong way (perhaps I shouldn’t need to add the ‘file’ case to the metabox API?) I’ve done file uploads before on a single page basis, but integrating it with the plugin has been a nightmare.

I’d appreciate any help or guidance you could offer, as I’m clearly out of my depth.

[Steven Zahm]

@ Jonathan

I’ll see I can toss together some code examples tomorrow.

[Jonathan Dare]

Anything you could provide would be very much appreciated, thank you.

[Steven Zahm]

@ Jonathan

First, adding this field does not require editing the core Connections code, I strongly recommend that you do not do that so you can safely apply updates to Connection as they are released.

The following code adds an upload field which will upload a file into the WordPress Media Library and save the file meta into the entry meta. This pretty basic code and does not do stuff such as removing an existing file from the Media Library if the user uploads a new file, does not remove the file if the entry is deleted, does not limit file types and so on. You’ll need to add the code to take care of those actions and tighten up security.

As you see it is actually pretty simple. Once you know how, of course. More than half the code is the usual code one would use to upload files in WordPress. The remaining code registers the custom field and custom meta box to display the field, the file meta if a file is uploaded to the entry. Really the only Connections specific code is the action hooks needed, the code within the action callbacks is nothing special, and the callback function which actually registers the custom field and metabox.

// Register the custom upload field.
add_action( 'cn_meta_field-resume_upload_field', 'resume_upload_field', 10, 3 );

// Register the metabox and field.
add_action( 'cn_metabox', 'resume_upload_metabox' );

// Since we're using a custom field, we need to add our own sanitization method.
add_filter( 'cn_meta_sanitize_field-resume_upload_field', 'sanitize_resume_upload_field' );

// Render the custom upload field.
function resume_upload_field( $field, $files, $entry ) {

    resume_upload_file_meta( $files );

    echo '<p><input type="file" name="resume" id="resume" /></p>';
}

// Display the uploaded file meta.
function resume_upload_file_meta( $files ) {

    if ( ! empty( $files ) && is_array( $files ) ) {

        foreach ( $files as $file ) {

            echo '<p><strong>Name:</strong> <input class="large-text" type="text" value="' . esc_attr( $file['name'] ) . '" disabled></p>';
            echo '<p><strong>Path:</strong> <input class="large-text" type="text" value="' . esc_attr( $file['file'] ) . '" disabled></p>';
            echo '<p><strong>URL:</strong> <input class="large-text" type="text" value="' . esc_attr( $file['url'] ) . '" disabled></p>';
        }
    }
}

// Render the metabox which will reder the custom upload field.
function resume_upload_metabox() {

    $atts = array(
        'id'       => 'resume-metabox',
        'title'    => 'Resume',
        'context'  => 'normal',
        'priority' => 'core',
        'fields'   => array(
            array(
                'id'    => 'resume',
                'type'  => 'resume_upload_field',
                ),
            ),
        );

    cnMetaboxAPI::add( $atts );
}

// This will pass back an array of the file meta data such as filename, path and URL which
// will be saved into the entry meta.
function sanitize_resume_upload_field( $file_meta ) {

    $file_meta = array();

    if ( ! empty( $_FILES ) ) {

        foreach( $_FILES as $file ) {

            if ( is_array( $file ) ) {

                $result = upload_resume( $file );

                if ( false != $result ) {

                    $file_meta[] = $result;
                }
            }
        }
    }

    return $file_meta;
}

// Process the uploaded file.
function upload_resume( $data ) {

    if ( ! function_exists( 'wp_handle_upload' ) ) {

        require_once( ABSPATH . 'wp-admin/includes/admin.php' );
    }

    $upload = wp_handle_upload( $data, array( 'test_form' => false ) );

    if ( isset( $upload['error'] ) || isset( $upload['upload_error_handler'] ) ) {

        return false;

    } else {

        $upload['name'] = basename( $upload['file'] );

        $attachment = array(
            'post_mime_type' => $upload['type'],
            'post_title'     => preg_replace( '/\.[^.]+$/', '', $upload['name'] ),
            'post_content'   => '',
            'post_status'    => 'inherit',
            'guid'           => $upload['url']
        );

        wp_insert_attachment( $attachment, $upload['url'] );

        return $upload;
    }

    return false;
}

To have this field show up in Form, go to the Connections : Settings admin page, click the Form and enable the Resume field, drag it in the position you want it and click the save button.

Hope that helps!

[Author]

Posts