En un artículo anterior ya habíamos visto cómo subir archivos en WordPress, sin embargo en este artículo haremos algunas modificaciones al código y usaremos Ajax en el proceso de subida.
Generalidades
Usaremos un Shortcode para mostrar el formulario de subida de archivos, los archivos se subirán en una subcarpeta de wp-content usando Ajax.
Al final obtendremos un formulario similar a la siguiente imagen:
Código para subir archivos usando Ajax
Creación del formulario
El código HTML para el formulario podemos hacerlo a través de un Shortcode, de esta forma puedes usarlo en cualquier página o sección de tu sitio web.
<?php
add_action( 'init', 'dcms_form_shortcode' );
function dcms_form_shortcode(){
add_shortcode('dcms_upload_file', 'dcms_show_upload_file_form');
}
function dcms_show_upload_file_form( $atts , $content ){
dcms_enqueue_scripts();
ob_start();
?>
<section class="form-container">
<form action="" enctype="multipart/form-data" method="post" id="form-upload">
<div>
<span>Selecciona algún archivo: </span>
<input type="file" id="file" name="upload-file"/>
</div>
<input type="submit" id="submit" value="Enviar archivo" />
</form>
<div id="message"></div>
</section>
<?php
$html_code = ob_get_contents();
ob_end_clean();
return $html_code;
}
En el código anterior hemos creado un Shortcode llamado dcms_upload_file, nótese que estamos usando las funciones de PHP ob_start() y ob_get_contents() para guardar el contenido HTML en una variable que posteriormente retornaremos.
Registrar el archivo Javascript y CSS
La funcionalidad Ajax se realiza usando Javascript, por lo que será necesario encolar un archivo javascript. Lo haremos con el siguiente código:
<?php
add_action('wp_enqueue_scripts', 'dcms_register_scripts');
function dcms_register_scripts(){
wp_register_script('dcms-upload-script',
plugin_dir_url( __FILE__ ).'assets/script.js',
['jquery'],
'1.0',
true);
wp_register_style('dcms-upload-style',
plugin_dir_url( __FILE__ ).'assets/style.css',
[],
'1.0');
}
function dcms_enqueue_scripts(){
wp_enqueue_script('dcms-upload-script');
wp_enqueue_style('dcms-upload-style');
wp_localize_script('dcms-upload-script',
'dcmsUpload',
[ 'ajaxurl'=>admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('ajax-nonce-upload')]);
}
En la primera parte del código anterior sólo hemos registrado los archivos que usaremos, el archivo Javascript y CSS, pero sólo los cargaremos cuando se use el Shortcode con la función dcms_enqueue_scripts().
Código Javascript
Usaremos código Javascript con Jquery para el procesamiento del formulario de subida de archivos
(function( $ ) {
'use strict';
$('#form-upload').submit(function(e){
e.preventDefault();
const fd = new FormData();
const files = $('#file')[0].files;
if (files.length <= 0 ) {
alert('Tienes que seleccionar algún archivo');
return;
}
const size = (files[0].size / 1024 / 1024 ).toFixed(2);
if ( size > 2){
alert(`Tu archivo pesa ${size}MB. No puedes subir archivos mayores a 2MB`);
return;
}
fd.append('file',files[0]);
fd.append('action', 'dcms_ajax_add_file');
fd.append('nonce', dcmsUpload.nonce);
$.ajax({
url: dcmsUpload.ajaxurl,
type: 'post',
dataType: 'json',
data: fd,
contentType: false,
processData: false,
beforeSend: function(){
$('#message').text('Enviando...');
$('#message').show();
},
success: function(res){
$('#message').text(res.message);
}
});
});
})( jQuery );
En el código anterior estamos usando un objeto FormData(), usando este objeto pasaremos los valores requeridos para el procesamiento del archivo, también realizamos algunas validaciones previas antes de subir el archivo.
Procesamiento de subida del archivo
Finalmente lo que sea enviado por Javascript deberá ser procesado, el siguiente código realiza el proceso de subida de archivos en el servidor.
<?php
add_action('wp_ajax_dcms_ajax_add_file', 'dcms_upload_file');
// add_action('wp_ajax_nopriv_dcms_ajax_add_file', 'dcms_upload_file');
// Process upload file
function dcms_upload_file(){
$res = [];
validate_nonce('ajax-nonce-upload');
if( isset($_FILES['file']) ) {
global $wp_filesystem;
WP_Filesystem();
$name_file = $_FILES['file']['name'];
$tmp_name = $_FILES['file']['tmp_name'];
validate_extension_file($name_file);
$content_directory = $wp_filesystem->wp_content_dir() . 'uploads/archivos-subidos/';
$wp_filesystem->mkdir( $content_directory );
if( move_uploaded_file( $tmp_name, $content_directory . $name_file ) ) {
$res = [
'status' => 1,
'message' => "El archivo se agregó correctamente"
];
}
} else {
$res = [
'status' => 0,
'message' => "Existe un error en la subida del archivo"
];
}
echo json_encode($res);
wp_die();
}
// Nonce validation
function validate_nonce( $nonce_name ){
if ( ! wp_verify_nonce( $_POST['nonce'], $nonce_name ) ) {
$res = [
'status' => 0,
'message' => '✋ Error nonce validation!!'
];
echo json_encode($res);
wp_die();
}
}
// Extension file validation
function validate_extension_file( $name_file ){
$path_parts = pathinfo($name_file);
$ext = $path_parts['extension'];
$allow_extensions = ['png','jpg','pdf'];
if ( ! in_array($ext, $allow_extensions) ) {
$res = [
'status' => 0,
'message' => "Extensión de archivo no permitida"
];
echo json_encode($res);
wp_die();
}
}
En el código anterior procesamos los datos enviados por Javascript, validamos el nonce y también la extensión del archivo, los archivos se subirán a la carpeta: wp-content/uploads/archivos-subidos/, finalmente se devolverá un mensaje que intercertará el código Javascript.
Conclusión
Como has podido comprobar puedes mejorar el proceso de subida de archivos usando la funcionalidad de Ajax en WordPress, de esta forma la interfaz que construyas será más eficiente y amigable para el usuario ya que le estarás indicando en todo momento el proceso que se esta realizando sin necesidad de recargar la página completa.
¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores:
La entrada Subir archivos en WordPress usando Ajax es un artículo reciente del sitio DecodeCMS.
0 Commentaires