Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 49 additions & 15 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,47 @@ A React Native wrapper for:
- Android's `Intent.ACTION_GET_CONTENT`
- Windows `Windows.Storage.Pickers`

<table>
<tr><td><strong>iOS</strong></td><td><strong>Android</strong></td></tr>
<tr>
<td><p align="center"><img src="/docs/ios_screenshot.jpeg" height="500"></p></td>
<td><p align="center"><img src="/docs/android_screenshot.jpg" height="500"></p></td>
</tr>
</table>

Requires RN >= 0.63, Android 5.0+ and iOS 11+

# Table of Contents

- [react-native-document-picker](#react-native-document-picker)
- [Installation](#installation)
- [RN &gt;= 0.63](#rn--063)
- [API](#api)
- [DocumentPicker.pickMultiple(options) / DocumentPicker.pickSingle(options) / DocumentPicker.pick(options)](#documentpickerpickmultipleoptions--documentpickerpicksingleoptions--documentpickerpickoptions)
- [[Android and Windows only] DocumentPicker.pickDirectory()](#android-and-windows-only-documentpickerpickdirectory)
- [DocumentPicker.pick(options) and DocumentPicker.pickMultiple(options)](#documentpickerpickoptions-and-documentpickerpickmultipleoptions)
- [Options](#options)
- [allowMultiSelection:boolean](#allowmultiselectionboolean)
- [type:string|Array&lt;string&gt;](#typestringarraystring)
- [[iOS only] presentationStyle:'fullScreen' | 'pageSheet' | 'formSheet' | 'overFullScreen'](#ios-only-presentationstylefullscreen--pagesheet--formsheet--overfullscreen)
- [[iOS only] mode:"import" | "open"](#ios-only-modeimport--open)
- [[iOS and Android only] copyTo:"cachesDirectory" | "documentDirectory"](#ios-and-android-only-copytocachesdirectory--documentdirectory)
- [[Windows only] readContent:boolean](#windows-only-readcontentboolean)
- [Result](#result)
- [uri](#uri)
- [fileCopyUri](#filecopyuri)
- [type](#type)
- [name](#name)
- [size](#size)
- [[Windows only] content](#windows-only-content)
- [DocumentPicker.types.\*](#documentpickertypes)
- [DocumentPicker.isCancel(err)](#documentpickeriscancelerr)
- [DocumentPicker.isInProgress(err)](#documentpickerisinprogresserr)
- [[iOS only] DocumentPicker.releaseSecureAccess(uris: Array&lt;string&gt;)](#ios-only-documentpickerreleasesecureaccessuris-arraystring)
- [Example](#example)
- [How to upload picked files?](#how-to-upload-picked-files)
- [Help wanted: Improvements](#help-wanted-improvements)

### Installation

```bash
Expand Down Expand Up @@ -51,11 +90,11 @@ Open a system directory picker. Returns a promise that resolves to (`{ uri: stri

All of the options are optional

##### `allowMultiSelection`:`boolean`:
##### `allowMultiSelection`:`boolean`

Whether or not selecting multiple files is allowed. For `pick`, this is `false` by default. `allowMultiSelection` is `false` for `pickSingle` and `true` for `pickMultiple` and cannot be overridden for those calls.

##### `type`:`string|Array<string>`:
##### `type`:`string|Array<string>`

The type or types of documents to allow selection of. May be an array of types as single type string.

Expand All @@ -67,11 +106,11 @@ The type or types of documents to allow selection of. May be an array of types a

Controls how the picker is presented, eg. on an iPad you may want to present it fullscreen. Defaults to `pageSheet`.

##### [iOS only] `mode`:`"import" | "open"`:
##### [iOS only] `mode`:`"import" | "open"`

Defaults to `import`. If `mode` is set to `import` the document picker imports the file from outside to inside the sandbox, otherwise if `mode` is set to `open` the document picker opens the file right in place.

##### [iOS and Android only] `copyTo`:`"cachesDirectory" | "documentDirectory"`:
##### [iOS and Android only] `copyTo`:`"cachesDirectory" | "documentDirectory"`

If specified, the picked file is copied to `NSCachesDirectory` / `NSDocumentDirectory` (iOS) or `getCacheDir` / `getFilesDir` (Android). The uri of the copy will be available in result's `fileCopyUri`. If copying the file fails (eg. due to lack of space), `fileCopyUri` will be the same as `uri`, and more details about the error will be available in `copyError` field in the result.

Expand All @@ -98,27 +137,27 @@ Defaults to `false`. If `readContent` is set to true the content of the picked f

The `pick` Promise resolves to an array of objects with the following keys.

##### `uri`:
##### `uri`

The URI representing the document picked by the user. _On iOS this will be a `file://` URI for a temporary file in your app's container if `mode` is not specified or set at `import` otherwise it will be the original `file://` URI. On Android this will be a `content://` URI for a document provided by a DocumentProvider that must be accessed with a ContentResolver._

##### `fileCopyUri`:
##### `fileCopyUri`

Same as `uri`, but has special meaning if `copyTo` option is specified.

##### `type`:
##### `type`

The MIME type of the file. _On Android some DocumentProviders may not provide MIME types for their documents. On iOS this MIME type is based on the best MIME type for the file extension according to Apple's internal "Uniform Type Identifiers" database._

##### `name`:
##### `name`

The display name of the file. _This is normally the filename of the file, but Android does not guarantee that this will be a filename from all DocumentProviders._

##### `size`:
##### `size`

The file size of the document. _On Android some DocumentProviders may not provide this information for a document._

##### [Windows only] `content`:
##### [Windows only] `content`

The base64 encoded content of the picked file if the option `readContent` was set to `true`.

Expand Down Expand Up @@ -203,18 +242,13 @@ try {
}
```

## Here is how it looks:

<img src="./docs/screenshot.jpeg" height="400">

## How to upload picked files?

Use blob support that is built into react native - [see comment](https://github.com/rnmods/react-native-document-picker/issues/70#issuecomment-384335402).
If you need to track upload progress, use `XMLHttpRequest` [see here](https://gist.github.com/Tamal/9231005f0c62e1a3f23f60dc2f46ae35)

Alternatively, use [https://github.com/johanneslumpe/react-native-fs](https://github.com/johanneslumpe/react-native-fs)


## Help wanted: Improvements

- Fix Xcode warning about constraints
Expand Down
Binary file added docs/android_screenshot.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
File renamed without changes