<h1>Validar subida de archivos con formData html5</h1>
En este tutorial vamos a crear un formulario, que nos va a permitir subir archivos a nuestro servidor, verificando que el tipo de archivo sea jpg, gif, o png antes de enviarlo al servidor y gastar recursos innecesarios<!--more-->,
dándole al usuario una respuesta rapida usando la api FormData mediante javascript,
lo primero que vamos a crear es nuestro template en html5 y agregar un simple formulario
[color=#000000]
<div id="wrapper">
<h1>Subir imagen</h1>
<!--
<form action="" method="POST" enctype="multipart/form-data"> -->{}
<input type="file" name="avatar" />
<input type="submit" value="Enviar" />
<div id="error"></div>
</div>
[/color]
agregamos algo de estilo , metiendo este codigo en el head ( abajo de la etiqueta meta) en el id wrapper , centramos el contenido mediante el margin, cambiamos el fondo y añadimos algo de padding para que se vea un poco mejor, tambien cambiamos el color del texto del div error a rojo
[color=#000000]
<style>
#wrapper{
margin: 0 auto;
width: 400px;
border:solid 1px grey;
padding: 8px;
background: #ddd;
}
label{
display:block;
margin-bottom: 5px;
}
#error{
width: 200px;
color:red;
padding: 8px;
}
</style>
[/color]
con la presentacio basica ya terminada pasamos a javascript, agregamos este codigo debajo del formulario, antes de la etiqueta de cierro del body
[color=#000000]
if(window.FormData){
// valida archivo
}else{
alert("actualiza tu navegador, para usar FormData")
}
[/color]
debido a que la api formData no esta soportada por todos los navegadores ( IE lo soporta desde la version 10) usamos un condicional [if(window.formData)], si nos da verdadero procedemos a validar el archivo si no enviamos un mensaje al usuario,
[color=#000000]
if(window.FormData){
var file = document.getElementById("avatar"),
error = document.getElementById("error"),
submit = document.getElementById("submit");
error.innerHTML = "";
file.addEventListener("change", function(){
validateFile = this.files[0];
console.log(validateFile)
})
}
[/color]
en caso de que nuestro navagador soporte FormData usamos el método getElementById para tener referencia al input file de nuestro formulario y lo guardamos en una variable llamada file también guardamos una referencia al div con el id error y al botón submit , después mediante addEventListener, llamamos al evento change, que se va a encargar de llamar a una función anónima cuando el usuario seleccione un archivo, creamos una variable llamada validateFile, que va a guardar los datos relacionados al archivo, usamos this que hace referencia el elemento seleccionado con la propiedad files contiene los datos de la misma usando console.log vemos lo siguiente
vemos información importante como el nombre, tamaño y tipo, estos nos últimos nos van a servir para realizar la validación
[color=#000000]
if(validateFile .size > 1000000){
document.getElementById("error").innerHTML("EL archivo pesa mas que 1mb");
error.innerHTML = "EL archivo pesa mas que 1mb";
submit.setAttribute("disabled", "disabled");
return;
}
[/color]
primero verificamos el tamaño de la imagen, supongamos que el limite de subida de que queremos es de 1mb, debido a que file.size guarda el tamaño en bytes usamos este numero 1000000 , ( 1kb equivale a 1000bytes y 1mb a 1000000 bytes); si nos da verdadero damos el mensaje al usuario en el div con el id error, también deshabilitamos el botón submit para evitar que el usuario no pueda enviar el formulario al servidor , con el atributo disabled despues un return para que el script no se siga ejecutando
[color=#000000]
if(validateFile.type == "image/png" || validateFile.type == "image/jpeg" || validateFile.type == "image/jpg" || validateFile.type == "image/gif"){
error.innerHTML = "Archivo aceptado";
submit.removeAttribute("disabled");
}else{
submit.setAttribute("disabled", "disabled");
error.innerHTML = "EL archivo debe ser jpg, gif o png";
}
[/color]
necesitamos que el archivo este en png, gif o png, para verficarlo usamos un condicional que examina la propiedad size del archivo sea igual a alguno de estos formatos, si nos da true, mostramos un mensaje de exito y removemos el atributo disabled mediate el metodo setAttribute
si el archivo no es valido deshabilitamos el boton submit y mandamos el mensaje adecuado