0.2.5 • Published 1 year ago
@rhc-shared-components/file-upload-component v0.2.5
@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
0.1.10
1 year ago
0.1.11
1 year ago
0.2.1
1 year ago
0.2.0
1 year ago
0.2.3
1 year ago
0.2.2
1 year ago
0.2.5
1 year ago
0.2.4
1 year ago
0.1.2
2 years ago
0.1.8
2 years ago
0.1.4
2 years ago
0.1.3
2 years ago
0.1.6
2 years ago
0.1.5
2 years ago
0.1.0
2 years ago
0.1.1
2 years ago
0.0.8
3 years ago
0.0.7
3 years ago
0.0.3
3 years ago
0.0.5
3 years ago
0.0.4
3 years ago
0.0.6
3 years ago
0.0.2
3 years ago