Tag: Javascript

Verificar si el archivo existe Vue Js

¿En qué casos nos podría interesar verificar que un archivo existe o no en nuestro servidor u otro?

Este es un caso real:

Tenemos una plataforma multilenguaje y queremos crear de forma dinámica los archivos en varios lenguajes. Para ello hemos creado un sistema de gestión de archivos en el que se puede utilizar el mismo registro para llamar a los distintos archivos en los distingos lenguajes. Es decir, podemos tener un manual en ES y EN.

Ahora bien, en Vue Js tenemos una estructura en la que no necesitamos decirle manualmente qué archivo escoger, si no que queremos que lo haga dinámicamente al cambiar de idioma. Aquí es donde nos vendrá de lujo esta función.

<a :href=»‘/’+locale+’/media/archivo.pdf'» class=»pdf-link»>{[ translations.label_download ]}</a>

Este es nuestro link que va a variar en los distintos idiomas.

¿Pero qué tal si hemos subido el archivo sólo en un idioma? Podemos evaluar si existe o no con la siguiente función.

He añadido además un caso en el que la evaluación puede estar condicionada a una acción. A la hora de hacer un clic, toggle se accionará y verificará que, para empezar esa estructura de html exista con el .length y a partir de allí empezar a buscar de cada registro encontrado si existe el archivo en el servidor.

Detectar dispositivo móvil Javascript / PHP

Estas dos funciones son la manera más simple para poder detectar si se está utilizando un dispositivo móvil en nuestra página web.

Existirán funciones más complejas, pero estas cumplen bien su cometido.

Si vemos, la versión de Javascript parece mucho más compleja, por lo que podríamos utilizar AJAX para realizar nuestras validaciones realizando la llamada a un archivo PHP utilizando la función en este lenguaje.

JAVASCRIPT

PHP

function isMobile() {
    return preg_match("/(android|avantgo|blackberry|bolt|boost|cricket|docomo|fone|hiptop|mini
|mobi|palm|phone|pie|tablet|up\.browser|up\.link|webos|wos)/i", $_SERVER["HTTP_USER_AGENT"]);
}

// Use the function
if(isMobile()){
    // Do something for only mobile users
}
else {
    // Do something for only desktop users
}

Método Click en elementos creados dinámicamente con Javascript o Jquery

Al crear un elemento dinámicamente con javascript o utilizando jquery nos vemos con un problema, el cual muchas veces es un quebradero de cabeza. Estoy hablando de utilizar el elemento con jQuery utilizando los métodos click(), change(), blur(), etc…

Supongamos que hemos creado un elemento <input type=»button» id=»saveBtn» class=»btn» value=»Guardar» /> por javascript y lo incluimos en el documento con «.append()» o «.html()».

Ahora, queremos añadirle un click() method a nuestro nuevo amigo usando jQuery. NO SE PUEDE!

$('#saveBtn').click(function () {alert($(this).attr("id")); }); 

¿Por qué? Porque a la hora de cargar el documento este elemento no existía. Los métodos solamente se asocian (bind) con los elementos que se cargan en el momento de que el navegador ejecute la carga del DOM (Document Object Model), por lo que jQuery directamente pasa del tema.

La solución

Utilizaremos el método on() para decirle al documento que nos busque el elemento que necesitamos, y asociarle el método click de la siguiente manera:

$(document).on('click', '#saveBtn', function () {
    alert($(this).attr("id"));
});

Para acceder al elemento y utilizarlo, haremos algo parecido, buscando el elemento cuyo atributo «id» sea «saveBtn»:

var dataId = $('[id^="saveBtn"]');

Si queremos acceder utilizando la clase:
var dataId = $('[class^="btn"]');

Para casos extremos en el que no podamos realizar acciones con algunos elementos del documento, os dejo además estos métodos nativos de javascript:

El id del elemento: document.getElementById('saveBtn');

La etiqueta html: document.getElementsByTagName('input');

La clase: document.getElementsByClassName('btn');

El selector: document.querySelectorAll('input.btn');

TinyMCE + Responsive File Manager

TinyMCE + Responsive File Manager

Todo el mundo conoce TinyMCE, el editor de texto WYSIWYG que funciona en la mayoría de aplicaciones web en la que utilizando unas cuantas opciones personalizadas podemos obtener un editor según nuestras necesidades.

Hasta aquí bien, pero ¿Qué pasa cuando necesitamos añadir un archivo a nuestro texto? Creo que existe una función sencilla pero yo he utilizado un plugin externo que me pareció interesante. El problema es que este plugin se ha actualizado a una nueva versión y no he tenido tiempo de verificar si esto funciona en la nueva versión. Dejaré un enlace para descargar la versión que yo utilizo para poder trabajar con ella.

La Versión de TinyMCE  que estamos utilizando es la V3 pero confirmo que se puede utilizar la V4.

El plugin que añadiremos para gestionar la subida de ficheros será Responsive FileManager.

Instalación

Al descargar el archivo comprimido, lo colocaremos en la carpeta donde tengas instalado el TinyMCE.

Al descomprimir verás una carpeta que dice TinyMCE. Dentro está  una carpeta responsivefilemanager. «Cortamos» para moverlo.

Buscamos la carpeta de TinyMCE > carpeta plugins y «pegamos».

Podríamos meter todo desde la misma carpeta del tinymce, pero preferí separar las cosas para tenerlo mejor controlado.

Iniciar el Plugin

Para iniciar el plugin con el TinyMCE tendremos que añadirlo a la función .init junto a las opciones que tengamos establecidas:

plugins: ['todosNuestrosPlugins responsivefilemanager'],
toolbar: ['nuestrasOpcionesPersonalizadas responsivefilemanager']
external_filemanager_path: root_folder+"js/responsivefilemanager/filemanager/",
filemanager_title:"Gestor de Archivos",
external_plugins: { "filemanager" : root_folder+"tinymce/plugins/responsivefilemanager/plugin.min.js"},

todosNuestrosPlugins se refiere a los plugins que tengamos cargados manualmente.

nuestrasOpcionesPersonalizadas se refiere a las opciones que queremos mostrar en el toolbar.

plugins buscará el nombre del plugin responsivefilemanager en la carpeta de plugins (Tal como lo hemos creado y llamado anteriormente)

toolbar es el sistio donde queremos que aparezca nuestro plugin en la barra de herramientas que se mostrará al cargarse el editor.

external_filemanager_path es donde se cargará la librería. (Dónde la hemos instalado junto al TinyMCE)

external_plugins es el sitio donde hemos instalado el plugin en el tinymce para que la magia se haga realidad.

Para controlar la acción del botón de Búsqueda / Browse de la imagen, crearemos un callback function que realizará la acción de abrir el dialog donde se cargará el responsive file manager.

El código lo añadimos al .init igual que las opciones anteriores:

file_browser_callback: function(field_name, url, type, win) {
var filebrowser = root_folder+"js/responsivefilemanager/filemanager/dialog.php?type=1&fldr=source_"+source_id+"&field_id="+field_name;
tinymce.activeEditor.windowManager.open({
title : "Insertar Fichero",
width : 850,
height : 500,
url : filebrowser,
id : 'tinyMceFileBrowser'
},{
window : win,
input : field_name
});
return false;
}

Ahora les explico qué parametros nos da el callback de TinyMCE. Pero quiero aclarar que hay un parámetro que puede que nos resulte confuso.

Hay un parámetro TYPE que veremos en la URL de «var filebrowser». Yo en un principio pensaba que lo que venía entre los parámetros del callback era lo que había que meter en la URL (pensando que el plugin estaba preparado para interpretarlo) pero no es así.

Lo que nos devuelve el parámetro type del callback del TinyMCE son 3 opciones (‘image’, ‘media’ or ‘file’) y se utiliza en su función nativa
El parámetro que añadimos en la url de «var filebrowser» pueden ser 3: (1:images files 2:all files 3:video files)

Por lo que no tiene nada que ver con lo que nos da el TinyMCE. Hay que tenerlo en cuenta para no confundirlo.

file_browser_callback

Esta opción habilita el buscador de archivos en las opciones de TinyMCE que utilicen la función de buscar/cargar.

Si esta opción está configurada, habilita un botón de «buscar / browse» en los dialogs de «insertar/editar link» o en el de «insertar/editar imagen».

El formato de la función:

fileBrowser(field_name, url, type, win)

field_name es el id/nombre del elemento del formulario (textarea) donde se insertará la url o el archivo.

url es el link del elemento actual (si estuvieses editando uno o quisieses eliminarlo). Por ejemplo al clicar un enlace o imagen dentro del TinyMCE.

type es el tipo de «buscador» que se utilizará. El valor puede ser ‘image’, ‘media’ o ‘file’, dependiendo desde que dialog se esté llamando la función.

win hace referencia al dialog/window que está ejecutando la función.

Configuración para Separar Usuarios

Una de las cosas que era necesario implementar era que cada usuario pueda ver su propia carpeta. Para ello, añadiremos unas cuantas opciones en las sesión. Creo que no hace falta decir que debe añadir estas opciones cuando el usuario incie sesión, pero por si acaso LO CONFIRMO. Estas opciones las cargará automáticamente el plugin, y podemos ver como se utiliza en el archivo de dialog.php y ajax_calls.php

// CARPETA POR DEFECTO PARA SUBIR IMAGENES/FICHEROS DEL EDITOR DE TINYMCE
$_SESSION['RF']["verify"] = "RESPONSIVEfilemanager"; // Verificación para el plugin de File Manager
$_SESSION['RF']['subfolder'] = 'source_'.$_SESSION['user_id'];
$_SESSION['RF']['language'] = $_SESSION['user_lang']; // Tenemos 3 idiomas configurados español (es), inglés (en), italiano (it)
if($sss['lang_entidad'] == 'en') $idioma = 'en_EN'; // Si entramos en la carpeta de responsivefilemanager/lang veremos los distintos idiomas
else $idioma = $_SESSION['user_lang'];
$_SESSION['RF']['language_file'] = 'lang/'.$idioma.'.php'; // Cargamos la configuración según el idioma

Validar Tamaño y Tipo de Archivo Input File con HTML + Jquery

Validar tipo de archivo con HTML

Para validar el tipo de archivo que puede aceptar un Input File necesitaremos el atributo «accept» para que una vez se abra el dialogo para elegir el archivo se aplique un filtro para solo aceptar los archivos que añadamos en el atributo.


<input id="campoFile" accept="tipo_de_archivo|audio/*|video/*|image/*|media_type" name="archivo" type="file" value="" />

FILTROS NORMALMENTE UTILIZADOS:

AUDIO (.mp3, .wav, etc): accept=»audio/*»
IMAGES: accept=»image/gif,image/jpeg,image/jpg,image/png»
EXCEL 97-2003 (.xls): accept=»application/vnd.ms-excel»
EXCEL 2007+ (.xlsx): accept=»application/vnd.openxmlformats-officedocument.spreadsheetml.sheet»
PDF: accept=».pdf»
VIDEO (.avi, .mpg, .mpeg, .mp4): accept=»video/*»

Validar Tamaño y Extensión con Javascript y Jquery

Para validar el tamaño del archivo utilizaremos una función muy sencilla utilizando JQUERY antes de enviarlo por POST.

Prueba con las diferentes extensiones y cambia el código Javascript para ver los resultados: