Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/capawesome-team/capacitor-file-picker

⚡️ Capacitor plugin that allows the user to select a file.
https://github.com/capawesome-team/capacitor-file-picker

List: capacitor-file-picker

android capacitor capacitor-android capacitor-ios capacitor-plugin capacitor-web capawesome file-chooser file-picker ios web

Last synced: 3 months ago
JSON representation

⚡️ Capacitor plugin that allows the user to select a file.

Lists

README

        

## ⚠️ Deprecated repository

**This project has been moved to the following monorepo: [capawesome-team/capacitor-plugins](https://github.com/capawesome-team/capacitor-plugins).**

-----



File Picker


@capawesome/capacitor-file-picker



Capacitor plugin that allows the user to select a file.










## Maintainers

| Maintainer | GitHub | Social |
| ---------- | ----------------------------------------- | --------------------------------------------- |
| Robin Genz | [robingenz](https://github.com/robingenz) | [@robin_genz](https://twitter.com/robin_genz) |

## Sponsors

This is an MIT-licensed open source project.
It can grow thanks to the support by these awesome people.
If you'd like to join them, please read more [here](https://github.com/sponsors/capawesome-team).

## Installation

```bash
npm install @capawesome/capacitor-file-picker
npx cap sync
```

## Configuration

No configuration required for this plugin.

## Demo

A working example can be found here: [robingenz/capacitor-plugin-demo](https://github.com/robingenz/capacitor-plugin-demo)

## Usage

```typescript
import { FilePicker } from '@capawesome/capacitor-file-picker';

const pickFiles = async () => {
const result = await FilePicker.pickFiles({
types: ['image/png'],
multiple: true,
});
};

const pickImages = async () => {
const result = await FilePicker.pickImages({
multiple: true,
});
};

const pickMedia = async () => {
const result = await FilePicker.pickMedia({
multiple: true,
});
};

const pickVideos = async () => {
const result = await FilePicker.pickVideos({
multiple: true,
});
};

const appendFileToFormData = async () => {
const result = await FilePicker.pickFiles();
const file = result.files[0];

const formData = new FormData();
if (file.blob) {
const rawFile = new File(file.blob, file.name, {
type: file.mimeType,
});
formData.append('file', rawFile, file.name);
}
};
```

## API

* [`convertHeicToJpeg(...)`](#convertheictojpeg)
* [`pickFiles(...)`](#pickfiles)
* [`pickImages(...)`](#pickimages)
* [`pickMedia(...)`](#pickmedia)
* [`pickVideos(...)`](#pickvideos)
* [`addListener('pickerDismissed', ...)`](#addlistenerpickerdismissed)
* [`removeAllListeners()`](#removealllisteners)
* [Interfaces](#interfaces)
* [Type Aliases](#type-aliases)

### convertHeicToJpeg(...)

```typescript
convertHeicToJpeg(options: ConvertHeicToJpegOptions) => Promise
```

Convert a HEIC image to JPEG.

Only available on iOS.

| Param | Type |
| ------------- | ----------------------------------------------------------------------------- |
| **`options`** | ConvertHeicToJpegOptions |

**Returns:** Promise<ConvertHeicToJpegResult>

**Since:** 0.6.0

--------------------

### pickFiles(...)

```typescript
pickFiles(options?: PickFilesOptions | undefined) => Promise
```

Open the file picker that allows the user to select one or more files.

| Param | Type |
| ------------- | ------------------------------------------------------------- |
| **`options`** | PickFilesOptions |

**Returns:** Promise<PickFilesResult>

--------------------

### pickImages(...)

```typescript
pickImages(options?: PickMediaOptions | undefined) => Promise
```

Pick one or more images from the gallery.

On iOS 13 and older it only allows to pick one image.

Only available on Android and iOS.

| Param | Type |
| ------------- | ------------------------------------------------------------- |
| **`options`** | PickMediaOptions |

**Returns:** Promise<PickFilesResult>

**Since:** 0.5.3

--------------------

### pickMedia(...)

```typescript
pickMedia(options?: PickMediaOptions | undefined) => Promise
```

Pick one or more images or videos from the gallery.

On iOS 13 and older it only allows to pick one image or video.

Only available on Android and iOS.

| Param | Type |
| ------------- | ------------------------------------------------------------- |
| **`options`** | PickMediaOptions |

**Returns:** Promise<PickFilesResult>

**Since:** 0.5.3

--------------------

### pickVideos(...)

```typescript
pickVideos(options?: PickMediaOptions | undefined) => Promise
```

Pick one or more videos from the gallery.

On iOS 13 and older it only allows to pick one video.

Only available on Android and iOS.

| Param | Type |
| ------------- | ------------------------------------------------------------- |
| **`options`** | PickMediaOptions |

**Returns:** Promise<PickFilesResult>

**Since:** 0.5.3

--------------------

### addListener('pickerDismissed', ...)

```typescript
addListener(eventName: 'pickerDismissed', listenerFunc: () => void) => Promise & PluginListenerHandle
```

Called when the file picker is dismissed.

Only available on iOS.

| Param | Type |
| ------------------ | ------------------------------ |
| **`eventName`** | 'pickerDismissed' |
| **`listenerFunc`** | () => void |

**Returns:** Promise<PluginListenerHandle> & PluginListenerHandle

**Since:** 0.6.2

--------------------

### removeAllListeners()

```typescript
removeAllListeners() => Promise
```

Remove all listeners for this plugin.

**Since:** 0.6.2

--------------------

### Interfaces

#### ConvertHeicToJpegResult

| Prop | Type | Description | Since |
| ---------- | ------------------- | ------------------------------------- | ----- |
| **`path`** | string | The path of the converted JPEG image. | 0.6.0 |

#### ConvertHeicToJpegOptions

| Prop | Type | Description | Since |
| ---------- | ------------------- | --------------------------- | ----- |
| **`path`** | string | The path of the HEIC image. | 0.6.0 |

#### PickFilesResult

| Prop | Type |
| ----------- | ------------------- |
| **`files`** | File[] |

#### File

| Prop | Type | Description | Since |
| ---------------- | ------------------- | -------------------------------------------------------------------------------------------------------------------- | ----- |
| **`blob`** | Blob | The Blob instance of the file. Only available on Web. | |
| **`data`** | string | The Base64 string representation of the data contained in the file. Is only provided if `readData` is set to `true`. | |
| **`duration`** | number | The duration of the video in seconds. Only available on Android and iOS. | 0.5.3 |
| **`height`** | number | The height of the image or video in pixels. Only available on Android and iOS. | 0.5.3 |
| **`mimeType`** | string | The mime type of the file. | |
| **`modifiedAt`** | number | The last modified timestamp of the file in milliseconds. | 0.5.9 |
| **`name`** | string | The name of the file. | |
| **`path`** | string | The path of the file. Only available on Android and iOS. | |
| **`size`** | number | The size of the file in bytes. | |
| **`width`** | number | The width of the image or video in pixels. Only available on Android and iOS. | 0.5.3 |

#### PickFilesOptions

| Prop | Type | Description | Default |
| -------------- | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
| **`types`** | string[] | List of accepted file types. Look at [IANA Media Types](https://www.iana.org/assignments/media-types/media-types.xhtml) for a complete list of standard media types. This option cannot be used with `multiple: true` on Android. | |
| **`multiple`** | boolean | Whether multiple files may be selected. | false |
| **`readData`** | boolean | Whether to read the file data. | false |

#### PickMediaOptions

| Prop | Type | Description | Default |
| -------------- | -------------------- | --------------------------------------- | ------------------ |
| **`multiple`** | boolean | Whether multiple files may be selected. | false |
| **`readData`** | boolean | Whether to read the file data. | false |

#### PluginListenerHandle

| Prop | Type |
| ------------ | ----------------------------------------- |
| **`remove`** | () => Promise<void> |

### Type Aliases

#### PickedFile

File

#### PickImagesOptions

PickMediaOptions

#### PickImagesResult

PickMediaResult

#### PickMediaResult

PickFilesResult

#### PickVideosOptions

PickMediaOptions

#### PickVideosResult

PickMediaResult

## Changelog

See [CHANGELOG.md](https://github.com/capawesome-team/capacitor-file-picker/blob/main/CHANGELOG.md).

## License

See [LICENSE](https://github.com/capawesome-team/capacitor-file-picker/blob/main/LICENSE).