@robingenz/capacitor-file-picker NPM

Maintainers

Maintainer	GitHub	Social
Robin Genz	robingenz	@robin_genz

Installation

npm install @robingenz/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 '@robingenz/capacitor-file-picker';

const pickFiles = async () => {
  const result = await FilePicker.pickFiles({
    types: ['image/png'],
    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

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>

Interfaces

PickFilesResult

Prop	Type
`files`	File[]

File

Prop	Type	Description
`path`	string	The path of the file. Only available on Android and iOS.
`name`	string	The name of the file.
`data`	string	The Base64 string representation of the data contained in the file. Is only provided if `readData` is set to `true`.
`mimeType`	string	The mime type of the file.
`size`	number	The size of the file in bytes.
`blob`	Blob	The Blob instance of the file. Only available on Web.

PickFilesOptions

Prop	Type	Description
`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. Example: `['image/png', 'application/pdf']`
`multiple`	boolean	Whether multiple files may be selected. Default: `false`
`readData`	boolean	Whether to read the file data. Default: `true`