Abrir con showDirectoryPicker modificado

Descubre cómo funciona showDirectoryPicker con la File System Access API: no se abre por ruta; usa startIn con un handle previo y permisos, y opciones seguras para web

18 sept 2025 • 3 min de lectura • Equipo Q2BSTUDIO

Inteligencia-Artificial-

Resumen breve sobre el comportamiento de showDirectoryPicker y lo que puedes hacer

Por defecto la API File System Access abre un cuadro de diálogo cuando llamas a showDirectoryPicker lo que obliga la interacción del usuario. No existe un parámetro que acepte una ruta tipo C:/Users/Me/Documents en formato cadena para abrir directamente esa carpeta desde JavaScript puro en el navegador.

¿Se puede abrir una carpeta específica programáticamente con showDirectoryPicker? La respuesta práctica es no mediante una ruta de texto. La API sí soporta una opción llamada startIn que puede recibir un handle de directorio previamente obtenido o nombres de directorio conocidos como desktop o documents. Eso permite que el diálogo se abra ubicado en ese directorio si previamente obtuviste y almacenaste un FileSystemDirectoryHandle con permiso del usuario. Pero no puedes pasar una ruta de sistema de ficheros como C colon barra y esperar que el navegador la abra por seguridad y por restricciones de la API.

¿Se puede preseleccionar o autoabrir una carpeta si ya se han concedido permisos? Puedes mejorar la experiencia guardando el handle obtenido tras la primera concesión de permiso en IndexedDB y luego llamar a showDirectoryPicker con startIn apuntando a ese handle. En navegadores que implementan bien la opción startIn el diálogo se abrirá en esa ubicación y el usuario solo tendrá que confirmar. No existe una forma estándar de omitir por completo la interfaz de selección del sistema y seleccionar silenciosamente un directorio sin interacción del usuario dentro de una página web por motivos de seguridad.

Alternativas y soluciones prácticas

span Guardar el handle en IndexedDB y reutilizarlo: tras la primera selección guarda el FileSystemDirectoryHandle usando structuredClone o IndexedDB y más tarde pásalo a showDirectoryPicker startIn para abrir el diálogo en esa carpeta. span Aunque esto reduce fricción no garantiza que el usuario no tenga que confirmar nuevamente dependiendo del navegador y de si los permisos todavía son válidos.

span Usar una aplicación nativa o entorno con privilegios: si necesitas acceso sin pedir confirmación recurrente considera crear una app de escritorio con Electron o un servicio backend que gestione ficheros, donde sí puedes trabajar con rutas completas y permisos definidos por la instalación. span Otra opción es usar input type file con webkitdirectory para permitir selección de carpetas pero tampoco permite abrir en una ruta concreta sin la intervención del usuario.

Razón de seguridad

Los navegadores requieren interacción del usuario para evitar que páginas web obtengan acceso a partes arbitrarias del sistema de ficheros. Por eso no existe un método seguro y estándar para pasar una ruta de texto y que la página acceda automáticamente a esa carpeta.

Cómo implementarlo de forma práctica resumen de pasos

span 1 Guardar el handle después de la primera selección usando IndexedDB. span 2 Al volver a necesitar acceso recuperar el handle y llamar a showDirectoryPicker con la opción startIn usando ese handle. span 3 Siempre gestionar permisos comprobando queryPermission y requestPermission en el handle para ofrecer una experiencia correcta si el permiso caduca o es revocado.

Si necesitas una solución profesional y segura para integrar acceso a ficheros dentro de una aplicación a medida o desarrollar una aplicación multiplataforma que maneje permisos y rutas de forma controlada en entornos productivos, en Q2BSTUDIO somos especialistas en desarrollo de software a medida, aplicaciones a medida y en integrar tecnologías como inteligencia artificial y ciberseguridad para entornos empresariales. Con nuestro enfoque puedes combinar una interfaz web segura con componentes nativos cuando haga falta. Conoce nuestros servicios de desarrollo de aplicaciones desde esta página desarrollo de aplicaciones y software a medida y aprovecha experiencia en servicios cloud aws y azure, inteligencia artificial, servicios inteligencia de negocio, ia para empresas, agentes IA, power bi y ciberseguridad para diseñar la mejor solución para tu caso.

Si quieres que revisemos tu caso concreto o te ayudemos a diseñar una arquitectura que aproveche la API File System Access donde sea viable contáctanos y te asesoramos sobre la mejor alternativa entre web, híbrido o nativo.

¿UNA PAUSA?

Juega un momento antes de irte

NUESTROS SERVICIOS

Cómo podemos ayudarte

Inteligencia artificial

Agentes de IA, chatbots y asistentes inteligentes que automatizan tareas y atienden a tus clientes 24/7 para mejorar la eficiencia de tu negocio.

Más info

Desarrollo de software

Aplicaciones web, móviles y de escritorio, intranets, e-commerce, SaaS y plataformas de gestión diseñadas para las necesidades concretas de tu empresa.

Más info

Servicios cloud

Migración, infraestructura, hosting gestionado, alta disponibilidad y seguridad en Microsoft Azure y Amazon Web Services para que tu negocio escale sin límites.

Más info

Ciberseguridad y pentesting

Auditorías de seguridad, test de intrusión (pentesting) y protección de aplicaciones, datos e infraestructura on-premise y cloud, con hacking ético y cumplimiento normativo.

Más info

Business Intelligence

Cuadros de mando y análisis de datos con Power BI: integramos tus fuentes, diseñamos dashboards y KPIs y convertimos tus datos en decisiones.

Más info

Automatización de procesos

Automatizamos tareas repetitivas y conectamos tus aplicaciones con n8n, Power Automate, Make y RPA, eliminando trabajo manual y aumentando la productividad.

Más info

Formación para empresas

Formamos a tus equipos en tecnología con criterio: desarrollo web, bases de datos, Git, buenas prácticas y seguridad, automatización con n8n, inteligencia artificial para empresas y creación de soluciones de IA con Azure AI Foundry.

Más info

Auditoría de código

Auditamos el código que creas tú, tu equipo o una IA: te decimos qué está bien y qué mejorar, lo securizamos y lo dejamos listo para producción, web o app.

Más info

Generación de imágenes con IA

Creamos por ti las imágenes que necesita tu negocio con inteligencia artificial: producto, redes, publicidad, ilustración y avatares. Tú nos dices qué quieres y te lo entregamos listo para usar.

Más info

Generación de vídeos con IA

Creamos por ti vídeos con inteligencia artificial: promocionales, para redes, presentadores virtuales, doblaje y animaciones. Nos cuentas la idea y te lo entregamos montado y listo para publicar.

Más info

Avatares conversacionales con IA

Creamos avatares conversacionales con IA —humanos digitales con cara y voz— que atienden a tus clientes y equipos con el conocimiento de tu empresa, en tu web, monitores interactivos, WhatsApp o Teams.

Más info

Marketing Online e IA

Google Ads, Meta Ads, LinkedIn Ads y posicionamiento en motores de IA (GEO/AEO): captamos clientes y hacemos que tu marca aparezca donde te buscan, también en ChatGPT, Gemini y Perplexity.

Más info

¿Tienes un proyecto en mente?

Cuéntanos tu visión y la convertimos en una solución de software. Sea cual sea el alcance, hacemos realidad tu idea.

Live Chat