Drag & Drop de ficheros


([N4] eic) #1

Muy buenas.

En nuestras aplicaciones, ya es habitual subir ficheros adjuntos (ficheros PDF, fotos, etc.) para almacenar junto con las fichas de clientes, facturas, etc. Y, por supuesto, lo más simple es incluir un botón para seleccionar fichero (o carpeta). Pero, cara al usuario, también sería interesante que pudiera hacer “drag & drop” desde el escritorio o desde una carpeta a una “zona” de un formulario, que recibiría esos archivos. Se me ocurre que, quizá, sea posible con un control HTML convenientemente programado con Javascript o similar.

¿Alguien tiene resuelto o enfocado este tema y desea compartirlo?


([N1] vgegeo) #2

Hola Fran,

-Si lo que quieres es implementar una web en JavaScript dentro del HTML, hay varios componentes JavaScript para tal efecto, aunque te dire, que en el control HTML de Velneo, no termina de funcionar correctamente todo el JavaScript web.
Al menos, me he encontrado hasta la v7.16 que algunos componentes o plugins js de alguna web, no funcionan correctamente, mientras en un navegador comun, lo hace sin problema.

Por ejemplo: Dropzonejs.com

Creo recordar que vi otro tambien basado en el framework Bootstrap, pero ahora no recuerdo el nombre… si lo recuerdo o lo encuentro te lo indico aqui. Este que te comento, permitia varios ficheros, ademas de ver una barra de progreso y mientras subian y un check de cada fichero una vez subido, pero no termino de recordar el plugin.

Evidentemente, en este caso, hablo de una programacion web paralela a Velneo, simplemente que la llamas desde el control HTML.

-Si te refieres a implementar algo con JavaScript de Velneo, no tengo ni idea.


([N3] pacosatu) #3

Hola Fran.

Interesante petición.
Yo he probado el código HTML5 del tutorial http://www.html5rocks.com/es/tutorials/file/dndfiles/ y parece que funciona bien en el Webkit de Velneo.

Solo faltaría adaptarlo a nuestro entorno. A ver quién se anima.

Por otro lado, el Visor HTML directamente acepta el drag and drop desde una carpeta del sistema, mostrando aquellos ficheros para los que tenga plugin. Además el evento “Url changed” se dispara con cada drag and drop, por lo tanto podemos detectar desde un Manejador cuando el Usuario arrastra un ficheo al Visor. El path completo del fichero arrastrado lo tendremos en la URL del Visor.
Es un comienzo y con esto quizás nos evitamos pelear con JavaScript y HTML5.

Saludos
Paco Satué


([N4] julian) #4

Si arrastras un fichero a un campo de texto, el campo captura la ruta del fichero, teniendo esta ruta ya se puede operar con el fichero.

No es lo más elegante, pero es muy sencillo.

Saludos.
Julián.


([N4] eic) #5

Muchas gracias por vuestra ayuda. Os contaré cómo va todo.


([N1] wikan) #6

Buenos días, yo tuve que desarrollar algo parecido para adjuntar fotos a expedientes y el problema que encontré es que el navegador integrado abre el fichero, por lo que el sistema de upload en javascript que tenía se fue al traste.

Es posible que no de manera elegante, la solución de Paco te venga bien, operando con el evento “url changed”

Yo lo solucione un poco más enrevesado pero era lo que necesitaba.

  • Monte un servidor web en node
  • Desde Velneo lanzo el navegador web con la url que necesito con el nº de expediente como variable
  • Sirve el sistema html+javascript
  • Node recibe los ficheros y los guarda en sus ruta de expediente y su vez por tcp le digo a Velneo que se han añadido x ficheros para generar un registro por cada fichero asignado al expediente.

Es un montaje con varios puntos pero para subir varias imágenes juntas me viene de lujo.


([N4] eic) #7

Gracias, Manuel. Tiene pinta de ser un muy buen trabajo. Ya contaré cómo me fue.