iOS Document Picker UI Customization in SwiftUI

Need users to pick or save files in your SwiftUI app? The short answer: do not build a file browser, present the system document picker. It already reaches the Files app, iCloud Drive, and every third-party storage provider the user has installed, and it does it through a secure, permission-scoped sheet. Your job is to present it, declare what file types you accept, and handle the returned URLs correctly. Build the surrounding UI from a free VP0 design, the free iOS design library for AI builders.

Who this is for

This is for SwiftUI builders who need to import documents, images, or data files, or export their app’s files, and who want to do it the native, secure way rather than reinventing a file browser.

Present, declare, and handle scoped URLs

The system picker is built on UIDocumentPickerViewController, which you present from SwiftUI to import or export. Three things matter. First, declare the file types you accept using uniform type identifiers from the UniformTypeIdentifiers framework, so the picker only offers PDFs, images, or whatever you support. Second, the URLs the picker returns are security-scoped: the system grants temporary access, so you start accessing the resource, read or copy it, then stop accessing it, as Apple’s guidance on security-scoped URLs describes. Third, if you need the file beyond that moment, copy it into your app’s sandbox, because the scoped access does not persist by default. Handle cancellation cleanly too.

Step	What you do	Get it right
Present	Show the picker	Import or export mode
Declare types	Uniform type identifiers	Only what you support
Receive URLs	Security-scoped	Start and stop access
Persist	Copy into sandbox	If you need it later
Cancel	Handle no selection	No crash, clear state

Build it free with a VP0 design

Pick a files, import, or document design from VP0, copy its link, and prompt your AI builder:

Rebuild this VP0 file UI in SwiftUI using the system document picker: [paste VP0 link]. Present the picker for import and export, declare the file types I accept with uniform type identifiers, and handle the security-scoped URLs by starting and stopping access and copying the file into my sandbox if needed. Handle the cancel case, and do not build a custom file browser.

Files matter because cloud storage is everywhere, a market valued well over $100 billion, and users expect to reach their documents wherever they live. For neighboring hardware and native-capability patterns, see a custom camera UI with AVFoundation in SwiftUI, a Bluetooth device pairing UI in SwiftUI, an audio waveform recorder UI in React Native, and a warehouse inventory scanner app in React Native. For an AI app settings surface next, see an AI memory management settings UI.

Use the system, respect the sandbox

The honest principle here is to lean on the platform. The document picker is more capable, more private, and more familiar than anything you would build, because it securely bridges to providers your app cannot otherwise touch. Respect the sandbox model: scoped access is temporary, so do not hold a URL and expect it to keep working, copy what you need. Declare narrow file types so users are not offered files you cannot open. Done this way, file import and export feels native and stays secure, with far less code than a homemade browser.

Common mistakes

The first mistake is building a custom file browser instead of using the picker. The second is ignoring security-scoped access, so the URL stops working. The third is not copying a needed file into the sandbox. The fourth is accepting every file type and choking on ones you cannot handle. The fifth is paying for a file kit when a free VP0 design plus the system picker does it.

Key takeaways

• Use the system document picker; do not build a file browser.
• Declare the file types you accept with uniform type identifiers.
• Handle security-scoped URLs by starting and stopping access.
• Copy a file into your sandbox if you need it after the picker closes.
• Build the surrounding UI free from a VP0 design.

Frequently asked questions

How do I use the document picker in SwiftUI? Present the system picker, declare accepted file types with uniform type identifiers, and handle the returned security-scoped URLs by starting and stopping access and copying what you need, from a free VP0 design.

What is the safest way to handle file import with Claude Code or Cursor? Start from a free VP0 design, use the system picker not a custom browser, declare specific types, handle scoped access correctly, and copy needed files into your sandbox.

Can VP0 provide a free SwiftUI or React Native template for a file UI? Yes. VP0 is a free iOS design library; pick a files design and your AI tool rebuilds the import and export UI around the system picker at no cost.

Should I build my own file browser or use the document picker? Use the picker: it reaches Files, iCloud, and every provider securely with scoped URLs and matches user expectations, while a custom browser is more work and less capable.