File-SDK Overview

In the File SDK, you can perform various operations to manage your files, including creating new folders, uploading, searching, copying, sorting, previewing, duplicating, moving, renaming, and deleting files.

Installing

npm install @fintech-automation/file-sdk

Running Locally

1. Install dependencies:

npm install

2. Start the dev server:

npm run serve

3. Build production package:

npm run build

Usage

import React from 'react';
import { FileSDK } from '@fintech-automation/file-sdk';
import { store } from '@/redux/store';

export default function Dashboard() {
  const sessionToken = store.getState().login.accessData.access_token;

  const initData = {
    apiDomain: 'xxxx',
    token: `${sessionToken}`,
    path: '/Team/MyFolder',
    fileUploadAccept: '.jpg, .png, .text/plain',
    permissions: {
      createPermission: true,
      deletePermission: false,
    },
    downloadConfig: {
      allVersion: {
        hidden: false,
        defaultValue: true,
      },
      containsSubFolders: {
        hidden: true,
        defaultValue: false,
      },
    },
    callbackConfig: {
      onCreateFolderCallback: async (res) => {
        console.log('res', res);
      },
    },
    folderTreeConfig: {
      folderTreeShowCollapse: true,
      folderTreeCollapseDefaultHidden: true,
    },
    fileListConfig: {
      customizeFileTableColumnToShow: ['fileSize', 'createdDate', 'uploadedBy'],
      customizeTableHeight: false,
    },
    themeConfig: {
      primaryRegular: '#00b96b',
    },
    componentThemeConfig: {
      DatePicker: {
        cellActiveWithRangeBg: 'red'
      }
    }
  };

  if(!sessionToken){
    return <></>
  }

  return <FileSDK {...initData} />;
}

Document Component Params

| Property | Description | Type | Required | Default | |-----------------------------------------------------------------|-------------------------------------------------------------------------------------|------------------------------------------------------------------------|----------|---------------------------------------------------------------------------------------------------------------| | apiDomain | Request API service address | string | true | 'https://api-dev.accelerationcloud.com' | | token | Access token | string | true | - | | path | Display data root path | string | false | - | | fileUploadAccept | Limit file upload types | string | false | - | | permissions | Operation menu permission control | boolean | permissionsConfig | false | true | | downloadConfig | Download config | object | false | {allVersion: {hidden: false, defaultValue: false}, containsSubFolders: {hidden: false, defaultValue: true}} | | callbackConfig | Trigger callback function after specific logic execution | object | false | - | | folderTreeConfig | Related configurations for the folder tree on the left | object | false | {folderTreeHidden: false, folderTreeShowCollapse: false } | | fileListConfig | Related configurations for the file list on the right | object | false | - | | themeConfig | Configure custom theme colors | object | false | {primaryRegular: '#1634A4', primaryHoverRegular: '#3555B6'} | | componentThemeConfig | The theme config for some components | object | false | - |

Path

• The file system has a default root folder: Files.
• If the path is not configured, all data can be viewed and operated.
• If the path is configured, only data under this path can be viewed and operated.
• Path rules:
  • Starting with: /
  • Cannot exist continuously: /
  • Cannot contain special characters: * ? " < > : |
• Example: Only data in the My Folder folder under the root directory can be viewed and operated.

  path: '/My Folder'

File Upload Accept

• Limit the types of uploaded files, see details: input accept Attribute.
• Use commas to concatenate file suffixes.
• Example: Only JPG images and TXT files can be uploaded.

  fileUploadAccept: '.jpg, .txt'

Permissions Config

| Property | Description | |------------------------|---------------------------------------| | createPermission | Folder create permission | | uploadPermission | Files and folders upload permission | | downloadPermission | Files and folders download permission | | deletePermission | Files and folders delete permission | | renamePermission | Files and folders rename permission | | copyPermission | Files and folders copy permission | | movePermission | Files and folders move permission | | duplicatePermission | File duplicate permission | | fileEditPermission | File edit permission | | versionsPermission | File version view permission | | versionsEditPermission | File version edit permission | | historyPermission | File history view permission |

• The property type is boolean.
• When the permissions parameter is of boolean type, it controls whether the above permissions are simultaneously owned or not.
• When the permissions parameter is of object type, the above permissions default to false and need to be configured separately.
• Example: Among the above permissions, only the permission to upload and delete files is granted.

  permissions: {
    uploadPermission: true,
    deletePermission: true
  }

Download Config

| Property | Description | |--------------------|------------------------------------| | allVersion | Download version checkbox config | | containsSubFolders | Download subfolder checkbox config |

• The property type is object. Each property has two fixed configurable items:
  • hidden: Hide checkbox on page. boolean
  • defaultValue: Checkbox default value. boolean
• By default, both checkboxes are displayed during download.
• When selecting a folder, it defaults to downloading subfolders together.
• Example: When downloading, the file version is not downloaded by default, and the checkbox for changing this configuration is hidden.

  downloadConfig: {
    allVersion: {
      hidden: true,
      defaultValue: true
    }
  }

Callback Config

| Property | Description | |------------------------|--------------------------------------------------------------------------------------| | onCreateFolderCallback | Trigger callback function after creating folder | | onDeleteCallback | Trigger callback function after deleting files and folders | | onUploadCallback | After uploading files and folders, close the modal and trigger the callback function |

• The property type is function.
• We will execute the incoming callback function asynchronously.
• We will pass the execution result to the callback function.
• Example 1: If you want to trigger your own logic after creating a folder.

  // params
  callbackConfig: {
    onCreateFolderCallback: async (res) => {
      console.log('res', res);
    }
  }

  // We will send back the result of creating the folder
  let result;
  // success
  result = {
    code: 200,
    // If it is an delete callback, the data will return multiple pieces of data
    data: {
      path: "/test/New Folder",
      acId: "1722535223718kOHCT",
      itemName: "New Folder",
      fileType: "folder",
      version: null,
      versionId: "3HhE7XJGin2U95e8pUE9W7pE11sM9juY",
      size: "0 bytes",
      dateModified: "2024-08-01T17:29:57.697385",
      lastUpdatedBy: "sds sds"
     },
    error: null,
    errorMsg: null
  };
  // fail
  result = {
    code: 400, 599....,
    data: null,
    error: null,
    errorMessage: 'This is error message.'
  };
  onCreateFolderCallback(result);

• Example 2: If you want to trigger your own logic after upload folders and files.

  // params
  callbackConfig: {
    onUploadCallback: async (res) => {
      console.log('res', res);
    }
  }

  // We will return the results after uploading all folders and files and closing the modal
  const result = [
    successFolders: [/test/New Folder1, /test/New Folder2],
    failFolders: [/test/New Folder3],
    successFiles: [/test/a.txt, /test/New Folder1/b.txt, /test/New Folder2/c.txt],
    failFiles: [/test/d.txt, /test/New Folder3/e.txt]
  ];
  onUploadCallback(result);

Folder Tree Config

| Property | Description | |---------------------------------|----------------------------------------------------------| | folderTreeHidden | Hide the left folder tree | | folderTreeShowCollapse | The left folder tree display expand or collapse button | | folderTreeCollapseDefaultHidden | The left folder tree is expanded or collapsed by default |

• The property type is boolean.
• Example: Hide the left-hand directory tree.

  folderTreeConfig: {
    folderTreeHidden: true
  }

File List Config

| Property | Description | |--------------------------------------------------------------------------------|--------------------------------------------------------------| | customizeFileTableColumnToShow | Customize the files table columns that need to be displayed. | | customizeTableDetail | Display detailed information about files or folders. | | customizeTablePageSizeOptions | Number of custom file table pagination queries. | | customizeDefaultTablePageSize | Default number of query entries for custom file tables. | | customizeTableHeight | Default height of file table. |

• Example: The configuration file list does not display the version column.

  fileListConfig: {
    customizeFileTableColumnToShow: ['fileSize', 'createdDate', 'uploadedBy']
  }

customizeFileTableColumnToShow

• Multiple display fields can be configured from ['versionCount', 'fileSize', 'createdDate', 'uploadedBy'].
• The item name remains displayed and cannot be configured.

customizeTableDetail

• Multiple display fields can be configured from ['modified', 'lastUpdatedBy', 'size', 'path'].
• The item name remains displayed and cannot be configured.

customizeTablePageSizeOptions

• default set [10,20,30,40,50].
• The number in the array must be an integer greater than 0.

customizeDefaultTablePageSize

• default set 10.
• If necessary, please use it in conjunction with customizeTablePageSizeOptions, otherwise it will default to 10 items.
• You need to select the number in customizeTablePageSizeOptions.
• Of course, if you need 10 displays and customizeTablePageSizeOptions contains 10, there is no need to configure them.

customizeTableHeight

• The default attribute is true, indicating that the height of the table can reach up to 10 data points. If the page size is greater than 10 data points, a scrollbar will appear.
• If the value is false, there will be no height limit, which means there won't be a scrollbar.
• If the type of value is number, it will be the height of the table(the default unit is px).
• If the type of value is string, it will be the height of the table, but height units need to be added (such as 12px, 12rem...).
• Only three units of em, rem, and px are provided.

Theme Config

| Property | Description | |------------------------------------------------------------------|---------------------------------| | primaryRegular | Whole primary color | | primaryHoverRegular | Whole primary hover color |

• Please try to use hex format colors as much as possible.
• Example: Set the theme color to #de3512.

  themeConfig: {
    primaryRegular: '#de3512'
  }

Component Theme Config

• Tree

| Parameter | Description | |---------------|-----------------------| | colorPrimary | file tree theme color |

• Tabs

| Parameter | Description | |----------------|-----------------------| | colorPrimary | tabs theme color | | itemHoverColor | file tree theme color |

• Button

| Parameter | Description | |----------------|--------------------------| | colorPrimary | Button theme color | | itemHoverColor | Button hover theme color |

• Table

| Parameter | Description | |--------------------|----------------------------------------------------------------------------| | colorPrimary | table theme color | | rowHoverBg | background color of table hovered row | | rowSelectedBg | background color of table selected row | | rowSelectedHoverBg | background color of the selected row in the table that has been hover over |

• Input

| Parameter | Description | |-------------------|--------------------------| | activeBorderColor | Input active theme color | | hoverBorderColor | Input hover theme color |

• Select

| Parameter | Description | |------------------|----------------------------------| | optionSelectedBg | option selected background color |

• DatePicker

| Parameter | Description | |--------------------------------------|----------------------------------------------------| | cellActiveWithRangeBg | option selected background color |

• Example: Configure the colors of the tree component and date component separately.

  componentThemeConfig: {
    Tree: {
      colorPrimary: '#cf5656',
    },
    DatePicker: {
      cellActiveWithRangeBg: '#ac3512'
    }
  }