1

Mi equipo y yo estamos tratando de hacer una aplicación web y una de sus funciones es subir archivos al servidor y descargarlos desde el cliente como los archivos se van a almacenar en un servidor aparte del de la aplicación, ocupamos usar rutas estáticas para poder acceder a los archivos, la cosa es la siguiente:

He tratado abrir el archivo de esta manera

<a href="file//C:\..\..\..\file.pdf">pdf</a>

JavaScript y otro, pero no logro que se cargue el archivo en la pagina o abrirlo, esto debido a que Chrome y demás tienen un protocolo de seguridad.

Quiero saber si existe alguna manera de que usando una URL estática se pueda cargar el archivo en la pagina web o que se pueda abrir en otra, lo que importa es que lo abra usando un URL ajeno al proyecto, existente en la PC.

2 respuestas 2

2

Primero que todo... no debes usar este tipo de rutas:

<a href="file//C:\..\..\..\file.pdf">pdf</a>

Por las siguientes razones:

  • La ruta no es independiente de las rutas del SO (sistema operativo), los usuarios de linux fallaran al encontrar el archivo.

  • La ruta no es independiente del lenguaje del SO, un SO configurado en ingles no tendra la carpeta de descargas con el mismo nombre que un SO en español y en linux o mac la ruta sera diferente.

  • Un protocolo de ruta file://C:// puede generar problemas de seguridad en el navegador que hace que el propio navegador bloquee la apertura de este archivo en el sistema, ya que javascript por motivos de seguridad no posee acceso al sistema de archivos del sistema operativo.

Como podría o deberia abrir este archivo local entonces?

Solucion: NO PUEDES!

El navegador no te va a permitir acceder al sistema de archivos del SO por razones de seguridad, ya que de por si javascript no tiene acceso a el, por lo que desde javascript no podras realizar el procedimiento que necesitas.

Y si bien hay opciones como usar por ejemplo los atributos download y target = "_blank" creo que no es lo que deseas, pues he probado a usarlos y en conjunto no me han funcionado, especificamente los he probado es en firefox no se si en chrome funcione bien.

Ademas no hay forma de saber siempre la ruta exacta del archivo en el sistema local, ya que repito:

Javascript no tiene acceso al sistema de rutas del SO por lo tanto la opcion de obtener la ruta en la que se encuentra el archivo de manera dinamica queda descartada totalmente, pues aunque puedes inspeccionar una miserable parte de las rutas convirtiendo el archivo a un tipo File la ruta mostrada nunca sera la completa ni la real.

Es decir, el usuario podria tener el archivo en su carpeta de downloads o en su carpeta de descargas que practicamente NUNCA coincidira con tu ruta del sistema, o en alguna otra carpeta, y casi nunca coincidira debido a que la mayor parte de las rutas predeterminadas del sistema como:

  • documentos
  • videos
  • descargas
  • imagenes

Siempre van ligadas con el nombre de usuario del sistema operativo, el cual por cierto es imposible que algun navegador te permita saberlo.

Y si bien entonces te estaras preguntando por ejemplo:

Entonces porque he visto que en "X" pagina abren el archivo nada mas se descarga?

Es porque enrealidad NO estan abriendo un archivo local es decir, no estan abriendo el archivo original que tienes en tu PC, en su lugar puede que esten usando diferentes opciones para hacerlo:

  • La mas normal, es que simplemente abren directamente el archivo alojado en el servidor en el href usando la ruta del archivo en el servidor en vez de usar el archivo local, y de una vez te descargan el archivo, por lo tanto lo que abren no es tu archivo, si no el del servidor.

  • Utilizan una sandbox del navegador para poder usar window.requestFileSystem que en todo caso no creo que tampoco es algo que desees exactamente...

  • Crean una URL especial con los datos la cual ya sea te descarga el archivo o te lo abre, pero no ambas a la vez, por lo tanto pueden estar usando una mezcla de ambas, el <a> para descargar y la URL para visualizar o viceversa, el problema de esta solucion esta en que se hace una doble carga de archivos y ademas se usa memoria del navegador para hacerlo, ademas generas basura que luego deberias procurar eliminar cuando ya no la estes usando, aparte el archivo descargado NO es el mismo archivo que abre el navegador.

  • La URL, SO utilizado y nombre de usuario del sistema coincidio de manera exacta con la ruta por defecto de descargas del navegador, forma en la cual es posible que esto funcione:

    <a href="file//C:\..\..\..\file.pdf">pdf</a>

    pero como dije previamente no es para nada recomendable, puesto que a no ser de que se cumplan esas absurdamente dificiles condiciones no va a servir en practicamente ningun lado.

Notas adicionales:

Encontré hace poco esta información que puede resultarte importante:

downloads.open()

Pero estuve observando y en una parte del documento dice:

To use this function in your extension...

Lo cual me hace pensar que enrealidad solo puedes usarlo con extensiones creadas por ti, no se si funcione ya que no lo he probado, pero esta es toda la información que conozco hasta el momento para responder tu pregunta.

Que deberias hacer entonces?

  • Podrias simplemente apuntar a la URL donde esta alojado tu archivo en el servidor, por ejemplo:

    <a href = "http://localhost/pruebaPDF/miPDF.pdf" target = "_blank" download>

    ya que a fin de cuentas si tu estas dejando que los usuarios descarguen tu PDF entonces para que cubrir el acceso a este?, quiza usar un hash en la URL exacta pero con el cual se pueda acceder igualmente de manera directa.

    De todas maneras este metodo si bien no te abrira el archivo que tiene el usuario en su PC te permitira vizualizar en una pagina aparte el documento aunque no sea el mismo, en caso de que como a mi no te funcionen ambos atributos target = "_blank" y download al mismo tiempo puedes utilizar un listener que haga que al hacerle click a la url se descargue el archivo con el metodo download(), ya que por default el atributo target la mayoria de veces funciona.

  • Utilizar window.createObjectURL y window.revokeObjectURL con el fin de utilizar una URL especial, la cual tampoco permitira que abras el archivo original, pero si una copia la cual tendra una URL unica hasheada creada con los recursos del navegador, URL la cual solo podra acceder solo la persona en ese navegador en especifico donde se creo.

    Es importante tener en cuenta que la URL se destruye justo apenas se cargue y los recursos con ella se van tambien a menos de que sus datos esten siendo usados por algun elemento HTML, por este motivo apenas se cree la URL y mientras se esten cargando los datos se debe abrir la ventana pues en caso de hacerlo demasiado tardio la URL ya no existira y el recurso sera inaccesible, ningun humano tiene la capacidad de abrir esa URL tan rapido, ya que el recurso puede descartarse en milisegundos, asi que la mejor forma seria que usaras JS para abrir esa URL de lo contrario jamas te dara tiempo.

La opcion de la sandbox quedaria descartada, puesto que una sandbox en el navegador es un espacio de memoria alojado en el navegador el cual solo es entendible y accesible por el navegador, es decir, no tendrias el archivo en tu PC si no dentro de tu navegador sin posibilidad de sacarlo de ahi.

5
  • lo que pasa es que por ahora lo pruebo asi en mi PC pero al final, el programa debe usar una ruta estatica porque este correra en un servidor de una empresa, en otro estara la base de datos y en un tercero se piensa almacenar los archivos (como soy estudiante y estoy en practica, no se si es posible hacer esto) Commented el 2 abr. 2021 a las 20:07
  • @josebarrantes welcome to the jungle!, yo tambien soy pasante :D Hmmmm... creo que tu duda se basa mas bien en si con tu cliente puedes acceder a los archivos de otro servidor en donde no esta la APP, no te puedo afirmar que puedas, ya que esto depende de que vayan a usar como servidor para los archivos, por ejemplo si usan un hosting normal lo mas seguro es que tengas acceso, pero si se trata de por ejemplo firebase o cosas asi deberas configurar tu acceso a los archvos ya que por defecto no estaran disponible a nadie.
    – Layer
    Commented el 2 abr. 2021 a las 20:20
  • Te iba a recomendar un servidor local de pruebas llamado xampp pero realmente seria absurdo pensar que si funciona en el servidor local funcionaria tambien en el otro servidor, ya que a fin de cuentas esto dependera del servidor y sus politicas de seguridad o configuraciones, por este motivo no te puedo afirmar nada, que por cierto... y porque tener 3 servidores?, siento que con un servidor basta y sobra, pues enrealidad los hostings estan hechos para tener alojamiento, BD y alojar la pagina, si bien es mas seguro tener 3 servidores tambien sera mucho mas costoso contratar por aparte.
    – Layer
    Commented el 2 abr. 2021 a las 20:25
  • Para poder ayudarte mas tendriamos que saber que servicio de alojamiento desean usar, por lo tanto tendrias que editar la pregunta e incluirlo, de lo contrario es imposible que te podamos afirmar que configuraciones habria que realizar o si tendrias acceso a tus archivos y si de por si funcionaria.
    – Layer
    Commented el 2 abr. 2021 a las 20:28
  • ok, en unos dias te averiguo bien y te digo (mas bien m,il gracias) Commented el 2 abr. 2021 a las 20:30
1

Por partes:

  1. Para que se puedan mostrar los ficheros tienen que estar en un directorio que pueda ser accesible desde una url, esto es, el ordenador tiene que estar actuando de servidor.

  2. Para subir los ficheros no hace falta mostrarlos. HTML proporciona un control para seleccionar ficheros e iniciar el proceso de carga:

<form action='el-script-que-se-encarga-de-subir-el-fichero'>
    <input type="file" name="archivo_a_subir">
    <button type="submit">Subir fichero</button>
</form>

Es el backend el que se encarga de gestionar la ubicación del fichero en el servidor.

Si el servidor que va a almacenar los ficheros no es el que gestiona la aplicación en sí, tendrás que consultar la documentación de cómo enviar ficheros mediante la API correspondiente.

7
  • la idea de subir el archivo si la tengo, lo que necesito es que la aplicacion abra un archivo desde la pc que sirva de servidor y lo mande al cliente, ya sea por descarga o lo muestre, pero si ocupo accesarlo a una ruta fuera del proyecto, como si abriera una de la PC Commented el 2 abr. 2021 a las 17:56
  • @josebarrantes osea, en resumen, abrir el PDF descargado localmente en el PC de la persona, o no es eso exactamente lo que requieres?
    – Layer
    Commented el 2 abr. 2021 a las 18:04
  • @Riven tengo el archivo local (ejemplo, en la carpeta de documentos), la carpeta no esta en el proyecto, pero ocupo que el proyecto pueda cargar ese archivo desde la ruta externa ya sea en el servidor con java o en el cliente con jquery, Commented el 2 abr. 2021 a las 18:44
  • @josebarrentes parece entonces que estás describiendo el proceso habitual de cargar el fichero en un servidor y restringir el acceso a los usuarios autorizados. Es html quien te da el mecanismo de selección del fichero y el script que hagáis en java quien se encargará de ubicar el archivo apropiadamente.
    – Sokkian
    Commented el 3 abr. 2021 a las 7:13
  • @josebarrantes de hecho seria bueno que nos confirmaras esto que dijo Sokkian, es decir, necesitas que el archivo solo este disponible a ciertas personas apartir de por ej una contraseña o algo?, o por el contrario que este abierto al publico en el mismo dominio y subdominios autorizados de la pagina?
    – Layer
    Commented el 5 abr. 2021 a las 18:16

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.