File Picker

Merge’s File Picker is built into our embedded Merge Link component and provides a user-friendly interface for your customers to browse Files, Folders, and/or Drives in their connected File Storage account.

Merge’s File Picker is built into our embedded Merge Link component and provides a user-friendly interface for your customers to browse Files, Folders, and/or Drives in their connected File Storage account. File Picker does not impact your File Storage Linked Account syncs unlike Selective Sync.

Demo video

Watch this quick video to learn the basics of how Merge’s File Picker works.

File Picker demo

To set up File Picker, please follow our Embedded Link guide to add our drop-in Merge Link component to your app.

Make sure you have the latest version of react-merge-link

Enabling the File Picker only requires a few additions to step 2.

In addition to following step 2 of our Embedded Link guide, you will need to add a new parameter filePickerConfig.

onSubmit is the only required input to filePickerConfig, and returns an array of selected objects from your user’s workspace.

This input is a callback and is left as console.log() in this example for you to decide how to handle Files, Folders, and Drives that your users have selected in the File Picker. If you are testing the File Picker in your dashboard, no callback is provided and the File Picker will automatically close on submit.

In this example, the File Picker configuration allows multi-select of Files and Folders.

See details about each filePickerConfig input below.

Frontend - Initial link with File Picker
1import React, { useCallback } from "react";
2// In your React project folder, run:
3// npm install --save @mergeapi/react-merge-link
4import { useMergeLink } from "@mergeapi/react-merge-link";
5
6const onSuccess = useCallback((public_token) => {
7  // Send public_token to server (Step 3)
8}, []);
9
10// highlight-start
11const onSubmit = useCallback((output_objects) => {
12  // handle selected Files, Folders, or Drives
13  for (output_object of output_objects) {
14    console.log(output_object);
15  }
16}, []);
17// highlight-end
18
19const { open, isReady } = useMergeLink({
20  linkToken: "ADD_GENERATED_LINK_TOKEN", // Replace ADD_GENERATED_LINK_TOKEN with the token retrieved from your backend (Step 1)
21  onSuccess,
22  // **** FILE PICKER CONFIG BELOW IS NEW FOR FILE PICKER **** //
23// highlight-start
24  filePickerConfig: {
25    onSubmit, // required
26    types: ['FILE', 'FOLDER'], // optional
27    allowMultiSelect: true // optional
28  }
29// highlight-end
30});

Configuration inputs

InputTypeDescription
typesArrayOptional array of object types that determines which types of objects your users can pick. Possible values for object types include: FILE, FOLDER, DRIVE. If types is empty, your users will be able to pick objects of any type. If types is not empty, your users are restricted to selecting from the object types in the array. For example, if types = ['FILE', 'FOLDER'], your users will be able to select Files and Folders, but not Drives.
allowMultiSelectBooleanOptional boolean field that allows your users to select multiple objects in one File Picker session. The default value is false, which restricts your users to only select one object.
onSubmitFunctionCallback that returns an array of MergeFileStorageData objects as its output. See an example for MergeFileStorageData below.

Merge File Storage data

MergeFileStorageData properties should match our File Storage Common Model properties for the given workspace object type.

Select the object type to see its corresponding properties and example response.

The File object is used to represent a file in the workspace. The response properties match the File Common Model.

Example File response
1{
2  "id": "45ce474c-dhcj-43a6-754r-629f799f7d68",
3  "remote_id": "12",
4  "name": "merge_article.txt",
5  "file_url": "https://drive.com/1234567890/merge_article.txt",
6  "file_thumbnail_url": "https://drive.com/1234567890/merge_article_thumbnail.txt",
7  "size": 1024,
8  "mime_type": "text/plain",
9  "description": "This file contains an article about Merge.",
10  "folder": "fba1fbc6-67c0-4cb2-a176-7896acd2ffd5",
11  "permissions": ["fba1fbc6-67c0-4cb2-a176-7896acd2ffd5"],
12  "drive": "fba1fbc6-67c0-4cb2-a176-7896acd2ffd5",
13  "remote_created_at": "2022-02-11T00:00:00Z",
14  "remote_updated_at": "2022-02-11T00:00:00Z",
15  "remote_was_deleted": false,
16  "created_at": "2022-02-11T00:00:00Z",
17  "modified_at": "2022-02-11T00:00:00Z"
18}