From 8bcd5dfb9a3b5d191f37a25eed4645a1ed445352 Mon Sep 17 00:00:00 2001
From: Sepehr Sanaei <46657145+sepehr2github@users.noreply.github.com>
Date: Tue, 25 Jul 2023 15:03:13 +0330
Subject: [PATCH] added acceptableFileFormat prop to inputImage (#14)

Co-authored-by: Ruggero <ruggero.cino@gmail.com>
---
 CHANGELOG.md                                      | 4 ++++
 src/components/input/inputImageSingle.stories.tsx | 1 +
 src/components/input/inputImageSingle.tsx         | 7 ++++++-
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 82f13f3bb..2a3216024 100644
--- 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
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<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) {