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.


Suscríbete a nuestra lista de correo y recíbe los últimos contenidos directamente en tu bandeja de correo electrónico, puedes elegir únicamente de que categoria del blog quieres recibir contenido.

Suscríbeme

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

10 Comentarios ¿Qué opinas tú del tema?

  1. smith
  2. paulet
  3. Patrik
  4. Saul
  5. Edgar
  6. 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 ...