added acceptableFileFormat prop to inputImage (#14)

Co-authored-by: Ruggero <[email protected]>
aragon · Jul 25, 2023 · 8bcd5df · 8bcd5df
1 parent 13f2506
commit 8bcd5df
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### 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
@@ -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
@@ -34,6 +34,10 @@ export type InputImageSingleProps = {
      * Passing image src for preview
      */
     preview?: string;
+    /**
+     * acceptable image formats
+     */
+    acceptableFileFormat?: string;
 };
 
 export const InputImageSingle: React.FC<InputImageSingleProps> = ({
@@ -43,6 +47,7 @@ export const InputImageSingle: React.FC<InputImageSingleProps> = ({
     maxFileSize,
     onlySquare = false,
     preview: previewSrc = '',
+    acceptableFileFormat = 'image/jpg, image/jpeg, image/png, image/gif, image/svg+xml',
     onError,
 }) => {
     const [loading, setLoading] = useState<boolean>(false);
@@ -96,7 +101,7 @@ export const InputImageSingle: React.FC<InputImageSingleProps> = ({
     } = useDropzone({
         onDrop,
         ...(maxFileSize && { maxSize: maxFileSize }),
-        accept: 'image/jpg, image/jpeg, image/png, image/gif, image/svg+xml',
+        accept: acceptableFileFormat,
     });
 
     if (loading) {