https://github.com/apideck-libraries/file-picker-js
Apideck FilePicker Modal for JavaScript projects
https://github.com/apideck-libraries/file-picker-js
Last synced: 3 months ago
JSON representation
Apideck FilePicker Modal for JavaScript projects
- Host: GitHub
- URL: https://github.com/apideck-libraries/file-picker-js
- Owner: apideck-libraries
- License: mit
- Created: 2023-02-02T11:34:56.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-02-03T10:12:28.000Z (over 2 years ago)
- Last Synced: 2025-04-11T04:39:59.068Z (3 months ago)
- Language: TypeScript
- Size: 758 KB
- Stars: 2
- Watchers: 6
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# FilePicker JS
A vanilla JavaScript library to embed the [Apideck FilePicker](https://www.apideck.com/samples/file-picker) in any web application.
**FilePicker JS** | [React FilePicker](https://github.com/apideck-libraries/file-picker) | [Vue FilePicker](https://github.com/apideck-libraries/vue-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
```
## 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: '',
});
```
### 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 |