# iOS Document Picker UI Customization in SwiftUI

> By Lawrence Arya, Founder & CEO of VP0. Published 2026-05-31, updated 2026-06-02. 4 min read.
> Source: https://vp0.com/blogs/ios-document-picker-ui-customization-swiftui

Do not build a file browser. The system document picker already reaches Files, iCloud, and every storage provider, and it does it securely. Your job is to use it well.

**TL;DR.** The iOS document picker lets users import and export files from Files, iCloud Drive, and third-party storage providers through one secure system sheet. In SwiftUI you present it, declare the file types you accept, and handle the returned URLs, which are security-scoped, so you start and stop access correctly and copy what you need. Do not build your own file browser, the picker is more capable and private. Build the surrounding UI from a free VP0 design and import or export cleanly.

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](https://developer.apple.com/documentation/uikit/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](https://developer.apple.com/documentation/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](https://developer.apple.com/documentation/foundation/nsurl) 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](https://www.grandviewresearch.com/), 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](/blogs/swiftui-avfoundation-custom-camera-ui/), [a Bluetooth device pairing UI in SwiftUI](/blogs/bluetooth-device-pairing-ui-swiftui/), [an audio waveform recorder UI in React Native](/blogs/audio-waveform-recorder-ui-react-native/), and [a warehouse inventory scanner app in React Native](/blogs/warehouse-inventory-scanner-app-react-native/). For an AI app settings surface next, see [an AI memory management settings UI](/blogs/ai-memory-management-settings-ui-ios/).

## 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.

## Frequently asked questions

### How do I use the document picker in SwiftUI?

Present the system document picker, declare the file types you accept using uniform type identifiers, and handle the URLs it returns. Those URLs are security-scoped, so start accessing the resource, read or copy what you need, then stop accessing it. Build the surrounding import and export UI 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 and use the system document picker rather than building a file browser. Declare specific file types, handle the security-scoped URLs correctly by starting and stopping access, copy the file into your sandbox if you need it later, and handle the cancel case.

### Can VP0 provide a free SwiftUI or React Native template for a file UI?

Yes. VP0 is a free iOS design library for AI builders. Pick a files, import, or document design, copy its link, 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 document picker. It already reaches Files, iCloud Drive, and every installed storage provider, handles permissions securely with scoped URLs, and matches what users expect. Building your own file browser is more work, less capable, and cannot securely access other providers, so reach for the system picker.

---
*Published on the [VP0 Journal](https://vp0.com/blogs). Free to read, index and cite with attribution.*