Subir archivos con arrastrar y soltar con vista previa

Subir archivos con arrastrar y soltar con vista previa

El día de hoy vamos a ver como implementar la funcionalidad de subir archivos con arrastrar y soltar o drag and drop a un servidor y que ademas se obtenga una vista previa de la imagen o del tipo de archivo subido, todo esto mediante la librería DropZone.js. Ademas de todo esto, que ya es bastante :P, tendremos la funcionalidad de eliminar fácilmente los archivos subidos (ya que se listaran todos los archivos en el servidor) y modificaremos un poco el codigo de dropzone.js para tener también la opción de descargar dichos archivos, vamos pues que ya! 8)

Para comenzar vamos a ir a la web de dropzone.js para conocer mas en detalle la librería.

Los archivos necesarios serán el javascript de dropzone, el css de dropzone y para algunas funcionalidades jquery.

Vamos a necesitar primero crear la interfaz donde los usuarios podran arrastrar y soltar sus archivos para subir a una carpeta del servidor.


¿Sabías que?

¿Necesitas hosting wordpress? WebEmpresa te ofrece un servicio super rápido, excelente soporte en español y certificado SSL gratuito:

WebEmpresa

Este archivo contendrá lo siguiente,

El código viene bastante entendible, los puntos donde hay dudas o archivos pendientes es explican a continuación.

Omitiendo por ahora todo el código javascript que contiene lo anterior podemos ver que hay un formulario con un action que lleva a una pagina index.php en una carpeta file_upload, el archivo lo puedes descargar de aqui.

En el codigo principal también vemos que para eliminar un archivo del servidor se manda llamar a un archivo llamado eliminarArchivo.txt el cual es bastante simple y puedes descargar aqui.

Las modificaciones en el dropzone.js para agregar el botón de descargar son las siguientes,

busca la siguiente linea en tu archivo dropzone.js

el contenido de ese if{} debera ser el siguiente

 

Cualquier duda o comentario con gusto lo responderé en los comentarios.

Hasta luego!

Clic para valorar esta información
[Total: 0 Promedio: 0]

14 Comentarios

      Deja un comentario

      Tu comentario será aprobado por un administrador en unos minutos, por favor no publiques de nuevo tu comentario.