npm package: @rhc-shared-components/file-upload-component
Description: File upload component for Red Hat certified technology apps
Author: shkale
Latest version: 1.0.0

# @rhc-shared-components/file-upload-component

> File upload component for Red Hat Certified Apps

[![NPM](https://img.shields.io/npm/v/@rhc-shared-components/rich-text-editor.svg)](https://www.npmjs.com/package/@rhc-shared-components/rich-text-editor) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
yarn add @rhc-shared-components/file-upload-component
```

## Usage

```tsx
import React from 'react';
import {
  FileUploadComponent,
  FileUploadFormComponent,
  FileuploadTypes,
  UploadSates
} from '@rhc-shared-components/file-upload-component';
import avatarImg from './assets/avatar_image.svg';
import { Grid, GridItem } from '@patternfly/react-core';
import { Formik } from 'formik';

const App = () => {
  const [fileUrl, setFileUrl] = React.useState('');
  const FieldName = 'upload file';
  const onchange = (fileData: any) => {
    const data = fileData[0];
    const reader = new FileReader();
    reader.onload = (e: any) => {
      setFileUrl(e.target.result);
    };
    reader.readAsDataURL(data);
  };
  return (
    <Grid>
      <GridItem>
        <FileUploadComponent
          name={'logo.url'}
          label='File Upload component'
          buttonMessage='Upload thumbnail image'
          popoverHeading={'Logo best practices'}
          popoverMessage={
            'If you have multiple logo format, we recommend use a logo with transparent background, no border, and square versus rectangular shape. '
          }
          fileTypesAllowed={['svg', 'png']}
          removeMessage={'Remove logo'}
          maxSize={5}
          readonly={false}
          uniqueId={'fm'}
          fileuploadType={FileuploadTypes.AVATAR}
          uploadState={UploadSates.INITIAL}
          avatarImg={avatarImg}
          fileUrl={fileUrl}
          onChange={(fileData: any) => onchange(fileData)}
        />
      </GridItem>
      <GridItem>
        <Formik
          initialValues={{
            [FieldName]: '<h1>Hello world</h1>'
          }}
          enableReinitialize={true}
          onSubmit={() => {
          }}
        >
          <FileUploadFormComponent
            name={FieldName}
            label='File Upload Component with Formik'
            helperText={'This is a test description'}
            isRequired={true}
            fileuploadType={FileuploadTypes.AVATAR}
            uploadState={UploadSates.INITIAL}
            avatarImg={avatarImg}
            fileUrl={fileUrl}
            onChange={(fileData: any) => onchange(fileData)}
          />
        </Formik>
      </GridItem>
    </Grid>
  );
};

export default App;

```

## Props

| Name  |  Type  |  Default | Description |
| :------------- | :----------: | -----------: | -----------: |
|  name | string  | " "  | Adds a name to your component||
| label  |   string|   " "|  Adds a title to your component
| buttonMessage  | string  | " "  | Adds a message to the upload button  |   |
| fileuploadType |FileuploadTypes|FileuploadTypes.AVATAR or FileuploadTypes.LOGOFRAME| depending upon the value it would either put the avatar component from patternfly or simply put a rectangular frame | |
|uploadState|UploadStates|UploadStates.INITIAL or UploadStates.UPLOADING or UploadStates.DONE|Adds or removes the spinner||
|removeMessage|string|" "|Adds the message for removing the uploaded file||
|fileTypesAllowed| string[]|[]| checks for the added file types ||
|maxSize|number|| max size of the file in MB you want to upload||
|uniqueId|number|| Sets the unique id for the component|
|readonly|boolean|  | Adds disabled styling and disables the button using the disabled html attribute||
|onChange| (fileData: FileList) => void | |A callback for when the file contents change. |

## License

MIT © [shkale](https://gitlab.cee.redhat.com/shkale/rhc-account)