Search docs

File Picker

The File Picker is an open-source, plug-and-play, React component that connects to many cloud storage APIs and offers easy file uploads and downloads between your app and any cloud storage service. This NPM package works with the File Storage API and allows your users to select, Search and Upload files to multiple services.

This guide will get you up and running with the File Picker component. To get started, follow these 3 steps:

Step 1: Setup Apideck

Create an account

If you haven't already, head over to our Signup page and create an account. Choose an application name and a subdomain. Afterward, you will be redirected to the Apideck dashboard.

Enable Unified APIs and connectors

Go to the Unified APIs page in the Apideck dashboard. Choose one or more Unified APIs to enable. You'll see a list of the available connectors for each Unified API. Choose a couple of connectors to enable. The Unified APIs and connectors you select become available to your users in Vault.

Get your API key and Application ID

Go to the API Keys page in the Apideck dashboard. Copy your application ID and API key. If your API key ever gets compromised, you can regenerate it on this page.

API keys overview
API keys overview

Step 2: Create a session

Vault lets your users (called consumers in Apideck) easily connect and configure integrations. You can create a consumer through a Vault session through the following endpoint https://developers.apideck.com/apis/vault/reference#tag/Sessions.

Most of the time, this is an ID of your internal data model that represents a user or account in your system. E.g., account:12345. If the consumer doesn't exist yet, Vault will upsert a consumer based on your ID.

Use the API call below to create a session for a consumer. This will return a Vault URL that you forward to a consumer to connect integrations.

terminal
curl --request POST \
  --url 'https://unify.apideck.com/vault/sessions' \
  --header 'Authorization: Bearer {API_KEY}' \
  --header 'x-apideck-app-id: {APP_ID}' \
  --header 'x-apideck-consumer-id: {CONSUMER_ID}' \

You can also use our Node SDK to create a session.

terminal
yarn add @apideck/node

Below is an example of creating a Serverless Function to create a session inside a Next.js project:

/api/vault/sessions.ts
import { VercelRequest, VercelResponse } from '@vercel/node'
import { Apideck } from '@apideck/node'

const createSession = async (_: VercelRequest, res: VercelResponse) => {
  const apideck = new Apideck({
    apiKey: `${process.env.NEXT_PUBLIC_API_KEY}`,
    appId: `${process.env.NEXT_PUBLIC_APP_ID}`,
    consumerId: 'test-consumer'
  })
  const { data } = await apideck.vault.sessionsCreate({})

  res.json(data)
}

export default createSession

The returned data object will include the session_token that you can use pass as the jwt prop to the Vault component. It also includes a session_uri, which is a link to the Hosted Vault application. You can use this link if you don't want to use react-vault and redirect the user to the hosted solution.

Step 3: Add the File Picker

Install the NPM package.

terminal
yarn add @apideck/file-picker

Next, pass the JSON Web Token returned from the Create Session call together with your Application ID and a consumer ID to the FilePicker component.

MyComponent.js
import { FilePicker } from '@apideck/file-picker'
import '@apideck/file-picker/dist/styles.css' // only when not using Tailwind CSS

const MyComponent = () => {
  return (
    <FilePicker
      onSelect={(file) => console.log(file)}
      trigger={<button>Pick a file</button>}
      jwt="REPLACE_WITH_YOUR_JWT"
      appId="REPLACE_WITH_YOUR_APP_ID"
      consumerId="REPLAY_WITH_USER_ID"
    />
  )
}

The component is styled using Tailwind CSS. If you were to use the Vault component in a project that also uses Tailwind CSS, you can omit the CSS file import, and include the package path in the config file. Doing this will tell Tailwind to scan the package and include the needed styles in your bundle and you won't have duplicates in your CSS.

tailwind.config.js
module.exports = {
  content: [
    './node_modules/@apideck/file-picker/**/*.js',
  ],
  ...
}

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.

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.

React File Picker
React File Picker

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 element or 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