# @apideck/file-picker-js

> A vanilla JavaScript library to embed the [Apideck FilePicker](https://www.apideck.com/samples/file-picker) in any web application.

Latest version **1.0.2** (published 2023-02-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install @apideck/file-picker-js
pnpm add @apideck/file-picker-js
yarn add @apideck/file-picker-js
bun add @apideck/file-picker-js
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2023-02-02 |
| First published | 2023-02-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=12 |
| Dependencies | 0 |
| Unpacked size | 94.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Jake Prins |
| Maintainers | brahimmouhamou, gdewilde, geertwille, jakeprins, nicklloyd, eliasmeire, trinix |
| Keywords | apideck, filepicker, javascript |

## Links

- npm: https://www.npmjs.com/package/@apideck/file-picker-js
- Repository: https://github.com/apideck-libraries/file-picker-js
- npm.io page: https://npm.io/package/@apideck/file-picker-js

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 1.0.2 (latest) — 2023-02-02
- 1.0.1 — 2023-02-02

## README

<img src="https://developers.apideck.com/_next/image?url=%2Ffile-picker-guide.png&w=1920&q=75" width="100%" />

# FilePicker JS

A vanilla JavaScript library to embed the [Apideck FilePicker](https://www.apideck.com/samples/file-picker) in any web application.

**FilePicker JS** | [FilePicker React](https://github.com/apideck-libraries/file-picker)

## Installation

### Package

```sh
npm install @apideck/file-picker-js
```

### Script

If you don't want to set up a build environment, you can get `@apideck/file-picker-js` from a CDN like unpkg.com and it will be globally available through the `window.FilePicker` object.

```html
<script src="https://unpkg.com/@apideck/file-picker-js"></script>
```

## Prerequisites

Before opening the FilePicker modal with `@apideck/file-picker-js`, you need to create a Vault session from your backend using the Vault API or one of our [SDKs](https://docs.apideck.com/sdks). Find out more in the [docs](https://docs.apideck.com/apis/vault/reference#operation/sessionsCreate).

## Usage

Pass the JWT you got from the Vault session to `@apideck/file-picker-js` and provide an `onSelect` function that acts upon selection of a file:

```js
import { FilePicker } from '@apideck/file-picker-js';

FilePicker.open({
  token: 'REPLACE_WITH_SESSION_TOKEN',
  onSelect: file => console.log(file),
});
```

If you want to get notified when the modal opens and closes, you can provide the `onReady` and `onClose` options. You could also get notified when the consumer switches from integration by using the `onConnectionSelect` option.

```jsx
import { FilePicker } from '@apideck/file-picker-js';

FilePicker.open({
  token: 'REPLACE_WITH_SESSION_TOKEN',
  onSelect: file => console.log(file),
  onClose: () => {
    console.log('closed!');
  },
  onReady: () => {
    console.log('ready!');
  },
  onConnectionSelect: connection => {
    console.log(connection);
  },
});
```

You can also provide a file through the `fileToSave` options that will force the FilePicker to go into "Upload" mode. This will allow the user to select the connector and folder that the file needs to get saved to.

```jsx
import { FilePicker } from '@apideck/file-picker-js';

FilePicker.open({
  token: 'REPLACE_WITH_SESSION_TOKEN',
  fileToSave: '<add-file-here>',
});
```

### Properties

| Property           | Type    | Required | Default             | Description                                                           |
| ------------------ | ------- | -------- | ------------------- | --------------------------------------------------------------------- |
| token              | string  | true     | -                   | The JSON Web Token returned from the Create Session call              |
| onSelect           | event   | false    | -                   | The function that gets called when a file is selected                 |
| onConnectionSelect | event   | false    | -                   | The function that gets called when a connection is selected           |
| title              | string  | false    | Apideck File Picker | Title shown in the modal                                              |
| subTitle           | string  | false    | Select a file       | Subtitle shown in the modal                                           |
| showAttribution    | boolean | false    | true                | Show "Powered by Apideck" in the backdrop of the modal backdrop       |
| open               | boolean | false    | false               | Opens the file picker if set to true                                  |
| onClose            | event   | false    | -                   | Function that gets called when the modal is closed                    |
| fileToSave         | file    | false    | -                   | Forces "Upload" mode to select the folder to upload the provided file |

---
_Source: https://npm.io/package/@apideck/file-picker-js · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._