https://github.com/ourcodeworld/capacitor-native-filepicker
A native file picker implementation for CapacitorJS projects.
https://github.com/ourcodeworld/capacitor-native-filepicker
Last synced: about 1 month ago
JSON representation
A native file picker implementation for CapacitorJS projects.
- Host: GitHub
- URL: https://github.com/ourcodeworld/capacitor-native-filepicker
- Owner: ourcodeworld
- Created: 2021-07-24T17:15:58.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2021-12-25T23:14:25.000Z (over 3 years ago)
- Last Synced: 2025-03-25T20:15:24.189Z (about 2 months ago)
- Language: Java
- Size: 108 KB
- Stars: 3
- Watchers: 3
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
README
# capacitor-native-filepicker
In most of the cases, you don't need this picker. Implementing your own filepicker with the [File System API](https://capacitorjs.com/docs/apis/filesystem) of CapacitorJS is quite [easy and convenient](https://www.youtube.com/watch?v=WNte407ArQ0) as its design will be totally yours and matches your application UI. I developed this plugin because I wanted to use a more native approach in my application that allows users to pick some files or folders from the storage (as well as learning how to develop CapacitorJS plugins for both platforms).
For Android it uses under the hood the [AndroidFilePicker library by Rosuh](https://github.com/rosuH/AndroidFilePicker). For iOS, it uses the [UIDocumentPickerViewController](https://developer.apple.com/documentation/uikit/uidocumentpickerviewcontroller) view.
| | Android | iOS |
|---|---|---|
| FilePicker |  | |
| FolderPicker | | |
## Install
```bash
npm install https://github.com/ourcodeworld/capacitor-native-filepicker
npx cap sync
```
## How to use
```javascript
import { CapacitorNativeFilePicker } from "capacitor-native-filepicker";
// A. Select folders
let folders = await CapacitorNativeFilePicker.launchFolderPicker({
limit: -1,
showHiddenFiles: true
});
// Outputs: ["file://folder-path1", "file://folder-path2"]
console.log(folders);
// B. Select files
let files = await CapacitorNativeFilePicker.launchFilePicker({
// No limit of files to select
limit: -1,
showHiddenFiles: true,
allowedExtensions: ["jpg", "png", "gif"]
});
// Outputs: ["file://folder-path1/file.png", "file://folder-path2/file2.jpg"]
console.log(files);
```
## API
* [`echo(...)`](#echo)
* [`launchFilePicker(...)`](#launchfilepicker)
* [`launchFolderPicker(...)`](#launchfolderpicker)
* [`shareFile(...)`](#sharefile)
* [`getFileUrlForUri(...)`](#getfileurlforuri)
* [`createFile(...)`](#createfile)
* [`writeToFile(...)`](#writetofile)
### echo(...)
```typescript
echo(options: { value: string; }) => any
```
| Param | Type |
| ------------- | ------------------------------- |
| **`options`** | { value: string; } |
**Returns:** any
--------------------
### launchFilePicker(...)
```typescript
launchFilePicker(options: FilePickerOptions) => any
```
| Param | Type |
| ------------- | ------------------------------------------------------------------------------------ |
| **`options`** | { limit?: number; allowedExtensions?: any; showHiddenFiles?: boolean; } |
**Returns:** any
--------------------
### launchFolderPicker(...)
```typescript
launchFolderPicker(options: FolderPickerOptions) => any
```
| Param | Type |
| ------------- | ----------------------------------------------------------- |
| **`options`** | { limit?: number; showHiddenFiles?: boolean; } |
**Returns:** any
--------------------
### shareFile(...)
```typescript
shareFile(options: { filepath: string; }) => any
```
| Param | Type |
| ------------- | ---------------------------------- |
| **`options`** | { filepath: string; } |
**Returns:** any
--------------------
### getFileUrlForUri(...)
```typescript
getFileUrlForUri(options: { uri: string; }) => any
```
| Param | Type |
| ------------- | ----------------------------- |
| **`options`** | { uri: string; } |
**Returns:** any
--------------------
### createFile(...)
```typescript
createFile(options: CreateFileOptions) => any
```
| Param | Type |
| ------------- | ---------------------------------------------------------------------- |
| **`options`** | { directory: string; filename: string; content: string; } |
**Returns:** any
--------------------
### writeToFile(...)
```typescript
writeToFile(options: WriteToFileOptions) => any
```
| Param | Type |
| ------------- | --------------------------------------------------- |
| **`options`** | { filepath: string; content: string; } |
**Returns:** any
--------------------