FileCloudUpload - REACT

A simple form to upload your files to FileCloud with React.

PREREQUISITES

You must have at least React 17.0.2 and React Dom 17.0.2

INSTALL

npm install @adamantic/filecloud-upload-react

USAGE

Import FileCloudUpload inside the component where you need to use it.

import { FileCloudUpload } from 'filecloud-upload-react/dist/cjs';

<FileCloudUpload />

| WARNING: FileCloudUpload needs some mandatory props. Read below to find out how to use it. | | --- |

PROPS

| N.B.: Default values are not currently implemented. Configure everything before using. | | --- |

interface FileCloudUploadProps {
  serverUrl: string; // the server base url
  fileCloudRequestCode: string; // the request code to authenticate on FileCloud
  title?: string; // a title on the component's top -- OPTIONAL
  closeIcon: any; // an icon shown to remove uploaded document
  loader: any; // a loader (icon / component / text ) to show inside the submit button
  onSuccess: () => void; // a function to run on upload success
  onFailure: () => void; // a function to run on upload failure
  tabsToShow: DocumentTabItem[]; // Look on the next block
  fileCloudProperties: CssProperties; // Look on the next block
};

interface DocumentTabItem {
    name: 'ID_CARD' | 'PASSPORT'; // ID_CARD has two sides two load, passport only one
    title: string; // shown inside the tab
    placeholderButton: string; 
    // If tab item has more then one side to load, with the placeholder is shown the index"
}


interface CssProperties {
  backgroundColor: string;
  padding: string;
  title: {
    color: string;
    fontSize: string;
  };
  tabsContainer: {
    marginRight: string;
    marginLeft: string;
    marginTop: string;
    marginBottom: string;
    tabStyle: {
      marginRight: string;
      marginLeft: string;
      activeBorderBottomColor: string;
      color: string;
    };
  };
  form: {
    fieldsPerRow: number;
    fieldHeight: string;
    fieldPaddingLeft: string;
    fieldPaddingRight: string;
    fieldMarginTop: string;
    fieldMarginBottom: string;
    fieldMarginRight: string;
    fieldMarginLeft: string;
    backgroundColor: string;
    borderRadius: string;
    color: string;
    borderColor: string;
    documentsNotValidErrorMessage: string;
    sendButtonText: string;
    labels: {
      name: string;
      expiryDate: string;
      issuingCountry: string;
    };
    placeholders: {
      name: string;
      expiryDate: string;
      issuingCountry: string;
    };
  };
  button: {
    marginTop: string;
    marginBottom: string;
    borderColor: string;
    width: string;
    color: string;
    height: string;
    backgroundColor: string;
    borderRadius: string;
  };
};