Upload Field

Overview

This Default Field Type is available in WordPress Creation Kit free version. The Upload Field creates a file upload form. It can be used to upload images, videos, PDFs etc. and uses the default WordPress Media Uploader.

Creating an Upload Field

To add an Upload Field to a previously created Custom Meta Box, under the Meta Box Fields tab simply insert a Field Title and under Field Type make sure you select Upload.

WordPress Creation Kit - Custom Fields Creator - Meta Box Fields - Upload Field

The Upload Field contains options to customize it:

  1. Description – Allows you to specify a description for the Upload Field
  2. Required – Select whether the field is required or not
  3. Default Value – Set a default value for the Upload Field
  4. Attach upload to post – Whether or not the upload should be attached to the post

Page, Post or Custom Post Type Edit Screen

This is how the Upload Field we created above looks like in the Edit Screen:

WordPress Creation Kit - Custom Fields Creator - Meta Box Fields - Upload Field (Editor)

Template usage

The following examples are for a Custom Meta Box with the “Group Name” argument “my_meta_name“. Make sure to replace this with the “Group Name” you have set up. The Custom Meta Box below is setup to be attached to a post.

WordPress Creation Kit - Custom Fields Creator - Meta Box Arguments - Template

Using the WCK Custom Fields API

The Upload Field returns the source string, the attachment post object or, for a image upload, an array with the image details.

For a Single Meta Box

To output a value inside the loop we use the function the_cfc_field() which echoes the src of the upload

1
<img src="<?php the_cfc_field('my_meta_name', 'avatar'); ?>" />

To assign the value to a variable we use the function get_cfc_field() which for the Upload Field return the attachment post object or, for a image upload, an array with the image details:

Notice: We’re returning an array for image uploads and an attachment object for other file types (like PDF, CSV, etc.)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<?php 
$attachment_object = get_cfc_field('my_meta_name', 'avatar'); 
/* 
For a image the attachment array looks like this:
array(
	'id' => 151,
	'alt' => 'Avatar Image',
	'title' => 'Tim',
	'caption' => 'Our number on member',
	'description' => 'a avatar image',
	'url' => "http://localhost/wordpress/wp-content/uploads/2013/10/Tim.jpg",
	'width' => "100",
	'height' => "120",
	'sizes' => Array
        (
            [thumbnail] => "http://localhost/wordpress/wp-content/uploads/2013/10/Tim-150x150.jpg",
            [medium] => "http://localhost/wordpress/wp-content/uploads/2013/10/Tim-300x119.jpg",
            [large] => "http://localhost/wordpress/wp-content/uploads/2013/10/Tim.jpg"
        )
);
 */
 
/* 
For a normal upload (not an image) the attachment object looks like this:
object(WP_Post)[279]
  public 'ID' => int 55
  public 'post_author' => string '1' (length=1)
  public 'post_date' => string '2014-07-28 09:00:54' (length=19)
  public 'post_date_gmt' => string '2014-07-28 09:00:54' (length=19)
  public 'post_content' => string '' (length=0)
  public 'post_title' => string 'over_1400_downloads_per_week' (length=28)
  public 'post_excerpt' => string '' (length=0)
  public 'post_status' => string 'inherit' (length=7)
  public 'comment_status' => string 'open' (length=4)
  public 'ping_status' => string 'open' (length=4)
  public 'post_password' => string '' (length=0)
  public 'post_name' => string 'over_1400_downloads_per_week-2' (length=30)
  public 'to_ping' => string '' (length=0)
  public 'pinged' => string '' (length=0)
  public 'post_modified' => string '2014-07-28 09:00:54' (length=19)
  public 'post_modified_gmt' => string '2014-07-28 09:00:54' (length=19)
  public 'post_content_filtered' => string '' (length=0)
  public 'post_parent' => int 54
  public 'guid' => string 'http://localhost/wckpro/wp-content/uploads/2014/07/over_1400_downloads_per_week1.ods' (length=84)
  public 'menu_order' => int 0
  public 'post_type' => string 'attachment' (length=10)
  public 'post_mime_type' => string 'application/vnd.oasis.opendocument.spreadsheet' (length=46)
  public 'comment_count' => string '0' (length=1)
  public 'filter' => string 'raw' (length=3)
 
 */
 
?>

For a Repeater Meta Box

To output all the “Avatar” entries from the repeater field we use the functions get_cfc_meta() and the_cfc_field():

1
2
3
4
5
<?php 				
foreach( get_cfc_meta( 'my_meta_name' ) as $key => $value ){
    ?><img src="<?php the_cfc_field( 'my_meta_name','avatar', false, $key ); ?>"/><?php
}
?>

To output a specific “Avatar” entry from the repeater field, for example the second entry, we use the function the_cfc_field():

1
<img src="<?php the_cfc_field( 'my_meta_name','avatar', false, 1 ); ?>" />

The index starts at 0 so that’s why we pass “1” to the function. For the first entry it would be “0”, the second is “1”, the third is “2” and so on…

Using the WordPress default functions

The Upload Field returns the attachment id.

For a Single Meta Box

1
2
3
4
5
6
7
<?php 
$my_meta = get_post_meta( $post->ID, 'my_meta_name', true ); 
if( !empty( $my_meta[0]['avatar'] ) ){
    $src = wp_get_attachment_image_src( $my_meta[0]['avatar'], 'full' );
    echo '<img src="'.$src[0].'" width="'. $src[1].'" height="'.$src[2].'"/>'; 
}
?>

For a Repeater Meta Box

To output all the “Avatar” entries in the repeater field:

1
2
3
4
5
6
7
8
9
<?php 
$my_meta = get_post_meta( $post->ID, 'my_meta_name', true );
if( !empty( $my_meta ) ){
    foreach( $my_meta as $entry ){
        $src = wp_get_attachment_image_src( $entry['avatar'], 'full' );
        echo '<img src="'.$src[0].'" width="'. $src[1].'" height="'.$src[2].'"/>';
    }
}
?>

To output a specific “Avatar” entry from the repeater field, for example the second entry:

1
2
3
4
5
6
7
<?php 
$my_meta = get_post_meta( $post->ID, 'my_meta_name', true );
if( !empty( $my_meta[1]['avatar'] ) ){
    $src = wp_get_attachment_image_src( $my_meta[1]['avatar'], 'full' );
    echo '<img src="'.$src[0].'" width="'. $src[1].'" height="'.$src[2].'"/>';
}
?>

The index starts at 0 so that’s why we pass “1” to the function. For the first entry it would be “0”, the second is “1”, the third is “2” and so on…