6

Soy nuevo en esto de trabajar con tareas asíncronas y me estoy volviendo loco. Cuando termine lo que tengo entre manos me podre a estudiar más sobre esto, pero ahora ando justito de tiempo.

Mi pregunta es la siguiente: necesito validar un formulario desde el cliente (también lo voy a realizar desde el servidor, pero quiero doble seguridad). Lo que quiero validar es al subir un archivo, verificar que este sea una imagen. Hay muchos métodos por ahí que analiza la extensión o te devuelve el mime/type pero es incorrecto, ya que podéis intentarlo al cambiar la extensión a un mp3 y jpg y te dirá que el MIME es jpg.

Empecé viendo un ejemplo que leía 4 bits del archivo y después según sean esos 4 bytes puedes saber que tipo de archivo es. Lo que pasa que el código que empecé a realizar no se como implementarlo.

Lo que quiero que haga es lo siguiente: del formulario seleccionas una imagen, y cuando selecciones una, que lea sus 4 bytes iniciales, lo compare y si realmente esta entre los admitidos pues que se muestre una preview... si no es así que se muestre un mensaje de error diciendo archivo inválido.

Lo que necesito es que la función checkFileType me devuelva un valor a $('input[type=file]#imagencabecera').change(function() y así después de la validación si es correcta que se muestre la preview en pantalla.

Este es el código que falta por retocar:

    $('input[type=file]#imagencabecera').change(function(){
    var file = (this.files[0].name).toString();
    var type = (this.files[0].type).toString();
    var reader = new FileReader();
    console.log(type);

    $('#file-info').text('');
    $('#file-info').text(file);

    reader.onload = function (e){
        $('#filepreview img').attr('src', e.target.result);
    }

    reader.readAsDataURL(this.files[0]);
});

function checkFileType(file){
    if (window.FileReader && window.Blob)
    // All the File APIs are supported. Si soporta HTML5 FileReader y Blob
    {
        var slice = file.slice(0,4);      // Get the first 4 bytes of a file
        var reader = new FileReader();    // Create instance of file reader. It is asynchronous!
        reader.readAsArrayBuffer(slice);  // Read the chunk file and return to blob

        reader.onload = function(e) {
            var buffer = reader.result;          // The result ArrayBuffer
            var view = new DataView(buffer);     // Get access to the result bytes
            var signature = view.getUint32(0, false).toString(16);  // Read 4 bytes, big-endian,return hex string

            switch(signature) // Every file has a unique signature, we can collect them and create a data lib
            {                      
                case "89504e47": file.verified_type = "image/png"; break;
                case "47494638": file.verified_type = "image/gif"; break;
                case "FFd8FFe0": file.verified_type = "image/jpeg"; break;
                case "FFd8FFe1": file.verified_type = "image/jpeg"; break;
                case "FFd8FFe2": file.verified_type = "image/jpeg"; break;                  
                case "FFd8FFe3": file.verified_type = "image/jpeg"; break;
                case "FFd8FFe8": file.verified_type = "image/jpeg"; break;
                default: file.verified_type = 0;
            }
        }

    }
    else
    // File and Blob are not supported
    {

    }
}

Muchas gracias por todo.

3
  • ¿Cuándo mandas llamar checkFileType()? Commented el 2 mar. 2017 a las 23:02
  • @evildesigns que valor tiene que retornar?, no entiendo esta parte Lo que necesito es que la función checkFileType me devuelva un valor a $('input[ty... Commented el 2 mar. 2017 a las 23:08
  • @x-rw pues si llamo a checkFileType en el input, al ser una función con asincronía te va a devolver un undefined, de ahí mi pregunta aquí ya que no se como hacer la validación ahí. No se si debería de cambiar la estructura y no hacer una funcion checkFileType y meterla dentro del input
    – MrCodeDev
    Commented el 3 mar. 2017 a las 7:07

2 respuestas 2

3

Lo más sencillo es utilizar promesas. Para ello, primero debes definir una promesa la cual ejecutará la función checkFileType. Luego, consumir la promesa para que cuando termine la ejecución de checkFileType se ejecute lo que tu quieras. De este modo es como se soluciona la asincronía de JS.

var checkFileTypePromise = new Promise(function(resolve, reject) {
  // Ejecutamos la función y obtenemos el 'verified_type'
  verified_type = checkFileType(file);

  // Si queremos resolver (finalizar correctamente) la promesa,
  // utilizamos la función 'resolve(resultado)'.
  // Si queremos lanzar algún error, utilizamos 'reject(razón)'
  resolve(verified_type);
});

checkFileTypePromise
  .then(function(result) {
    // La promesa ha finalizado correctamente.
    // En 'result' tenemos el valor que nos devuelve la función
    console.log(result);
  });
  .catch(function(reason) {
    // La promesa ha finalizado con algún error.
    console.err(result);
  });

Este código lo puedes insertar en $('input[type=file]#imagencabecera').change().

1
  • 1
    Muchas gracias, realmente al final lo conseguí a base de callback leyendo bastante. Más adelante utilizaré las promesas si tengo algún callback hell. Un saludo
    – MrCodeDev
    Commented el 7 mar. 2017 a las 16:37
2

Tienes dos opciones:

  • Promesas
  • Callbacks

Promesas (ES6)

Las promesas fueron introducidas en ES2015 (aka ES6) y son una solución planteada por la ECMAScript al famoso callback hell. Las promesas reciben como callback una función con dos parámetros:

  • resolve
  • reject

La función resolve se usa para indicar que un dato va a ser entregado por quien espera la promesa. La función, reject se usa para indicar que algo en el proceso ha fallado.

let chooser = document.getElementById('chooser');

chooser.addEventListener('change', checkMime);

function getRealMime(file) {
  return new Promise((resolve, reject) => {
    if (window.FileReader && window.Blob) {
      let slice = file.slice(0, 4);
      let reader = new FileReader();
      
      reader.onload = () => {
        let buffer = reader.result;
        let view = new DataView(buffer);
        let signature = view.getUint32(0, false).toString(16);
        let mime = 'unknown';

        switch (signature) {
          case "89504e47":
            mime = "image/png";
            break;
          case "47494638":
            mime = "image/gif";
            break;
          case "FFd8FFe0":
            mime = "image/jpeg";
            break;
          case "FFd8FFe1":
            mime = "image/jpeg";
            break;
          case "FFd8FFe2":
            mime = "image/jpeg";
            break;
          case "FFd8FFe3":
            mime = "image/jpeg";
            break;
          case "FFd8FFe8":
            mime = "image/jpeg";
            break;
        }

        resolve(mime);
      }
      
      reader.readAsArrayBuffer(slice);
    } else {
      reject(new Error('Usa un navegador moderno para una mejor experiencia'));
    }
  });
}

function checkMime(e) {
  getRealMime(this.files[0])
    .then(mime => {
      console.info(`Real mime: ${mime}`);
      // evaluar si el mime está disponible
      
    })
    .catch(err => {
      console.error(err.message);
    });
}
input[type="file"] {
  display: none;
}

label {
  background-color: #ff0065;
  border-radius: 3px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: 'Segoe UI', 'Ubuntu', sans-serif;
  font-size: 14px;
  height: 35px;
  line-height: 35px;
  padding: 0 12px;
}
<input type="file" id="chooser"/>
<label for="chooser">Select file</label>

Callbacks (ES5)

Esta forma es la que se usa de facto en ES5. Consiste en pasar una función como parámetro a ejecutarse una vez que la función principal ha terminado su proceso.

var chooser = document.getElementById('chooser');

chooser.addEventListener('change', checkMime);


function getRealMime(file, cb) {
  if (window.FileReader && window.Blob) {
    var slice = file.slice(0, 4);
    var reader = new FileReader();
    reader.onload = () => {
      var buffer = reader.result;
      var view = new DataView(buffer);
      var signature = view.getUint32(0, false).toString(16);
      var mime = 'unknown';
        
      switch(signature) {                      
        case "89504e47": mime = "image/png"; break;
        case "47494638": mime = "image/gif"; break;
        case "FFd8FFe0": mime = "image/jpeg"; break;
        case "FFd8FFe1": mime = "image/jpeg"; break;
        case "FFd8FFe2": mime = "image/jpeg"; break;                  
        case "FFd8FFe3": mime = "image/jpeg"; break;
        case "FFd8FFe8": mime = "image/jpeg"; break;
      }

      cb(null, mime);
    }
    
    reader.readAsArrayBuffer(slice);
  } else {
    cb(new Error('Usa un navegador moderno para una mejor experiencia'), null);
  }
}

function checkMime (e) {
  getRealMime(this.files[0], function (err, mime) {
    if (err) {
      console.error(err.message);
    } else {
      console.info('Real mime', mime);
    }
  });
}
input[type="file"] {
  display: none;
}

label {
  background-color: #ff0065;
  border-radius: 3px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: 'Segoe UI', 'Ubuntu', sans-serif;
  font-size: 14px;
  height: 35px;
  line-height: 35px;
  padding: 0 12px;
}
<input type="file" id="chooser"/>
<label for="chooser">Select file</label>

2
  • Gracias por la respuesta. Como dije al compañero de arriba lo arreglé con callback al ser sólo uno, si tengo varios intentaré juguetear con ello. Hasta que no se te mete dentro en la cabeza que es una asincronía en javasript te vuelves loco. Un saludo
    – MrCodeDev
    Commented el 7 mar. 2017 a las 16:40
  • Jaja sí, cuesta bastante a decir verdad al principio entender bien cómo funciona JavaScript. Solo hay que darle caña ;)
    – gugadev
    Commented el 7 mar. 2017 a las 16:59

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.