StackOne File Picker SDK Documentation

The StackOne File Picker SDK enables you to integrate file selection from connected accounts into your application.

Below are the installation steps, usage examples, and API details.

Installation

Install the SDK using one of the following package managers:

# Using NPM
npm install --save @stackone/file-picker

# Using Yarn
yarn add @stackone/file-picker

Connect Session Token

The File Picker requires creating a separate connect session token with the Account ID and Provider Key of a connected account.

Usage

Below you can find the basic usage of the StackOne File Picker SDK using React:

import React, { useState, useEffect, useCallback } from 'react';
import { FilePicker } from '@stackone/file-picker';
import { StackOne } from "@stackone/stackone-client-ts";

const _stackOne = new StackOne({
  security: {
    password: "",
    username: "",
  },
});

export const FilePickerButton = () => {
  const [filePicker, setFilePicker] = useState(null);

  useEffect(() => {
    const initializePicker = async () => {
      const { sessionToken } = await _stackOne.connectSessions.createConnectSession({
        categories: [ConnectSessionCreateCategories.Documents],
        accountId: '{{Connected Account ID}}',
        provider: '{{Provider Key}}',
        ...
      });
      setFilePicker(new FilePicker({ sessionToken }));
    };

    initializePicker();
  }, []);

  const handleClick = useCallback(() => {
    filePicker?.open();
  }, [filePicker]);

  return (
    <button onClick={handleClick} disabled={!filePicker}>
      Open File Picker
    </button>
  );
};

API Reference

FilePicker Class

Constructor: FilePicker(options)

The options object can include the following parameters:

sessionToken
string
required

The session token generated on the server side.

baseUrl
string
default:"https://app.stackone.com"

The base URL for the StackOne API.

containerId
string

The ID of the container to mount the picker into.

onFilesPicked
function

Callback function that is triggered when files are selected. The function will return an array of files with the Unified ID that can be used in the Unified Download Documents API. After receiving the files, the File Picker will close automatically.

onOpen
function

Callback function that is triggered when the picker opens.

onClose
function

Callback function that is triggered when the picker closes.

onCancel
function

Callback function that is triggered when the picker is closed without file selection.

Methods

open()
method

Opens the file picker interface.

close()
method

Closes the file picker interface.