From 2a82fd68011352019eebb352795a8ba874827b2f Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Mon, 17 Mar 2025 16:11:52 +0600
Subject: [PATCH] Enhance FilePreview story by adding file input reference and
 resetting value on file removal

---
 src/components/file-preview/file-preview.stories.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/file-preview/file-preview.stories.tsx b/src/components/file-preview/file-preview.stories.tsx
index d7901548..e1e022b2 100644
--- a/src/components/file-preview/file-preview.stories.tsx
+++ b/src/components/file-preview/file-preview.stories.tsx
@@ -1,7 +1,7 @@
 import { Meta, StoryFn } from '@storybook/react';
 import { FilePreview, FilePreviewFile, FilePreviewProps } from './file-preview';
 import { Input } from '@/index';
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 
 type InputValue = string | FileList | null;
 
@@ -65,6 +65,7 @@ DisabledState.args = {
 };
 
 export const FileInputWithPreview: Story = ( args ) => {
+	const fileInputRef = useRef<HTMLInputElement>( null );
 	const [ selectedFile, setSelectedFile ] = useState<File | null>( null );
 
 	const handleFileChange = ( value: InputValue ) => {
@@ -85,6 +86,7 @@ export const FileInputWithPreview: Story = ( args ) => {
 	return (
 		<>
 			<Input
+				ref={ fileInputRef }
 				label="Upload File"
 				type="file"
 				size="md"
@@ -97,7 +99,12 @@ export const FileInputWithPreview: Story = ( args ) => {
 					<FilePreview
 						{ ...args }
 						file={ selectedFile }
-						onRemove={ () => setSelectedFile( null ) }
+						onRemove={ () => {
+							setSelectedFile( null );
+							if ( fileInputRef.current ) {
+								fileInputRef.current.value = '';
+							}
+						} }
 					/>
 				</div>
 			) }