diff --git a/CHANGELOG.md b/CHANGELOG.md index 736d7f1f0..51f6f9345 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Changed the contents of IconCopy and IconLinkExternal - Added new icons - IconExplore, IconShrink, IconRadioPause, IconQuestion, and IconFailure +### Changed + +- a new variable named acceptableFileFormat added to inputImage Component + ## [0.2.7] - 2023-07-24 ### Changed diff --git a/src/components/input/inputImageSingle.stories.tsx b/src/components/input/inputImageSingle.stories.tsx index 875ffedd0..9d1cf1418 100644 --- a/src/components/input/inputImageSingle.stories.tsx +++ b/src/components/input/inputImageSingle.stories.tsx @@ -24,6 +24,7 @@ Single.args = { minDimension: 256, maxFileSize: 3000000, onlySquare: true, + acceptableFileFormat: 'image/jpg, image/jpeg, image/png, image/gif', onError: () => alert( 'Please provide a squared image (PNG, SVG, JPG or GIF) with a maximum of 3MB and size between 256px and 2400 px on each side', diff --git a/src/components/input/inputImageSingle.tsx b/src/components/input/inputImageSingle.tsx index 7fd8e0a6f..4aa70e10f 100644 --- a/src/components/input/inputImageSingle.tsx +++ b/src/components/input/inputImageSingle.tsx @@ -34,6 +34,10 @@ export type InputImageSingleProps = { * Passing image src for preview */ preview?: string; + /** + * acceptable image formats + */ + acceptableFileFormat?: string; }; export const InputImageSingle: React.FC = ({ @@ -43,6 +47,7 @@ export const InputImageSingle: React.FC = ({ maxFileSize, onlySquare = false, preview: previewSrc = '', + acceptableFileFormat = 'image/jpg, image/jpeg, image/png, image/gif, image/svg+xml', onError, }) => { const [loading, setLoading] = useState(false); @@ -96,7 +101,7 @@ export const InputImageSingle: React.FC = ({ } = useDropzone({ onDrop, ...(maxFileSize && { maxSize: maxFileSize }), - accept: 'image/jpg, image/jpeg, image/png, image/gif, image/svg+xml', + accept: acceptableFileFormat, }); if (loading) {