Front End User Profile Edit – Image Upload

• juiceex

• January 30, 2016 at 11:23 pm

Ok I’ve been trying lots of things but no success yet.

I have a Front End User Profile Editing page on my site. One of the fields is an image upload field. I have NO problem editing & updating text fields for the user, so at least I have that part working.

I want it to work like the standard image upload does.

If no file exists -> show image upload button
If image file does exist -> shows preview image with edit and delete buttons on hover

And of course this needs to be saved to the user data for the person editing their profile page.

• James

• February 1, 2016 at 3:00 pm

Hi @juiceex

I believe that’s how ACF works. Could you please provide me with some screenshots of what’s going wrong on your end?

Thanks!

• juiceex

• February 2, 2016 at 1:34 am

Ok well if the image upload field has a name of: logo_icon
… and a field key of: field_56a256ab3721d

How do I display the image upload button for my users to click on?

• James

• February 2, 2016 at 2:16 pm

Hi @juiceex

Please see my answer here: http://support.advancedcustomfields.com/forums/topic/front-end-user-profile-edit-selection-field/#post-34233.

Thanks!

• juiceex

• February 10, 2016 at 3:51 am

@James,

Yea that doesn’t help me because I really want to format the layout of the fields. If I just display the fields like that I can’t control anything and it just spits them out 1 by 1.

So far, I’ve managed to write this up: which works on the front end nicely… but it does NOT save the image to the user’s profile.

<?php
	$field_key = "field_56a256d53721e";
	$field = get_field_object($field_key, 'user_'.$current_user->ID);
	
	if( $field )
	{
		echo '<input type="file" id="acf-' . $field['key'] . '" name="acf[' . $field['key'] . ']">';
	}							
?>

Do you have maybe something more complete that could help me with this issue?

Here is a screenshot of how I have my file ACF field set up:

• James

• February 10, 2016 at 6:10 pm

Hi @juiceex,

If you want to create the form manually, you need to save it manually too. Please take a look at the source code to learn more about it.

If you need to change the layout, you can use a CSS code. You can also use a jQuery function like wrap to add an HTML element for each of the input.

I hope this helps.

• WooHoo

• September 1, 2016 at 12:22 am

Hi @juiceex and @acf-support,

Did you find a solution for this?
Because I’m trying to do something similar with a custom form (no ACF_Form).
And I just can’t get the image to be saved in the proper field.

Could you please give more hints (or maybe a code snippet) on how to get uploaded images saved to Field Type: file when not using a ACF_Form?

• James

• September 5, 2016 at 2:00 pm

Hi @woohoo

If your custom form is able to upload the image and save it in the WordPress database (the images are showing up in the Media Library), then all you need to to is updating ACF database. You can do it by using the update_field() function after the image is uploaded correctly.

Please keep in mind that ACF saves the image as the image ID in the database.

I hope this helps 🙂

• WooHoo

• September 6, 2016 at 4:44 pm

Hi James,

Thank you, that did it!