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 read • Q2BSTUDIO Team

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.

A BREAK?

Play for a moment before you go

OUR SERVICES

How we can help you

Artificial intelligence

AI agents, chatbots, and intelligent assistants that automate tasks and serve your customers 24/7 to improve the efficiency of your business.

More info

Software Development

Web, mobile, and desktop applications, intranets, e-commerce, SaaS, and management platforms designed for your company's specific needs.

More info

Cloud services

Migration, infrastructure, managed hosting, high availability, and security on Microsoft Azure and Amazon Web Services to help your business scale without limits.

More info

Cybersecurity and pentesting

Security audits, penetration testing and protection of applications, data and infrastructure on-premise and cloud, with ethical hacking and regulatory compliance.

More info

Business Intelligence

Dashboards and data analysis with Power BI: we integrate your sources, design dashboards and KPIs and turn your data into decisions.

More info

Process automation

We automate repetitive tasks and connect your applications with n8n, Power Automate, Make, and RPA, eliminating manual work and increasing productivity.

More info

Training for Companies

We train your teams in technology with criteria: web development, databases, Git, best practices and security, automation with n8n, artificial intelligence for companies and creation of AI solutions with Azure AI Foundry.

More info

Code Auditing

We audit the code that you, your team or an AI create: we tell you what is good and what to improve, we secure it and make it ready for production, web or app.

More info

AI Image Generation

We create for you the images that your business needs with artificial intelligence: product, networks, advertising, illustration and avatars. You tell us what you want and we deliver it ready to use.

More info

AI Video Generation

We create videos with artificial intelligence for you: promotional, networking, virtual presenters, dubbing and animations. You tell us the idea and we will deliver it assembled and ready to publish.

More info

AI Conversational Avatars

We create conversational avatars with AI – digital humans with a face and voice – that serve your customers and teams with the knowledge of your company, on your website, interactive monitors, WhatsApp or Teams.

More info

Online Marketing and AI

Google Ads, Meta Ads, LinkedIn Ads and AI Engine Positioning (GEO/AEO): we attract customers and make your brand appear where they search for you, also on ChatGPT, Gemini and Perplexity.

More info

Do you have a project in mind?

Tell us your vision and we'll turn it into a software solution. Whatever the scope, we make your idea real.

Live Chat