ACF frontend form media uploader

You can create a frontend form to insert or update posts using acf_form, that nice function allows you to easily create a frontend from to add or edit posts using advanced custom fields without any other custom code.

You can use any type of ACF fields.

An example on how to use it

First thing you will need to create your fields, you can do that either by GUI method or using PHP code method, we will use GUI method in this post.

Go to custom fields > add new.

You can add any type of fields, such as text fields, URL field or any other type.

We will use a gallery field as it has an issue we will try to solve.

You will need add the gallery field as follow

After that go scroll down to location rules section and specify the post type you want your field to appear in.

Let’s now build our page template to show the new post form, here is an exampel

<?php acf_form_head(); ?>
<?php get_header(); ?>

<div id="primary" class="content-area">
    <div id="content" class="site-content" role="main">
    <?php while ( have_posts() ) : the_post(); ?>
    <?php acf_form(array(
        'post_id'       => 'new_post',
        'new_post'      => array(
            'post_type'     => 'post',
            'post_status'   => 'publish'
        ),
        'submit_value'  => 'Create new post'
    )); ?>
    <?php endwhile; ?>
    </div><!-- #content -->
</div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

It should look like this

Please note that in order to WordPress file uploader on frontend the current user role should support upload_files, If you want to add this capability to the user role, you can use add_cap as follow.

function simple_role_caps() {
	// Gets the simple_role role object.
	$role = get_role( 'simple_role' );
	// Add a new capability.
	$role->add_cap( 'upload_files', true );
}

// Add simple_role capabilities, priority must be after the initial role definition.
add_action( 'init', 'simple_role_caps', 11 );

The other note is that although we have specified “Uploaded to post” option in ACF field options

So this option should restrict the media library images that appear to the user who submit this form, but that’s not enough as ACF uses post_id as this string “new_post”, this option allow the unattached images to appear in WordPress uploader media causing exposing of you media gallery.

This issue wasn’t yet solved by ACF, but here is a solution to solve this using the following code.

/**
 * Restrict showing media library images to only current user.
 *
 * @param  mixed $query current query.
 * @return array
 */
function show_current_user_attachments( $query ) {
	$user_id = get_current_user_id();
	if ( $user_id && ! current_user_can( 'activate_plugins' ) && ! current_user_can( 'edit_others_posts' ) ) {
		$query['author'] = $user_id;
	}
	return $query;
}
add_filter( 'ajax_query_attachments_args', 'show_current_user_attachments' );

This code allow only admins and users with edit_others_posts cap to be able to preview media otherwise he will be only able to show his own attachments.