WP ACF Field on User (Image) disappears from time to time - wordpress

Question

I have an ACF Field called avatar on User Form (is this wrong?) which would work correctly, I can set the avatar image for each users. This field however is being nulled (disappears) from time to time, I have read countless topics trying to find somebody with similar problem but I had no luck.
This is a WP Multisite. The images I uploaded for the users are already thumbnail sizes (150x150), since WP would make this Thumbnail sizes itself (image preview size is set to thumbnail too), could it lead to some errors and that to disappearing images? Doesn't make much sense because then they'd be supposed to disappear as soon as I add them. It doesn't happen to all of the users in the same time.
If you need any more information feel free to ask.

Answer 1

The issue was related to WP Multisite. Whenever we changed a user's avatar on one of the sites in the other sites it was removed. We thought that these datas are handled separately, but unfortunately not. So we decided to create user meta fields instead and it seems to work just as we need it to work.
I add the code that worked for me (took a bit long to make it work and I copied most of them from different sources), maybe it helps somebody. (the hard part was the image)
add_action('show_user_profile', 'media_selector_settings_page_callback');
add_action('edit_user_profile', 'media_selector_settings_page_callback');
function media_selector_settings_page_callback($user)
{
// Save attachment ID
if (isset($_POST['submit_image_selector']) && isset($_POST['avatar-en'])) :
update_user_meta($user->ID, 'avatar-en', absint($_POST['avatar-en']));
endif;
wp_enqueue_media();
?>
<h3><?php _e("Extra profile information", "blank"); ?></h3>
<table class="form-table">
<tr>
<th><label for="bio-en"><?php _e("Bio-en"); ?></label></th>
<td>
<textarea name="bio-en" id="bio-en" class="regular-text" rows="8"><?php echo esc_attr(get_the_author_meta('bio-en', $user->ID)); ?></textarea>
<span class="description"><?php _e("Please enter your bio-en."); ?></span>
</td>
</tr>
<tr>
<th><label for="avatar"><?php _e("Avatar-en"); ?></label></th>
<td>
<div class='image-preview-wrapper'>
<img id='image-preview-en' src='<?php echo wp_get_attachment_url(esc_attr(get_the_author_meta('avatar-en', $user->ID))); ?>' height='100'>
</div>
<input id="upload_image_button" type="button" class="button" value="<?php _e('Upload image'); ?>" />
<input type='hidden' name='avatar-en' id='avatar-en' value='<?php echo esc_attr(get_the_author_meta('avatar-en', $user->ID)); ?>'>
</td>
</tr>
<tr>
<th><label for="bio-de"><?php _e("Bio-de"); ?></label></th>
<td>
<textarea name="bio-de" id="bio-de" class="regular-text" rows="8"><?php echo esc_attr(get_the_author_meta('bio-de', $user->ID)); ?></textarea>
<span class="description"><?php _e("Please enter your bio-de."); ?></span>
</td>
</tr>
<tr>
<th><label for="avatar"><?php _e("Avatar-de"); ?></label></th>
<td>
<div class='image-preview-wrapper'>
<img id='image-preview-de' src='<?php echo wp_get_attachment_url(esc_attr(get_the_author_meta('avatar-de', $user->ID))); ?>' height='100'>
</div>
<input id="upload_image_button-de" type="button" class="button" value="<?php _e('Upload image'); ?>" />
<input type='hidden' name='avatar-de' id='avatar-de' value='<?php echo esc_attr(get_the_author_meta('avatar-de', $user->ID)); ?>'>
</td>
</tr>
</table>
<?php
}
add_action('admin_footer', 'media_selector_print_scripts');
function media_selector_print_scripts()
{
$my_saved_attachment_post_id = get_option('media_selector_attachment_id', 0);
?><script type='text/javascript'>
jQuery(document).ready(function($) {
// Uploading files
var file_frame;
var wp_media_post_id = wp.media.model.settings.post.id; // Store the old id
var set_to_post_id = <?php echo $my_saved_attachment_post_id; ?>; // Set this
jQuery('#upload_image_button').on('click', function(event) {
event.preventDefault();
// If the media frame already exists, reopen it.
if (file_frame) {
// Set the post ID to what we want
file_frame.uploader.uploader.param('post_id', set_to_post_id);
// Open frame
file_frame.open();
return;
} else {
// Set the wp.media post id so the uploader grabs the ID we want when initialised
wp.media.model.settings.post.id = set_to_post_id;
}
// Create the media frame.
file_frame = wp.media.frames.file_frame = wp.media({
title: 'Select a image to upload',
button: {
text: 'Use this image',
},
multiple: false // Set to true to allow multiple files to be selected
});
// When an image is selected, run a callback.
file_frame.on('select', function() {
// We set multiple to false so only get one image from the uploader
attachment = file_frame.state().get('selection').first().toJSON();
// Do something with attachment.id and/or attachment.url here
$('#image-preview-en').attr('src', attachment.url).css('width', 'auto');
$('#avatar-en').val(attachment.id);
// Restore the main post ID
wp.media.model.settings.post.id = wp_media_post_id;
});
// Finally, open the modal
file_frame.open();
});
// Restore the main ID when the add media button is pressed
jQuery('a.add_media').on('click', function() {
wp.media.model.settings.post.id = wp_media_post_id;
});
});
</script>
<?php
}
add_action('admin_footer', 'media_selector_print_scripts_de');
function media_selector_print_scripts_de()
{
$my_saved_attachment_post_id = get_option('media_selector_attachment_id', 0);
?><script type='text/javascript'>
jQuery(document).ready(function($) {
// Uploading files
var file_frame;
var wp_media_post_id = wp.media.model.settings.post.id; // Store the old id
var set_to_post_id = <?php echo $my_saved_attachment_post_id; ?>; // Set this
jQuery('#upload_image_button-de').on('click', function(event) {
event.preventDefault();
// If the media frame already exists, reopen it.
if (file_frame) {
// Set the post ID to what we want
file_frame.uploader.uploader.param('post_id', set_to_post_id);
// Open frame
file_frame.open();
return;
} else {
// Set the wp.media post id so the uploader grabs the ID we want when initialised
wp.media.model.settings.post.id = set_to_post_id;
}
// Create the media frame.
file_frame = wp.media.frames.file_frame = wp.media({
title: 'Select a image to upload',
button: {
text: 'Use this image',
},
multiple: false // Set to true to allow multiple files to be selected
});
// When an image is selected, run a callback.
file_frame.on('select', function() {
// We set multiple to false so only get one image from the uploader
attachment = file_frame.state().get('selection').first().toJSON();
// Do something with attachment.id and/or attachment.url here
$('#image-preview-de').attr('src', attachment.url).css('width', 'auto');
$('#avatar-de').val(attachment.id);
// Restore the main post ID
wp.media.model.settings.post.id = wp_media_post_id;
});
// Finally, open the modal
file_frame.open();
});
// Restore the main ID when the add media button is pressed
jQuery('a.add_media').on('click', function() {
wp.media.model.settings.post.id = wp_media_post_id;
});
});
</script>
<?php
}
add_action('personal_options_update', 'save_extra_user_profile_fields');
add_action('edit_user_profile_update', 'save_extra_user_profile_fields');
function save_extra_user_profile_fields($user_id)
{
update_user_meta($user_id, 'avatar-en', absint($_POST['avatar-en']));
update_user_meta($user_id, 'avatar-de', absint($_POST['avatar-de']));
update_user_meta($user_id, 'bio-en', $_POST['bio-en']);
update_user_meta($user_id, 'bio-de', $_POST['bio-de']);
}
$args = array(
'single' => true,
'show_in_rest' => true,
);
register_meta('user', 'avatar-en', $args);
register_meta('user', 'avatar-de', $args);
register_meta('user', 'bio-en', $args);
register_meta('user', 'bio-de', $args);