ACF Upload Image in front-end with custom form

Question

I created extra fields for my subscribers, one of them is an image field, so they can upload an image to their profile.

I created the fields with ACF (Advanced Custom Fields).

I have a custom register form and a custom edit form, with the regular WordPress fields and the extra ones. Everything works perfectly... Except for the image field.

I'm not worried about the register form, I accept that the user won't upload the image when registering, but I need them to be able to edit/upload the image when editting their info.

Ps.(1):The image will be used as the avatar, I won't use the regular WordPress avatar.

Ps.(2):I won't use the acf_form() because I need to edit too much on how the form works.

Here is part of the code:

<label for="avatar_user"></label>
<input class="text-input" name="avatar_user" type="file" id="avatar_user" value="<?php the_author_meta( 'avatar_user', $current_user->ID ); ?>" />

if ( !empty( $_POST['avatar_user'] ) ) :
   update_user_meta( $current_user->ID, 'avatar_user', esc_attr( $_POST['avatar_user'] ) );

Answer 1

Ok, I got it to work with the 'media_handle_upload' (pointed out by @Piyush) and tweaking a little bit with my form code.

So, here is what I did:

First - Make sure your form has the attribute 'enctype='multipart/form-data'.

Second - Be sure that your 'input=file' has no value attribute.

Third - Use the 'media_handle_upload' and pass the name of your 'input=file'.

Forth - Check if there was an error with 'is_wp_error', for example.

Fifth - Update the user meta using the name of the field you want to update (in my case, is the same as the 'name' of the 'input=file'.

Here is part of the final code:

<form method="post" id="adduser" enctype='multipart/form-data'>
    <input class="text-input" name="avatar_user" type="file" id="avatar_user" multiple="false"/>
    <input name="updateuser" type="submit" id="updateuser" class="submit button" value="<?php _e('GRAVAR', 'profile'); ?>" />
    <input name="action" type="hidden" id="action" value="update-user" />
</form>

/* If profile was saved, update profile. */
if ( 'POST' == $_SERVER['REQUEST_METHOD'] && !empty( $_POST['action'] ) && $_POST['action'] == 'update-user' ) {

    // These files need to be included as dependencies when on the front end.
    require_once( ABSPATH . 'wp-admin/includes/image.php' );
    require_once( ABSPATH . 'wp-admin/includes/file.php' );
    require_once( ABSPATH . 'wp-admin/includes/media.php' );

    // Let WordPress handle the upload.
    $img_id = media_handle_upload( 'avatar_user', 0 );

    if ( is_wp_error( $img_id ) ) {
      echo "Error";
    } else {
      update_user_meta( $current_user->ID, 'avatar_user', $img_id );
    }
}

Answer 2

Maybe something like this will help :

// Deal with images uploaded from the front-end while allowing ACF to do it's thing
function my_acf_pre_save_post($post_id) {

if ( !function_exists('wp_handle_upload') ) {
require_once(ABSPATH . 'wp-admin/includes/file.php');
}

// Move file to media library
$movefile = wp_handle_upload( $_FILES['my_image_upload'], array('test_form' => false) );

// If move was successful, insert WordPress attachment
if ( $movefile && !isset($movefile['error']) ) {
$wp_upload_dir = wp_upload_dir();
$attachment = array(
'guid' => $wp_upload_dir['url'] . '/' . basename($movefile['file']),
'post_mime_type' => $movefile['type'],
'post_title' => preg_replace( '/\.[^.]+$/', ”, basename($movefile['file']) ),
'post_content' => ”,
'post_status' => 'inherit'
);
$attach_id = wp_insert_attachment($attachment, $movefile['file']);

// Assign the file as the featured image
set_post_thumbnail($post_id, $attach_id);
update_field('my_image_upload', $attach_id, $post_id);

}

return $post_id;

}

add_filter('acf/pre_save_post' , 'my_acf_pre_save_post');

Copy the code from this post, the page I linked to below breaks the formatting so I've fixed it in the above sample.

Source : https://support.advancedcustomfields.com/forums/topic/uploading-imagefile-on-the-front-end/