Skip to main content

File Manager Component

Overview

Using Agave File Manager 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 Manager 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 Manager by invoking AgaveFilePicker.openFilePicker(options). The options object has the following structure:

interface OpenFilePickerConfig {
session: string;
projectId?: string;
disabledFileIds?: string[];
fileTypes?: 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 Manager directly into a specific project instead of displaying all projects under the account.

disabledFileIds

Optional.

Files with their ID field matching a string in this array will appear disabled in the file component and cannot be selected from within the component.

fileTypes

Optional.

Allows you to only show certain file types, e.g. ["PDF", "PNG"].

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 Manager popup, or when an uncaught exception is returned (in which case, an error string parameter is included).

iframeId

Optional.

If you want to provide us with an <iframe> element that's already on your page, you can pass its identifier here.

Examples

This is the minimal configuration you must pass to the openFilePicker function:
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);
}
}
});