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.


¿Sabías que?

¿Necesitas hospedaje web? DigitalServer te ofrece un 50% de descuento en cualquier plan de hosting a partir del plan Micro! Solo copia el cupon: PROMOEXH y sigue el siguiente enlace:

Obtener 50% de descuento

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

12
Dejar un comentario

avatar
8 Comment threads
4 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
9 Comment authors
EduardoMarcossmithpauletJonathan Melgoza Recent comment authors
  Subscribe  
Notify of
Eduardo
Guest
Eduardo

Hola, super gracias, el unico problema que veo es que cuando refresco la pagina nuevamente los iconos desaparecen quedando el archivo sin backaground

Marcos
Guest
Marcos

¿Donde debo recoger el evento para que muestre un “alert();” cuando se haya subido el archivo? El evento supongo que será el success. Donde habría que poner el código y como quedaría?

smith
Guest
smith

Hola amigo noo entendi en la parte que dice:
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.

donde se debe agregar eso?

paulet
Guest
paulet

no encuentro las imagenes

Patrik
Guest
Patrik

Muito obrigado! Sou brasileiro e estava com dificuldades para implementar a opção de excluir os arquivos subidos! Obrigado por compartilhar!

Saul
Guest
Saul

En donde se colocan las imagenes .png de excel o zip? para que las muestre

Edgar
Guest
Edgar

Varian el codigo dependiendo de la versión del dropzone

Julio Alvarado
Guest
Julio Alvarado

Gracias lo voy a probar

Julio Alvarado
Guest
Julio Alvarado

disculpa amigo, pero no me sale nada en el primer código ( el del diseño )