@fintech-automation/file-sdk v0.0.1-beta

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

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

• 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

• 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

• 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

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

  folderTreeConfig: {
    folderTreeHidden: true
  }

File List Config

• 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

• 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'
    }
  }