File

Overview

The file field allows a file to be uploaded and selected. This field makes use of the native WP media popup to handle the upload and selection process.

Screenshots

Settings

Name Description
Return value Customize the returned data. Choose from File Array (array of data), File URL (string), or File ID (int)
Library Limit the file selection to only those that have been uploaded to this post, or the entire library
Minimum Add upload validation for minimum filesize MB (int). The filesize may also be entered as a string containing the unit. eg. ’400 KB’. Added in v5.1.9
Maximum Add upload validation for maximum filesize. Added in v5.1.9
Allowed file types Add upload validation for specific file types. Enter a comma separated list to specify which file types are allowed or leave blank for all types. Added in v5.1.9

Template usage

The file field will return either an array, a string or an int value depending on the return value set. Below are some examples of how you can use this data. Please note that all following examples use an file field called “file”, and if you are working with a sub field, remember to replace any get_field and the_field functions with the relative get_sub_field and the_sub_field functions.

Basic display (Object)

This example shows how to display the selected file when using the array return type. This return type allows us to easily access data such as url and filename.

<?php 

$file = get_field('file');

if( $file ): ?>
	
	<a href="<?php echo $file['url']; ?>"><?php echo $file['filename']; ?></a>

<?php endif; ?>

Customized display (Object)

This example shows how to display a custom link when using the object return type. This return type allows us to easily access data such as url, title, type and more. To see the full data available, please debug the $file variable.

<?php 

$file = get_field('file');

if( $file ): 

	// vars
	$url = $file['url'];
	$title = $file['title'];
	$caption = $file['caption'];
	

	// icon
	$icon = $file['icon'];
	
	if( $file['type'] == 'image' ) {
		
		$icon =  $file['sizes']['thumbnail'];
		
	}
	

	if( $caption ): ?>

		<div class="wp-caption">

	<?php endif; ?>

	<a href="<?php echo $url; ?>" title="<?php echo $title; ?>">

		<img src="<?php echo $icon; ?>" />
		<span><?php echo $title; ?></span>

	</a>

	<?php if( $caption ): ?>

			<p class="wp-caption-text"><?php echo $caption; ?></p>

		</div>

	<?php endif; ?>

<?php endif; ?>

Basic display (ID)

This example shows how to display the selected file when using the ID return type. This return type allows us to efficiently load only the necessary data.

<?php 

$file = get_field('file');

if( $file ) {

	$url = wp_get_attachment_url( $file );
	
	?><a href="<?php echo $url; ?>" >Download File</a><?php

}

?>

Basic display (URL)

This example shows how to display the selected file when using the URL return type. This return type allows us to efficiently display a basic link but prevents us from loading any extra data about the file.

<?php if( get_field('file') ): ?>

	<a href="<?php the_field('file'); ?>" >Download File</a>

<?php endif; ?>