The File Picker arrived!Read the announcement

Search docs

File Picker

A React file picker component that works with the Apideck File Storage API.

Get started

The file picker works with the File Storage API, sign up for a free account at apideck.com to obtain an API key and App ID.

Usage

Install the component

yarn add @apideck/file-picker

Create a Vault session 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

import { FilePicker } from '@apideck/file-picker'
import '@apideck/file-picker/dist/styles.css'

const MyComponent = () => {
  const handleSelect = (file) => {
    console.log(file)
  }

  return (
    <FilePicker
      onSelect={handleSelect}
      trigger={<button>Pick a file</button>}
      jwt="token-123"
      appId="your-app-id"
      consumerId="your-consumer-id"
    />
  )
}

Properties

PropertyTypeRequiredDefaultDescription
appIdstringtrue-The ID of your Unify application
consumerIdstringtrue-The ID of the consumer which you want to fetch files from
jwtstringtrue-The JSON Web Token returned from the Create Session call
onSelecteventtrue-The function that gets called when a file is selected
triggerelementfalse-The component that should trigger the File Picker modal on click
titlestringfalseApideck File PickerTitle shown in the modal
subTitlestringfalseSelect a fileSubtitle shown in the modal
showAttributionbooleanfalsetrueShow "Powered by Apideck" in the backdrop of the modal backdrop
openbooleanfalsefalseOpens the file picker if set to true
onCloseeventfalseFunction that gets called when the modal is closed

Using Tailwind

The FilePicker is styled using Tailwind CSS. 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.

// tailwind.config.js
purge: [
  './node_modules/@apideck/file-picker/dist/*.js',
],

Demo

Go to file-picker.apideck.dev to see the live demo of the File Picker component. The source code of the demo application can be found at github.com/apideck-samples/file-picker.