Como subir Imagenes/Archivos con Dropzone.js y PHP

El plugin Dropzone.js es el plugin mas popular que sirve para subir archivos usando la funcion Drag and Drop o Arrastrar y Soltar.

En este articulo vamos a implementar el plugin Dropzone.js y veremos un pequeño ejemplo.

Basicamente lo que hace Dropzone.js es que habilita un espacio en nuestra pagina donde vamos a poder arrastrar un archivo desde nuestra PC y soltarlo en este espacio o zona de Soltar (dropzone) y los archivos que arrastremos a esta zona se van a subir mediante un script de subida de archivos previamente preparado.

Descargar Dropzone.js

Para descargar dropzone.js simplemente vamos a usar las URLs de la libreria que estan en la pagina oficial.

Esto va en el HEAD del documento HTML.

<script src="https://unpkg.com/dropzone@6.0.0-beta.1/dist/dropzone-min.js"></script>
<link href="https://unpkg.com/dropzone@6.0.0-beta.1/dist/dropzone.css" rel="stylesheet" type="text/css" />

Podemos poner esas 2 lineas en nuestro documento HTML para que se agregue la libreria Dropzone.js desde internet o tambien podemos tomar esas URLs para descargar los archivos y despues agregarlos de manera local.

Implementar Dropzone.js

En el BODY de nuestro HTML vamos a crear un formulario y dentro del formulario debe ir un elemento file.

<form class="dropzone" id="mydropzone" method="post" enctype="multipart/form-data">
      	
<input type="file" name="file" />

</form>

Para activar el plugin dropzone vamos a agregar el siguiente script.

<script type="text/javascript">
	myDropzone = new Dropzone("#mydropzone", { url: "./upload.php"});
</script>

Aqui invocamos a un archivo PHP llamado upload.php que va a servir para subir el archivo.

Subir imagenes y archivos al servidor con PHP

Para subir los archivos de manera facil y rapido vamos a usar el siguiente script upload.php.

<?php
   if (file_exists($_FILES["file"]["name"])){
      echo "<h3>Archivo Existe</h3>";
   } else {
      move_uploaded_file($_FILES["file"]["tmp_name"], $_FILES["file"]["name"]);
      echo "<h3>Subido exitosamente.</h3>";
   }
?>

Y listo con todo esto ya puede funcionar nuestro ejemplo.

Resultado

Puntos Clave

1. Carga Asíncrona (AJAX): Dropzone no recarga la página. Envía cada archivo de forma independiente, lo que permite subir múltiples documentos simultáneamente sin interrumpir la navegación del usuario.
2. Manejo de Errores: En el script PHP, hemos añadido encabezados HTTP/1.1. Esto permite que Dropzone detecte automáticamente si la subida falló y muestre una alerta visual (X roja) al usuario.
3. Seguridad: Recuerda siempre validar el tipo de archivo en el servidor y no solo en el cliente, para evitar la subida de scripts maliciosos.

Conclusión

Integrar Dropzone.js eleva la calidad percibida de tus sistemas. Es una solución ideal para módulos de gestión documental en proyectos como SysFiles, donde la agilidad para organizar archivos es la prioridad número uno.