@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 {
  FileUploadComponent,
  FileUploadFormComponent,
  FileUploadTypes,
  UploadStates,
} 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] = useState("");
  const onchange = (fileData: FileList | null) => {
    if (fileData && fileData.length > 0) {
      const reader = new FileReader();
      reader.onload = (e) => {
        setFileUrl((e.target?.result as string) ?? "");
      };
      reader.readAsDataURL(fileData[0]);
    }
  };

  return (
    <Grid>
      <GridItem>
        <FileUploadComponent
          name="logo.url"
          replaced={false}
          buttonMessage="Upload thumbnail image"
          removeMessage="Remove logo"
          fileTypesAllowed={["svg", "png"]}
          maxSize={5}
          readonly={false}
          message="File types allowed: SVG, PNG (max size: 5 MB)"
          uniqueId="fm"
          fileuploadType={FileUploadTypes.AVATAR}
          uploadState={UploadStates.INITIAL}
          avatarImg={avatarImg}
          fileUrl={fileUrl}
          onChange={(fileData) => onchange(fileData)}
          imageAlt="Avatar preview"
        />
      </GridItem>
      <GridItem>
        <Formik
          initialValues={{ companyLogo: "" }}
          enableReinitialize={true}
          onSubmit={() => {}}
        >
          <FileUploadFormComponent
            name="companyLogo"
            replaced={false}
            label="File Upload Component with Formik"
            helperText="Upload your company logo"
            buttonMessage="Upload logo"
            isRequired={true}
            fileuploadType={FileUploadTypes.LOGOFRAME}
            uploadState={UploadStates.INITIAL}
            avatarImg={avatarImg}
            fileUrl={fileUrl}
            onChange={(fileData) => onchange(fileData)}
            imageAlt="Logo preview"
          />
        </Formik>
      </GridItem>
    </Grid>
  );
};

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 | AVATAR or LOGOFRAME | Renders avatar component or rectangular frame | | uploadState | UploadStates | INITIAL, UPLOADING, or DONE | Controls spinner display | | removeMessage | string | "" | Message for removing the uploaded file | | fileTypesAllowed | string[] | [] | Accepted file types | | maxSize | number | | Max file size in MB | | uniqueId | string | | Unique id for the component | | readonly | boolean | | Disables the upload button | | onChange | (fileData) => void| | Callback when file contents change | | imageAlt | string | | Alt text for the image preview |

Development

yarn dev       # Start dev server
yarn build     # Build the library
yarn lint      # Check linting
yarn lint-fix  # Auto-fix lint issues