Subir archivos en WordPress, revisado: Parte 1 – El lado del cliente

Hace años escribí sobre cómo subir archivos en WordPress desde el área administrativa. Esta publicación es prácticamente una actualización de esa publicación, pero cubre nuevas consideraciones que hago y algunos otros procesos que creo que son necesarios.

Para esta publicación, voy a trabajar con el ejemplo de cargar un archivo PDF y cómo también hacer que esté disponible en la Biblioteca de medios.

Al hacerlo, también estoy planeando cubrir algunas consideraciones que se deben hacer en el lado del cliente y en el lado del servidor, así como cosas que buscar cada vez que alguien transfiera información a través del cable.

Carga de archivos en WordPress (y en la biblioteca multimedia)

Antes de llegar a la esencia de esta publicación, supongo que tienes:

1. Una página de submenú o configuración de página de administración con una entrada de archivo,
2. Que está configurado correctamente para aceptar tipos MIME,
3. Que te sientas cómodo con un poco de JavaScript,
4. Y te sientes cómodo trabajando con mensajes personalizados fuera de la API estándar de WordPress.

Si es así, todo el código debe explicarse por sí mismo (no es que no lo desglose pieza por pieza), pero si algo de lo anterior suena confuso, entonces la publicación puede incluir algún material que requiera un poco más investigación en el Codex o sobre JavaScript que proporcionaré aquí.

De todos modos, haré lo que pueda para ser lo más completo posible.

1 La idea principal

La idea de la función es simple: desea brindarle al usuario la capacidad de cargar archivos PDF a través del área de administración de WordPress. También desea que el archivo esté disponible en la Biblioteca multimedia.

La capacidad de hacer esto no es difícil, pero hay formas de mejorar la experiencia del usuario que también me gustaría cubrir en esta publicación (como no poder cargar nada hasta que el archivo se haya especificado en el cuadro de entrada, para ejemplo).

2 La interfaz de usuario para verificar el tipo de archivo

Primero, como dije en la parte superior de la publicación, asumo que tiene las bases establecidas para la página de administración en WordPress. Esto se puede hacer de varias maneras: he optado por usar una página de submenú, pero hay algunas formas de hacerlo.

En segundo lugar, la página es simple: incluye el título de la página, un campo de entrada de archivo y un botón "Cargar" que está deshabilitado de forma predeterminada:

Tenga en cuenta que cuando intento agregar una imagen que no es un PDF, aparece un mensaje de error y el botón ‘Cargar’ aún está deshabilitado:

Pero cuando agrego un archivo que es del tipo esperado, el botón ‘Cargar’ está habilitado:

Esto requiere algunas cosas:

• JavaScript que detecta el tipo de archivo,
• Parciales con visibilidad que se puede alternar dinámicamente a través de JavaScript,
• Y la capacidad de habilitar o deshabilitar un botón de entrada de archivos.

Una nota importante es que en el lado del cliente: solo podemos asumir que el archivo es del tipo de archivo adecuado en función de su extensión. Tendremos que trabajar más en el lado del servidor para garantizar que esto sea correcto.

Pero el punto de verificar en el lado del cliente para asegurarnos de brindar la mejor experiencia posible a través de mensajes de notificación y habilitar o deshabilitar opciones según el tipo de archivo.

3 Verificación del tipo de archivo en el lado del cliente

Supongamos que para este ejemplo tenemos un parcial que se procesa cada vez que intentamos cargar un archivo que no es un PDF. De forma predeterminada, el contenedor tiene un estilo="display:none;" atributo que manipularemos a través de JavaScript en breve:

<?php
/**
 * Displays whenever a person tries to upload a file that isn't a PDF. This is toggled via JavaScript.
 */
?>

<div id="invalid-file-message" class="error notice is-dismissible" style="display:none;">
    <p>You have attempted to upload an invalid file type.</p>
    <button type="button" class="notice-dismiss">
        <span class="screen-reader-text">Dismiss this notice.</span>
    </button>
</div><!-- #invalid-file-message -->

Tenga en cuenta que este parcial tiene un ID de mensaje de archivo no válido. Esto es un poco generalizado, ya que es posible que desee prefijarlo con otra cosa, pero para los fines de esta publicación, entiende la idea.

Para alternar la visibilidad de este mensaje, debe configurar un controlador en JavaScript para monitorear el cambio en el elemento de entrada del archivo.

4 Supervisión del elemento de entrada de archivos

En este punto, debe haber un archivo JavaScript que supervise el valor del evento de cambio del elemento de entrada del archivo para que pueda determinar qué curso de acción tomar.

Echa un vistazo a este código:

Este código buscará el valor del campo de entrada. Si el tipo de archivo no coincide con pdf, alternará la visibilidad del mensaje de error anterior; de lo contrario, mostrará el botón de carga.

Y recuerde, es una buena práctica poner en cola este script solo en el área de administración y en la página que se requiere :

<?php

public function enqueue()
{
    if (!is_admin() 'acme-upload-pdf' !== get_current_screen()->id) {
        return;
    }

    wp_enqueue_script(
        'acme-upload-pdf-admin',
        $this->pluginUrl. 'assets/scripts/admin.js',
        ['jquery'],
    );
}

Todo esto asegurará que su complemento registre correctamente el script en la página en la que se necesita, en ningún otro lugar, y que verifique correctamente para asegurarse de que el archivo especificado sea del tipo correcto.

Pero hay más

Originalmente, esta iba a ser una sola publicación, pero la cantidad de contenido para requerirlo todo tomaría demasiado tiempo para analizar (al menos, en mi opinión). Así que estoy tratando de hacerlo un poco más fácil de seguir dividiéndolo en un par de publicaciones.

Como se mencionó anteriormente, no hay mucho que podamos hacer en el lado del cliente. Claro, hay pasos que weUplo puede tomar para ayudar a mejorar la experiencia del usuario, pero no es el más seguro y hay más trabajo por hacer en el lado del servidor.

En la segunda mitad de esta serie, analizaré el PHP necesario para administrar la carga de archivos y hacerlo de manera segura.