Close

PHP/JS : Ejemplo practico de como usar DropZone JS

Vamos a ver un ejemplo donde usaremos la librería DropZone de una forma muy fácil de entender yo se que viene una documentación en ingles muy amplia en el sitio web, pero puede que no le entendamos al 100%  y quise desarrollar un ejemplo para verlo funcionar de una forma sencilla y eficiente.

Como ya verán en el Ejemplo, lo implemente con Bootstrap 3 para darle una mejor visualización.

Dentro de nuestro index.html solamente tenemos un panel de Bootstrap con un Botón que nos abrirá un Modal donde se pintara el objeto Dropzone en el DIV

Y en este Div vamos a mostrar los archivos que se encuentran en el servidor, esto lo desarrollaremos igualmente con un fragmento de código extraído de la documentación PHP

En nuestro Archivo javascript(main.js) tenemos el evento show.bs.modal que si no conocen bootstrap sabremos que este evento se ejecuta cuando el modal se abre ya con todo y los efectos FadeIn de CSS.

dentro de este evento le vamos a renderizar el form donde contendrá nuestro HTML necesario para que nuestro objeto DropZone funcione.

Tenemos una función llamada getArchivos() lo único que hace es ir al archivo getArchivos.php y obtener una lista de los archivos subidos al servidor, más abajo esta el código.

Por ultimo tenemos el evento hidden.bs.modal de bootstrap que se ejecuta al cerrar el modal, donde lo único que hacemos es limpiar el div que contenia el HTML requerido para el funcionamiento de nuestro form DropZone y mandamos a llamar el método getArchivos().

Tenemo un fragmento de codigo PHP que hace que nos muestre los archivos en la carpeta donde se están subiendo: (getArchivos.php)

Por acá tenemos un pequeño fragmento de código que saqué de la documentación de PHP donde lo único que hace es recibir el archivo y mover lo a una carpeta llamada archivos, situada en la raíz de nuestro proyecto (main.php).

Ver Ejemplo

En lo personal se me hizo una librería muy buena para darle un mejor vistazo a nuestros input files, yo se que en el sitio web de DropZone esta toda la documentación pero hay ciertas cosas que debemos de investigar por fuera para cumplir nuestras necesidades y de esta forma es la que se me hizo más practica y completa.

1 thought on “PHP/JS : Ejemplo practico de como usar DropZone JS

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.