capacitor-native-filepicker

In most of the cases, you don't need this picker. Implementing your own filepicker with the File System API of CapacitorJS is quite easy and convenient 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. For iOS, it uses the UIDocumentPickerViewController view.

	Android	iOS
FilePicker
FolderPicker

Install

npm install https://github.com/ourcodeworld/capacitor-native-filepicker
npx cap sync

How to use

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(...)
• launchFilePicker(...)
• launchFolderPicker(...)
• shareFile(...)
• getFileUrlForUri(...)
• createFile(...)
• writeToFile(...)

echo(...)

echo(options: { value: string; }) => any

Param	Type
options	{ value: string; }

Returns: any

---

launchFilePicker(...)

launchFilePicker(options: FilePickerOptions) => any

Param	Type
options	{ limit?: number; allowedExtensions?: any; showHiddenFiles?: boolean; }

Returns: any

---

launchFolderPicker(...)

launchFolderPicker(options: FolderPickerOptions) => any

Param	Type
options	{ limit?: number; showHiddenFiles?: boolean; }

Returns: any

---

shareFile(...)

shareFile(options: { filepath: string; }) => any

Param	Type
options	{ filepath: string; }

Returns: any

---

getFileUrlForUri(...)

getFileUrlForUri(options: { uri: string; }) => any

Param	Type
options	{ uri: string; }

Returns: any

---

createFile(...)

createFile(options: CreateFileOptions) => any

Param	Type
options	{ directory: string; filename: string; content: string; }

Returns: any

---

writeToFile(...)

writeToFile(options: WriteToFileOptions) => any

Param	Type
options	{ filepath: string; content: string; }

Returns: any

---