https://github.com/apideck-libraries/file-picker
A React file picker component using the unified File Storage API
https://github.com/apideck-libraries/file-picker
Last synced: 12 months ago
JSON representation
A React file picker component using the unified File Storage API
- Host: GitHub
- URL: https://github.com/apideck-libraries/file-picker
- Owner: apideck-libraries
- License: mit
- Created: 2021-09-14T07:59:38.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-10-05T10:04:12.000Z (almost 3 years ago)
- Last Synced: 2025-04-06T20:36:11.914Z (over 1 year ago)
- Language: TypeScript
- Homepage: https://file-picker.apideck.dev/
- Size: 3.48 MB
- Stars: 29
- Watchers: 4
- Forks: 5
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Apideck File Picker
A React file picker component that works with the Apideck [File Storage API](https://developers.apideck.com/apis/file-storage/reference).
Sign up for a free account at [apideck.com](https://app.apideck.com/signup) to obtain an API key and App ID.
[FilePicker JS](https://github.com/apideck-libraries/file-picker-js) | **React FilePicker** | [Vue FilePicker](https://github.com/apideck-libraries/vue-file-picker)
## Usage
Install the component
```sh
yarn add @apideck/file-picker
```
Create a [Vault session](https://developers.apideck.com/apis/vault/reference#operation/sessionsCreate) inside your application to get a JSON Web Token.
Pass the JWT together with your App ID and a consumer ID to the FilePicker component
```js
import { FilePicker } from '@apideck/file-picker'
import '@apideck/file-picker/dist/styles.css'
const MyComponent = () => {
const handleSelect = (file) => {
console.log(file)
}
return (
Pick a file}
token=""
/>
)
}
```
You can also provide a file through the `fileToSave` prop 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.
### 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 |
| trigger | element | false | - | The component that should trigger the File Picker modal on click |
| 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 |
### Using Tailwind?
The FilePicker is styled using [Tailwind CSS](https://tailwindcss.com/). If you were to use the File Picker component in a project that also uses Tailwind CSS, you can omit the CSS file import, and include the package in the purge path of the tailwind.config.css.
```js
// tailwind.config.js
purge: [
'./node_modules/@apideck/file-picker/dist/*.js',
],
```