ibmwnr-file-uploader v1.0.7

File Uploader

This ibmwnr-file-uploader widget was extracted from HSIW of project WNR ShaleExploration. It is a React component made up by a upload dialog and a files list container. It allowing users to upload files and check the history of uploaded files. By default, basic styles are applied, but can be overridden. Some properties or api are offered to set up or control the status of widget.

Installation

1. Install ibmwnr-file-uploader using npm (or yarn). npm install ibmwnr-file-uploader
2. Import IbmwnrFileUploader to use this component.

Usage

-

API

The properties for all components

themeColor: Object

Override the default colors for buttons / links / highlight text to the widget, the format of this property is:

themeColor = {
      // primary button
      primaryColor: { 
        backgroundColor: "#ff5623",
        borderColor: "#c14019",
        backgroundHoverColor: "#ff8d6b",
      },
      // disabled primary button
      disableColor: { 
        borderColor: "#ff5623", 
      },
      // highlight text / links / text button
      subColor: { 
        color: "#08af21",
      }
    };

The properties for sub-component ButtonControls

uploadConfig: Object

Configuration of the allowed files, the format of this property is:

uploadConfig = {
      // string array of extensions
      fileExtension: [
            ".txt",
            ".csv",
            ".json",
      ],
      // unit could be ‘b’, ‘kb’, ‘mb’, ‘gb’
      maxSize: "256kb"
    };

title: String

Set the title of upload dialog by title attribute, the default value is "Upload Files".

note: String

Set the note of upload dialog by note attribute, in upload dialog, " Note: " was fixed for displaying, and the value of note will after the " Note: ".

multiple: Boolean

Set the multiple of upload widget by multiple attribute, the default value is true.

openUploadDialog: Boolean

Set the open/close states of upload dialog by openUploadDialog attribute, the default value is false.

isUploading: Boolean

Set the uploading/normal states of upload button in upload dialog by isUploading attribute, the default value is false(normal).

onGoBack: Function

Callback of clicking the ‘Back’ button.

onRefresh: Function

Callback of clicking the ‘Refresh’ button.

onOpen: Function

Callback of clicking the trigger button of upload dialog. Generally, you should set the openUploadDialog attribute to true in this callback function.

onClose: Function

Callback of clicking the 'X'(close) button in upload dialog. Generally, you should set the openUploadDialog attribute to false in this callback function.

onFileSelected: Function

A Callback function that takes browsed fileList object as the argument. This function may be used to verify the selected files. This function should return the array of file object if the verification passed successfully or return null if failed. It will be triggered when drag-drop or browse files to the upload form.

onConfirm: Function

A Callback function that takes the array of verified file object as argument. It will be triggered when clicking the ‘upload’ button of upload dialog.

The properties for sub-component FileHistoryList

filesList: Array\<Object>

An array list of DOM-wrapped file information. It will passed as the children of the filelist-container component. Example(use JSX syntax):

// use JSX syntax
filesList = [
      <div>Your Dom-wrapped File Information and maybe <button>some widget</button></div>,
      <div>Your Dom-wrapped File Information and maybe <button>some widget</button></div>,
      <div>Your Dom-wrapped File Information and maybe <button>some widget</button></div>,
]

pageSize: Number

Set the item number per page of the pagination of files list by pageSize attribute.

pageIndex: Number

Set the current page index of the pagination of files list by pageIndex attribute. The beginning number of page is 0.

total: Number

Set the total files number of the pagination of files list by total attribute.

onChangePage: Function

Callback on pagination changed. It takes the changed page index as the argument.

Development & Compiling

If you want to work on this project locally, please: 1. Use npm start to start the example for debugging. 2. Before compile new source, please remove the /lib folder manually. 3. To compile the source, please use npm run lib.