Subir archivos con arrastrar y soltar con vista previa jonathanmelgoza

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.

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 en “Subir archivos con arrastrar y soltar con vista previa”

  1. Hola Jonathan, me parece muy generoso de tu parte que nos brindes tus conocimientos sobre este tema.
    En lo particular me ayudo en gran manera a un proyecto que tengo en puerta.
    Mi duda es la siguiente…

    Copio todo el código que proporcionaste en la pagina, pero le inconveniente es que en mi aplicación web no aparecen los dos botones (descargar, eliminar), ¿como parte del código puedo verificarlo?

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

    Responder
  3. ¿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?

    Responder
  4. 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?

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

    Responder

Deja un comentario