Skip to main content

File Picker Component

Overview

Using Agave File Picker is simple: you only need to install an initialization script and open the component with a temporary, limited-in-scope Link Session.

Installation

Javascript

Include the Agave File Picker initialize script on each page of your site. This script must always be loaded directly from https://app.agaveapi.com/file-picker-init.js, rather than included in a bundle or hosted by you.

<script src="https://app.agaveapi.com/file-picker-init.js"></script>

React Component

The React component is currently in development.

Vue.js Component

info

Interested in a Vue.js component? Let us know at api-support@agaveapi.com!

openFilePicker Options

After installing the script, you can open Agave File Picker by invoking AgaveFilePicker.openFilePicker(options). The options object has the following structure:

interface OpenFilePickerConfig {
session: string;
projectId?: string;
onSubmit: (submission: Submission) => void;
onExit?: (error?: string) => void;
}

session

Required.

This is the session you get by making a POST request to /link/sessions (see Quickstart).

projectId

Optional.

Allows you to open Agave File Picker directly into a specific project instead of displaying all projects under the account.

onSubmit

Required.

A callback function for when a User has successfully selected one or more files in the Source Systems. This callback takes an (submission) argument with the following structure:

Submission.ts
interface UnifiedFile {
id: string;
source_id: string;
name: string;
project_id?: string;
creator_id?: string;
folder_id: string;
type?: string;
url?: string;
size?: string;
number: string;
source_create_time?: string;
source_update_time?: string;
}

interface Submission {
drawings: UnifiedFile[];
documents: UnifiedFile[];
specifications: UnifiedFile[];
}

onExit

Optional.

A callback function that is called when either a User closes the File Picker popup, or when an uncaught exception is returned (in which case, an error string parameter is included).

Example

window.AgaveFilePicker.openFilePicker({
session: session,

onSubmit: (submission) => {
console.log(submission.drawings); // An array of UnifiedFile[]
console.log(submission.documents); // An array of UnifiedFile[]
console.log(submission.specifications); // An array of UnifiedFile[]
},

onExit: (error) => {
if (error) {
console.error(error);
}
}
});