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
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:
- Interface
- Example
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[];
}
{
"drawings": [
{
"id": "f2683af2-c783-5314-92f5-31b24150f3c3",
"source_id": "570073",
"creator_id": null,
"discipline": "Architectural",
"drawing_version_id": "50fcd2e5-cf92-5a7c-8afd-41235623be07",
"filename": null,
"name": "LIFE SAFETY PLANS",
"number": "A003",
"preview_url": "https://storage.agaveapi.com/preview/file.pdf?signature=xxx&expires_at=20220530T031901Z",
"source_create_time": null,
"source_update_time": "2018-02-15",
"version": "0",
"project_id": "39aaea67-0509-5d18-a304-edd540fcf0de",
"url": "https://storage.agaveapi.com/download/file.pdf?signature=xxx&expires_at=20220530T031901Z"
},
{
"id": "103aa9da-efb3-5679-85da-390e1502a48b",
"source_id": "570075",
"creator_id": null,
"discipline": "Architectural",
"drawing_version_id": "10190c8a-5c6b-57d2-b852-17b2df794f60",
"filename": null,
"name": "ARCHITECTURAL SITE PLAN",
"number": "A100",
"preview_url": "https://storage.agaveapi.com/preview/file.pdf?signature=xxx&expires_at=20220530T031901Z",
"source_create_time": null,
"source_update_time": "2018-02-15",
"version": "0",
"project_id": "39aaea67-0509-5d18-a304-edd540fcf0de",
"url": "https://storage.agaveapi.com/download/file.pdf?signature=xxx&expires_at=20220530T031901Z"
},
{
"id": "2261b69f-1d04-53fb-a5be-de7e4027f4da",
"source_id": "1031555",
"creator_id": null,
"discipline": "Equipment",
"drawing_version_id": "a951d3b8-419f-5be1-ade6-4053be3f456e",
"filename": null,
"name": "Architectural 2nd Floor New Revision",
"number": "A113",
"preview_url": "https://storage.agaveapi.com/preview/file.pdf?signature=xxx&expires_at=20220530T031901Z",
"source_create_time": null,
"source_update_time": "2021-10-31",
"version": "0",
"project_id": "616f525d-40dd-5527-9381-7a6ac12d1f89",
"url": "https://storage.agaveapi.com/download/file.pdf?signature=xxx&expires_at=20220530T031901Z"
}
],
"documents": [
{
"id": "8a77ea7d-1556-5dfc-8c8e-9fa7db0c2fd1",
"source_id": "9387453",
"name": "A113_ FIRST FLOOR - REFLECTED CEILING PLAN Rev.0 markup.pdf",
"project_id": "39aaea67-0509-5d18-a304-edd540fcf0de",
"creator_id": "314aa464-1cd9-5f72-95f8-eb046e09ada8",
"folder_id": "f16aae42-ae5e-5977-89ec-6a6e89749366",
"preview_url": "https://storage.agaveapi.com/preview/file.pdf?signature=xxx&expires_at=20220530T031901Z",
"size": "916029",
"type": "Adobe Acrobat PDF",
"source_create_time": "2021-10-29",
"source_update_time": "2021-10-29",
"url": "https://storage.agaveapi.com/download/file.pdf?signature=xxx&expires_at=20220530T031901Z"
},
{
"id": "70a5fae3-dc7c-5d6c-8bfc-9ce8619cfe1d",
"source_id": "9790493",
"name": "example.pdf",
"project_id": "616f525d-40dd-5527-9381-7a6ac12d1f89",
"creator_id": "314aa464-1cd9-5f72-95f8-eb046e09ada8",
"folder_id": "02305cc5-c7f8-5814-a970-246cdc4ea45d",
"preview_url": "https://storage.agaveapi.com/preview/file.pdf?signature=xxx&expires_at=20220530T031901Z",
"size": "1006735",
"type": "Adobe Acrobat PDF",
"source_create_time": "2022-03-31",
"source_update_time": "2022-03-31",
"url": "https://storage.agaveapi.com/download/file.pdf?signature=xxx&expires_at=20220530T031901Z"
},
{
"id": "fee24b87-bd60-5b7b-b794-f6dc2d657075",
"source_id": "9610160",
"name": "team.jpg",
"project_id": "616f525d-40dd-5527-9381-7a6ac12d1f89",
"creator_id": "314aa464-1cd9-5f72-95f8-eb046e09ada8",
"folder_id": "02305cc5-c7f8-5814-a970-246cdc4ea45d",
"preview_url": "https://storage.agaveapi.com/preview/file.pdf?signature=xxx&expires_at=20220530T031901Z",
"size": "625663",
"type": "JPEG Image",
"source_create_time": "2022-01-26",
"source_update_time": "2022-01-26",
"url": "https://storage.agaveapi.com/download/file.pdf?signature=xxx&expires_at=20220530T031901Z"
}
],
"specifications": [
{
"id": "a2823275-8b18-50f0-a1bf-0fa713ad1067",
"source_id": "3424",
"name": "Cover",
"number": "0.1",
"preview_url": "https://storage.agaveapi.com/preview/file.pdf?signature=xxx&expires_at=20220530T031901Z",
"section_version_id": "6aa01e3a-2ecd-5024-b603-dbe557ef2812",
"project_id": "616f525d-40dd-5527-9381-7a6ac12d1f89",
"url": "https://storage.agaveapi.com/download/file.pdf?signature=xxx&expires_at=20220530T031901Z"
},
{
"id": "4611daf1-e80a-5ec6-be8a-945e212601b5",
"source_id": "3425",
"name": "About",
"number": "0.2",
"preview_url": "https://storage.agaveapi.com/preview/file.pdf?signature=xxx&expires_at=20220530T031901Z",
"section_version_id": "ca517eb4-4980-523c-8fb7-172bbb15d49d",
"project_id": "616f525d-40dd-5527-9381-7a6ac12d1f89",
"url": "https://storage.agaveapi.com/download/file.pdf?signature=xxx&expires_at=20220530T031901Z"
},
{
"id": "c3ac4ca9-48fd-5b6c-89ce-7fd7d36315f7",
"source_id": "3426",
"name": "Reference",
"number": "0.3",
"preview_url": "https://storage.agaveapi.com/preview/file.pdf?signature=xxx&expires_at=20220530T031901Z",
"section_version_id": "7f38d391-b6cc-55a6-aef5-730db7317a5f",
"project_id": "616f525d-40dd-5527-9381-7a6ac12d1f89",
"url": "https://storage.agaveapi.com/download/file.pdf?signature=xxx&expires_at=20220530T031901Z"
}
]
}
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
- Minimal Options
- With Disabled Files
- Embed in Existing Element
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);
}
}
});
window.AgaveFilePicker.openFilePicker({
session: session,
disabledFileIds: [
'25a7b866-d316-5d44-9db8-a8f8abe4c320',
'602ba619-54e6-5a38-9daf-7a57b0425edb',
], //Replace with the IDs of files you want to appear disabled in the file component.
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);
}
}
});
iframe
element:<p>
Pick a file:
<iframe width="800" height="600" id="pick-a-file"></iframe>
</p>
<script>
window.AgaveFilePicker.openFilePicker({
session: session,
iframeId: 'pick-a-file',
onSubmit: (submission) => {
//
}
});
</script>