@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