Upload JavaScript con funcionalidad de arrastrar y soltar

Drogzone.js es una biblioteca open source que nos provee de la capacidad de arrastrar y soltar (drag’n’drop) para facilitar el proceso de subida de archivos a nuestro servidor.

La subida de archivos se realiza de manera muy similar a la que actualmente utiliza WordPress, es decir, mostrando una pequeña miniatura con barra de progreso, sin lugar a duda una de las implementaciones más modernas que podemos realizar de un sistema de upload de archivos.

Otra ventaja de esta biblioteca es que no necesariamente tiene que funcionar como un upload de archivos, podemos utilizar parcialmente a esta biblioteca, por ejemplo, aprovechando solamente la capacidad drag and drop, modificando el evento al finalizar la acción.

Ejemplo de Upload con Drag and Drop

Agregamos las bibliotecas a nuestro proyecto:

<script src="jquery.min.js"></script>
<script src="dropzone.js"></script>

Agregamos el código necesario a nuestro HTML:

<input type="file" name="file" />

Inicializamos DropZone.js (alternativa que usa jQuery):

$("div#myId").dropzone({ url: "/file/post" });

La configuración que utilice en el ejemplo es la más sencilla, ademas de utilizar jQuery. También podemos utilizar Dropzone sin ninguna dependencia, apenas modificando un poco el código. Punto muy favorable para aquellos programadores que no desean agregar al framework a su proyecto.

Las opciones de configuración permiten realizar varios ajustes, un ejemplo de esto que digo es el código que inserto a continuación.

Dropzone.options.myAwesomeDropzone = {
  paramName: "file", 
  maxFilesize: 2, // MB
  accept: (file, done) {
    if (file.name == "imagen.jpg") {
      done("Naha, you don't.");
    }
    else { done(); }
  }
};

Dropzone es compatible con los navegadores: Chrome 7+, Firefox 4+, IE 10+, Opera 12+ y Safari 5+.

Web: Drogzone.js