sábado, 16 de mayo de 2020

DROPZONE JS COMO VALIDAR ANCHO Y ALTO DE UNA IMAGEN FILE.WIDTH FILE.HEIGTH

Hola a todos de nuevo.
En un artículo muy reciente (ir al articulo) hemos visto una solución para validar el tipo de archivo y su peso en Dropzone.js, a partir de la configuración inicial.

A quedado patente la dificultad de acceder al objeto file.width y file.heigth en esta librería y os propongo una solución para validar el ancho y alto de una imagen.

A partir de la configuración inicial, igual que en el otro ejemplo, realizaremos unas pequeñas modificaciones para conseguir esta validación.

Vamos:

/* Esta es la configuration inicial:
          accept: function(file, done) {
            return done();
          },
          init: function() {
            return noop;
          }, */

// Y esta es la nueva configuración:
     accept: function(file, done) {


      ext_img = new Array(".jpg", ".png", "jpeg");
      var namei = file.name;
      var exti = (namei.substring(namei.lastIndexOf("."))).toLowerCase();
     
      var sizemb = Number(file.size / 1024000).toFixed(2);

      if (ext_img.includes(exti)) {
          // ERROR SI LA IMG > DE 1 MEGA
          if (file.size > (1000 * 1024)){
                return done ('IMAGEN: '+file.name+' SIZE: '+sizemb+' > 1MB');
               
            }else{

              /*  VALIDO EL ANCHO Y ALTO DE LA IMAGEN */
              var reader = new FileReader();
              reader.onload = (function (file) {
                  var image = new Image();
                  image.src = file.target.result;
                  image.onload = function () {
                      var ancho = this.width;
                      var alto = this.height;
                      if (ancho > 900) { return done("Ancho "+ancho+" > 1000 px"); }
                      else if (alto > 900) { return done("Alto "+alto+" > 1000 px"); }
                      else {return done();}
                  };
              });
              reader.readAsDataURL(file);
              // FIN VALIDO EL ANCHO Y ALTO DE LA IMAGEN
             
              /* SI VALIDO SOLAMENTE EL SIZE, Y NO EL ANCHO Y ALTO.
                 RETURN OK Y UPLOAD IMAGE

                return done();
              */
            } // FIN CONDICIONAL SE VALIDA EL SIZE
          } // FIN SI ES IMAGEN

      else {
              return done ();
            }
    }, // FIN accept: function(....

    init: function() {
      return noop;
    },

No hay comentarios:

Publicar un comentario

Gracias por vuestros aportes.