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) {

JS DOS METODOS PARA VALIDAR EXTENSION DE ARCHIVO

PARTIMOS DE UNA ARRAY EN EL QUE INCLUIMOS LAS EXTENSIONES PERMITIDAS.

Primero recupero la extensión del archivo:

    var archivo = $("#uploadImage").val(); // o file.name
    //RECUPERO LA EXTENSION DEL ARCHIVO
    var ext = (archivo.substring(archivo.lastIndexOf("."))).toLowerCase();

Método 1º por medio de un for recorremos el array:

    ext_ok = new Array(".gif", ".jpg", ".png", ".jpeg", ".mkv", ".mp4", ".avi", ".webm");
    //COMPRUEBO SI LA EXTENSION ESTA PERMITIDA
    permitida = "";
    for (var i = 0; i < ext_ok.length; i++) {
        if (ext_ok[i] == ext) { permitida = "yes";
                                   break;
         }else {permitida = "no";}
    } // FIN for

PHP REDUCIR IMAGEN

Mediante este simple script logro la reducción de la imagen.
Lo puedo aplicar comprobando la altura o el ancho de la imagen, nos serviría en los dos casos.
$ancho y $alto son los valores reales de la imagen.
$ext la extensión de la misma.
Nos servira si la imagen es jpg, png, jpeg.

Los valores de la imagen los obtengo de la siguiente manera:

        global $ancho;
        global $alto;
        list($ancho, $alto, $tipo, $atributos) = getimagesize("temp/img.".$_SESSION['imgext']);

        global $anchomax;
        $anchomax = 900;
        global $altomax;
        $altomax = 900;

DROPZONE JS VALIDACIONES EXTRA

En este artículo os comentaré como he ampliado las validaciones de dropzone js de una forma sencilla:
En este otro artículo (ir al artículo) os explico como validar el ancho y alto de una imágen, por medio de los objetos file.width y file.heigth.

Partiendo de la configuración inicial en:

      This is an original option:
          accept: function(file, done) {
            return done();
          },
          init: function() {
            return noop;
          },
         
 He integrado alguna validación muy fácil de modificar y que nos retorna los errores en pantalla sin problema:

      accept: function(file, done) {

      ext_img = new Array(".jpg", ".png", "jpeg");
      var namei = file.name;
      var exti = (namei.substring(namei.lastIndexOf("."))).toLowerCase();

DROPZONE JS CONFIGURACION BASICA

Hola a todos en este post voy a compartir con vosotros las configuaciones básicas de dropzone js y los comentarios sobre ellas.
En otro atriculo os comentaré como he integrado algunas balidaciones extra según el tipo de archivo y su peso.

      /* url: defines the target for the upload form, and is the only required parameter.
      That said, if you’re attaching it to a form element then it’ll simply use the form’s action attribute, in which case you don’t even need to specify that. */
      url: null,
      // method: sets the HTTP method and again, it’ll simply default to POST
      method: "post",
      withCredentials: false,