Setup Guide

You can find your Box app credentials in your Box Developer Account. You’ll need the following information to set up your Box App with Paragon Connect:
  • Client ID
  • Client Secret
  • Scopes Requested

Add your Box app to Paragon

Under Integrations > Connected Integrations > Box > App Configuration > Configure, fill out your credentials from your developer app in their respective sections:
  • Client ID: Found under Client ID on your Box App page.
  • Client Secret: Found under Client Secret on your Box App page.
  • Permissions: Select the scopes you’ve requested for your application. For a list of recommended scopes, please view this integration within your Paragon dashboard. View dashboard.
Leaving the Client ID and Client Secret blank will use Paragon development keys.

Connecting to Box

Once your users have connected their Box account, you can use the Paragon SDK to access the Box API on behalf of connected users. See the Box REST API documentation for their full API reference. Any Box API endpoints can be accessed with the Paragon SDK as shown in this example.
// You can find your project ID in the Overview tab of any Integration

// Authenticate the user
paragon.authenticate(<ProjectId>, <UserToken>);

// Get File Information
await paragon.request("box", "/files/:file_id", {
  method: "GET"
});

// Copy a file
await paragon.request("box", "/files/:file_id/copy", {
  method: "POST",
  body: {
    "parent":{
      "id": "123"
    }
  }
});

// List all collections
await paragon.request("box", "/collections", {
  method: "GET"
});

Building Box workflows

Once your Box account is connected, you can add steps to perform the following actions:
  • Save File
  • Get File by ID
  • List Files
  • Create Folder
  • Move Folder
  • Get Folder by ID
  • Search Folders
  • Delete Folders
For actions that accept folderId as a value, you can pass 0 for the root or parent folder
You can also use the Box Request step to access any of Box’s API endpoints without the authentication piece. When creating or updating records in Box, you can reference data from previous steps by typing {{ to invoke the variable menu.

Using the Box File Picker

You can allow your user to select files from their Box account in your app with the Paragon SDK.

Showing the File Picker

Use the Paragon SDK in your frontend application to show the File Picker in your app. The SDK provides an ExternalFilePicker class to load Box’s JavaScript into your page and authenticate with your user’s connected Box account.
let picker = new paragon.ExternalFilePicker("box", {
    onFileSelect: (files) => {
        // Handle file selection
    }
});

// Loads external dependencies and user's access token, and sets the folderId to the root folder
await picker.init({ folderId: "0" });

// Open the File Picker
picker.open();
You can configure the File Picker to listen for additional callbacks or to restrict allowed file types. Learn more about configuring File Picker options in the SDK Reference.

Downloading the Selected File

The Box File Picker callback will return a Response object describing the user’s file picker interaction including an array of any files selected. Using this array of file objects, you can use the Proxy API to perform an authenticated proxy requests to download the files.
await paragon.request('box', '/files/1917222621209/content', {
	method: 'GET'
});