Subir imagen en el front-end con formulario personalizado usando ACF

Question

Subir imagen en el front-end con formulario personalizado usando ACF

11 oct 2017, 14:50:02

Vistas: 19.3K

Votos: 0

Creé campos adicionales para mis suscriptores, uno de ellos es un campo de imagen, para que puedan subir una imagen a su perfil.

Creé los campos con ACF (Advanced Custom Fields).

Tengo un formulario de registro personalizado y un formulario de edición personalizado, con los campos regulares de WordPress y los adicionales. Todo funciona perfectamente... Excepto por el campo de imagen.

No me preocupa el formulario de registro, acepto que el usuario no subirá la imagen al registrarse, pero necesito que puedan editar/subir la imagen al editar su información.

Nota (1): La imagen se usará como avatar, no usaré el avatar regular de WordPress.

Nota (2): No usaré acf_form() porque necesito editar mucho cómo funciona el formulario.

Aquí parte del código:

<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'] ) );

Marcelo Henriques Cortez

624

usuarios campos personalizados avanzados meta de usuario registro de usuario

Comentarios

ACF te permite almacenar también la URL de la imagen, puedes manejar la carga de tu avatar personalizado mediante la función media_handle_upload() en WordPress e insertar la URL en el campo ACF

Piyush Rawat

11 oct 2017 15:20:55

Entonces, ¿cuál es realmente la pregunta? Por favor, edita la pregunta y aclara qué es exactamente lo que estás preguntando

Mark Kaplun

11 oct 2017 15:46:26

La pregunta es bastante clara en el título y en el texto. No es necesario editar.

Marcelo Henriques Cortez

11 oct 2017 15:50:13

Creo que 'media_handle_upload()' podría funcionar. Lo probaré tan pronto como pueda para ver si funciona. Gracias @Piyush

Marcelo Henriques Cortez

11 oct 2017 15:52:32

@MarceloHenriquesCortez sí... lo he hecho antes... pero no conozco tu caso de uso... así que puedes comprobar si te sirve

Piyush Rawat

11 oct 2017 15:55:35

Mostrar los 5 comentarios restantes

Todas las respuestas a la pregunta

Quizás algo como esto pueda ayudar:

// Manejar imágenes subidas desde el front-end permitiendo que ACF haga su trabajo
function my_acf_pre_save_post($post_id) {

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

// Mover archivo a la biblioteca multimedia
$movefile = wp_handle_upload( $_FILES['my_image_upload'], array('test_form' => false) );

// Si el movimiento fue exitoso, insertar adjunto de WordPress
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']);

// Asignar el archivo como imagen destacada
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');

Copia el código de esta publicación, la página que enlacé abajo rompe el formato así que lo he corregido en el ejemplo anterior.

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

Randomer11

416

11 oct 2017 15:35:30

Comentarios

Suena prometedor. Lo probaré tan pronto como pueda. Gracias.

Marcelo Henriques Cortez

11 oct 2017 15:54:04

El problema con este ejemplo es que parece estar diseñado para un post, por eso usan 'set_post_thumbnail'. En mi caso, necesito usar la imagen en un campo ACF, en el perfil de usuario.

Marcelo Henriques Cortez

16 oct 2017 13:58:33

Lo logré hacer funcionar con 'media_handle_upload()'

Marcelo Henriques Cortez

16 oct 2017 14:56:42

Lo marqué como útil porque probablemente pueda ayudar a otros usuarios en temas específicos. Ya que encontré la solución que funciona con mi código, no sé si funcionará para todos.

Marcelo Henriques Cortez

16 oct 2017 17:21:33

Marcelo Henriques Cortez 624 · Accepted Answer · 2017-10-16T14:55:59Z

Vale, conseguí que funcione con 'media_handle_upload' (señalado por @Piyush) y ajustando un poco el código de mi formulario.

Así que, esto es lo que hice:

Primero - Asegúrate de que tu formulario tenga el atributo 'enctype='multipart/form-data'.

Segundo - Asegúrate de que tu 'input=file' no tenga el atributo value.

Tercero - Usa 'media_handle_upload' y pasa el nombre de tu 'input=file'.

Cuarto - Verifica si hubo un error con 'is_wp_error', por ejemplo.

Quinto - Actualiza el meta del usuario usando el nombre del campo que deseas actualizar (en mi caso, es el mismo que el 'name' del 'input=file').

Aquí está parte del código final:

<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('GUARDAR', 'profile'); ?>" />
    <input name="action" type="hidden" id="action" value="update-user" />
</form>

/* Si el perfil fue guardado, actualiza el perfil. */
if ( 'POST' == $_SERVER['REQUEST_METHOD'] && !empty( $_POST['action'] ) && $_POST['action'] == 'update-user' ) {

    // Estos archivos necesitan ser incluidos como dependencias cuando estás en el 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' );

    // Permite que WordPress maneje la subida.
    $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 );
    }
}