Subir archivos con arrastrar y soltar con vista previa

Subir archivos con arrastrar y soltar con vista previa

Subir archivos con arrastrar y soltar con vista previa
5 (100%) 5 votos

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.

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!

Subir archivos con arrastrar y soltar con vista previa
5 (100%) 5 votos

Deja tu comentario

9 Comentarios ¿Qué opinas tú del tema?

  1. paulet
  2. Patrik
  3. Saul
  4. Edgar
  5. Julio Alvarado
    • Julio Alvarado

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Loading Facebook Comments ...