OneDrivePicker Documentation

Overview

The OneDrivePicker component is a custom file browser that allows users to select files from their OneDrive. It leverages the backend API to fetch and display files within a folder-browsing user interface. The component is designed to resemble the Google Drive picker, offering a familiar experience for users transitioning between platforms. It supports single or multiple file selections and enables filtered browsing based on specified file types.

Purpose

The primary purpose of the OneDrivePicker is to facilitate easy and efficient file selection for applications that require data uploads or integrations with OneDrive. By implementing this component, users can access their stored files while providing capabilities tailored to specific use cases, such as data analysis or project management.

Settings

The OneDrivePicker component includes several settings that customize its functionality and appearance. Below are detailed explanations for each setting:

1. value

• Input Type: Array or Object
• What It Does: This setting represents the currently selected file(s). It can be an array of file objects or a single file object. The accepted file object format includes properties such as id, name, and mimeType.
• Default Value: undefined

2. onChange

• Input Type: Function
• What It Does: This callback function is triggered when the user confirms their selection of files. It receives the selected file(s) as an argument, which allows the parent component to handle the file data accordingly.
• Default Value: undefined

3. fileType

• Input Type: String
• What It Does: Specifies the type of files to display in the picker. It can be set to 'dataset', 'spreadsheet', 'image', or 'pdf'. Changing this setting alters the filtering logic when fetching files from OneDrive, affecting which files appear based on their MIME types or file extensions.
• Default Value: 'dataset'

4. label

• Input Type: String
• What It Does: This setting defines the label displayed above the file picker trigger button. It helps users understand the purpose of the component.
• Default Value: 'Select File'

5. description

• Input Type: String
• What It Does: An optional text description displayed below the label, providing additional context or instructions about the file selection process.
• Default Value: undefined

6. multiSelect

• Input Type: Boolean
• What It Does: Determines whether multiple files can be selected at once. When set to true, users can select more than one file. When set to false, selection is limited to a single file.
• Default Value: true

How It Works

1. Initialization: The component initializes state variables for loading status, error state, open status, current folder id, folder history stack, loaded files, selected files, and search input.

2. File Fetching: When the component is opened or the current folder changes, the fetchFiles function is triggered, sending an API request to retrieve files from OneDrive based on the set folder ID. The results are then filtered according to the specified fileType.

3. Folder Navigation: Users can navigate through folders via clickable elements that alter the current folder ID. The state of folder history is maintained to facilitate backtracking.

4. File Selection: Users can select or deselect files based on the multiSelect setting. The selection modifies the selectedFiles state.

5. Confirmation and Cancellation: Upon confirming selection through the confirm button, the selected files are passed via the onChange callback. The state resets upon cancellation.

6. Search Functionality: Users can filter displayed files using a search input box, enabling quick access to files by name.

Data Expectations

The OneDrivePicker expects the following data format for value:

• An array of objects, each having:
  • id: A unique identifier for the file (string).
  • name: The name of the file (string).
  • mimeType: The MIME type of the file (string).

If a single file is selected, an object in the same format is provided.

Use Cases & Examples

Use Cases

1. Data Analysis Applications: Users may need to upload datasets from their OneDrive for analysis. The OneDrivePicker can help users quickly find and select relevant files.

2. Report Generation Tools: A reporting application can leverage the component to allow users to select reports saved in OneDrive, streamlining the process of gathering necessary documents.

3. Content Management Systems (CMS): A CMS can integrate the OneDrivePicker to let users select images or documents from their OneDrive account for use in content creation or editing.

Example Configuration

Use Case: Allow users to select multiple datasets for analysis in a Data Analysis Application.

Configuration:

<OneDrivePicker
    value={selectedFiles} // Assuming selectedFiles is managed in the parent component's state
    onChange={(files) => {
        // Handle the selected files here, e.g., pass them to an analysis function
        console.log("Selected Files:", files);
    }}
    fileType="dataset" // Specify that users should select dataset files
    label="Choose Your Dataset Files"
    description="Please select one or more CSV, JSON, or Excel files."
    multiSelect={true}
/>

In this example, the OneDrivePicker is configured to prompt users to select dataset files, allowing for multiple selections and providing clear labels and descriptions to guide the user experience.