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);
        }
    }
});