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

File upload component for Red Hat Certified Apps

Install

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

Usage

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