Validando Extensiones


Hace algunos días atrás dediqué un artículo al componente com_media de Joomla y compartimos algunos tips de como utilizarlo en un componente propio. Amigos míos leyeron el artículo y me comentaron sus inquietudes y opiniones, me alegré pues todos coincidimos que el uso de dicho componente es la mejor opción para realizar la subida de ficheros a nuestros sitios Joomla. Uno en particular me propuso el tema que les traigo hoy, el escenario es el siguiente.

Digamos que necesitamos realizar algún tipo acción dependiendo del tipo de archivo que estemos subiendo. Por ejemplo el sistema del cual el me hablaba necesitaba que solo se pudiera subir tres tipos de extensiones, archivos PDF, documentos de Power Point de Microsoft o ficheros XML utilizados en la importación de los productos que manejaba la aplicación. Básicamente validación.

La validación se puede hacer de dos maneras, de hecho es recomendable hacer las dos (obligatorio para los programadores más conscientes). Validación de parte del cliente con javascript y la validación por parte del servidor (con cualquier lenguaje del lado del server como PHP o ASP) Hoy les mostraré como insertar en la misma plantilla que desarrollamos en el artículo al cual hago referencia una función de validación utilizando javascript y jQuery. El trabajo consiste en chequear la extensión del fichero seleccionado antes de subirlo al servidor y por supuesto dependiendo del resultado darle un tratamiento u otro.

Para los que no leyeron el artículo los remito al mismo. Recuerden tenemos el formulario con un campo de texto (input) de tipo file que permite seleccionar el archivo local a subir al servidor. Y por supuesto un botón de acción que activa el action del formulario, el cual hace referencia al componente com_media de Joomla quien realiza el trabajo duro por nosotros. EL siguientes es el formulario.

        <form action="<?php echo JUri::base(); ?>index.php?option=com_media&amp;task=file.upload&amp;tmpl=component&amp;&amp;<?php echo JSession::getFormToken();?>=1&amp;format=html&folder=cproducts/products/files" id="uploadForm" class="form-inline" name="uploadForm" method="post" enctype="multipart/form-data">
                <div id="uploadform">
                        <fieldset id="upload-noflash" class="actions">
                                        <label for="upload-file" class="control-label"><?php echo JText::_('Subir archivo'); ?></label>
                                                <input type="file" id="upload-file" name="Filedata[]" /> <button class="btn btn-primary" id="upload-submit"><i class="icon-upload icon-white"></i> <?php echo JText::_('Subir'); ?></button>
                        </fieldset>
                        <input class="update-folder" type="hidden" name="folder" id="folder" value="cproducts/products/files" />
                        <input type="hidden" name="return-url" value="<?php echo base64_encode(JRoute::_('index.php?option=com_cproducts&view=cproduct', false)); ?>" />
                </div>
        </form>

Crearemos un código que se activará en el evento onChange del input que tiene como id upload-file. Una vez seleccionado el archivo, el nombre del mismo se le asigna como valor de entrada al campo de texto y es cuando entra en juego nuestro método.

  jQuery(document).ready(function(){
        jQuery("#upload-file").change(function() {
            var extension = jQuery("#upload-file").val().split('.').pop(); // Obtengo la extensión
            
            switch(extension) {
        case 'pptx':
            alert('Es un archivo de Power Point');  // Si la extensión es pptx pues ya sabemos que es Power Point por lo que le damos el tratamiento necesario
            // Accion a realizar
            break;
        case 'xml':
            alert('Es un archivo XML, necesitamos importarlo'); // XML es nuestro fichero con datos de importación de productos, actuamos en consecuencia
            // Accion a realizar
            break;
        case 'pdf':
            alert('Fichero PDF');
            // Accion a realizar
            break;
        default: // No es ninguno de los anteriores por lo que reseteamos el valor del campo que contiene el fichero a subir
            alert('El archivo seleccionado no es del tipo requerido.');
            jQuery("#upload-file").val('');
        }
        });  
    })

Fíjense que utilizando un switch queda mucho más elegante el código. Es válido también el uso de condicionales if pero no se vería tan genial. Las acciones a realizar pueden ser varias. Establecer algún tipo de acción en el formulario, setear algún campo que contenga el nombre de una función que será ejecutada luego que el componente com_media suba el archivo. Las posibilidades son infinitas y están al alcance de nosotros. Recuerden que esto es solo una parte, la validación javascript puede saltarse fácilmente como ya sabemos, aunque nunca está de más, quizás en un próximo artículo discutamos la variante del lado del servidor (con PHP por supuesto).

Latest posts by Leroy Ley (see all)