capacitor-file-picker icon indicating copy to clipboard operation
capacitor-file-picker copied to clipboard

Published 20 hours ago • verified publisher icon capawesome-team
→

Metadata

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

⚠️ Deprecated repository

This project has been moved to the following monorepo: 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 @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.

Installation

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

Usage

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(...)
  • pickFiles(...)
  • pickImages(...)
  • pickMedia(...)
  • pickVideos(...)
  • addListener('pickerDismissed', ...)
  • removeAllListeners()
  • Interfaces
  • Type Aliases

convertHeicToJpeg(...)

convertHeicToJpeg(options: ConvertHeicToJpegOptions) => Promise<ConvertHeicToJpegResult>

Convert a HEIC image to JPEG.

Only available on iOS.

Param Type
options ConvertHeicToJpegOptions

Returns: Promise<ConvertHeicToJpegResult>

Since: 0.6.0

pickFiles(...)

pickFiles(options?: PickFilesOptions | undefined) => Promise<PickFilesResult>

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

Param Type
options PickFilesOptions

Returns: Promise<PickFilesResult>

pickImages(...)

pickImages(options?: PickMediaOptions | undefined) => Promise<PickImagesResult>

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(...)

pickMedia(options?: PickMediaOptions | undefined) => Promise<PickMediaResult>

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(...)

pickVideos(options?: PickMediaOptions | undefined) => Promise<PickVideosResult>

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', ...)

addListener(eventName: 'pickerDismissed', listenerFunc: () => void) => Promise<PluginListenerHandle> & 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()

removeAllListeners() => Promise<void>

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

License

See LICENSE.

← Metadata

66
Stars
10
Forks
Watchers

Owner

verified publisher icon capawesome-team

Metadata

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

Back