Nonce Error With Uploading My Resu

In this post, nosotros'll get through the steps of adding a custom meta box to upload PDF media files. In this example, I'one thousand attaching it to an "Events" Custom Post Type.

Note: for the purposes of this tutorial, I haven't washed my due diligence every bit far as escaping all my information or making it look tidy as far as what emerges on your dashboard. I'll exit that in your very capable easily. 🤓

Adding a custom meta box to upload media

Using add_meta_box, we're adding several parameters. The first parameter is the ID of the box. This is used when nosotros relieve the value. The second parameter is the label which is what will announced in the text above the meta box. The third value is the callback office that is used to define the markup for the box (more than on this further beneath). The fourth value is what tells WordPress the post type where this customization should be added (ie: posts, pages, or a custom post blazon). The concluding parameter used defines where we want the box to announced (side, advanced or normal).

            /**  * Add custom attachment metabox.  */ function add_custom_meta_boxes() { 	add_meta_box(  		'wp_custom_attachment', 		'PDF File', 		'wp_custom_attachment', 		'events', 		'side' 	) ; } add_action( 'add_meta_boxes', 'add_custom_meta_boxes' );          

Markup for Custom Meta box

Nix will happen at this point because we haven't divers wp_custom_attachment (the third parameter from to a higher place). Below is where we write the function that creates that markup for the custom meta box. Setting upwards the nonce field prior to our markup is what properly validates and secures the uploaded file.

            /**  * Custom attachment metabox markup.  */ function wp_custom_attachment() { 	wp_nonce_field( plugin_basename(__FILE__), 'wp_custom_attachment_nonce' ); 	$html = '<p class="description">Upload your PDF here.</p>'; 	$html .= '<input id="wp_custom_attachment" name="wp_custom_attachment" size="25" type="file" value="" />';  	$filearray = get_post_meta( get_the_ID(), 'wp_custom_attachment', true ); 	$this_file = $filearray['url']; 	 	if ( $this_file != '' ) {  	     $html .= '<div><p>Current file: ' . $this_file . '</p></div>';  	} 	echo $html;  }                      

Saving Info from Zipper

Now we need to create something that volition deal with saving the information from the chosen attachment by hooking into save_post. I've seen this done a few different means so if you have any suggestions for additional checks, please let me know if there are fidgets or improvements that can be added.

In this version, we first brand certain the array isn't empty. Then we set an assortment for the supported file type (in this instance, a PDF). We copy the file to the server but if there are any errors, the procedure will exist stopped and they'll exist displayed to the user.

            /**  * Salve custom attachment metabox info.  */ office save_custom_meta_data( $id ) { 	if ( ! empty( $_FILES['wp_custom_attachment']['name'] ) ) { 		$supported_types = assortment( 'application/pdf' ); 		$arr_file_type = wp_check_filetype( basename( $_FILES['wp_custom_attachment']['name'] ) ); 		$uploaded_type = $arr_file_type['type'];  		if ( in_array( $uploaded_type, $supported_types ) ) { 			$upload = wp_upload_bits($_FILES['wp_custom_attachment']['name'], null, file_get_contents($_FILES['wp_custom_attachment']['tmp_name'])); 			if ( isset( $upload['error'] ) && $upload['error'] != 0 ) { 				wp_die( 'There was an error uploading your file. The error is: ' . $upload['error'] ); 			} else { 				add_post_meta( $id, 'wp_custom_attachment', $upload ); 				update_post_meta( $id, 'wp_custom_attachment', $upload ); 			} 		} 		else { 			wp_die( "The file blazon that you've uploaded is not a PDF." ); 		} 	} } add_action( 'save_post', 'save_custom_meta_data' );          

Add File Upload Functionality for Form

The following is what adapts the form element on post information to back up file types within its connected information.

            /**  * Add functionality for file upload.  */ function update_edit_form() { 	repeat ' enctype="multipart/form-data"'; } add_action( 'post_edit_form_tag', 'update_edit_form' );          

How To Retrieve Information from Uploaded File

In this case, to get the URL from your file upload, brand sure that you lot're within the Loop on the appropriate folio (peradventure the single-CPT.php file). From this point, add the desired formatting within your page markup & requite yourself a high five. Way to go!

            <?php      $custom_attach = get_post_meta( $post->ID, 'wp_custom_attachment', true );      repeat $custom_attach['url']; ?>          

Bonus: How to Get Your Custom Zipper's Title Attribute

To get the title of your uploaded media, we have to go via a unlike route of grabbing that from the media library rather than your existing $custom_attach variable. Below, I passed an array to get_posts to become the championship of my attachment and put it within an anchor tag. Again, this would be placed within the Loop on the appropriate folio where you lot're placing the data.

            $args = array( 	'post_type'   => 'attachment', 	'post_parent' => $post->ID, );  $attachments = get_posts( $args ); if ( $attachments ) { 	foreach ( $attachments equally $attachment ) { 		$title = apply_filters( 'the_title', $attachment->post_title ); 		echo '<a href="' . esc_url( $custom_attach['url'] ) . '">' . $title . '</a>'; }          

Additional Reading:

• WordPress Codex: add_meta_box
• WordPress Codex: wp_nonce_field
• WordPress Codex: wp_upload_bits
• WordPress Codex: post_edit_form_tag

johnsonbarl1989.blogspot.com

Source: https://allisontarr.com/2017/11/17/custom-meta-boxes-media/

Share this post