From eed8c04fdbd2da08867a21e05b91569bd2d410d0 Mon Sep 17 00:00:00 2001
From: Sodbileg Gansukh <sodbileg.gansukh@gmail.com>
Date: Tue, 17 Dec 2024 16:18:53 +0800
Subject: [PATCH] Added accept parameter to FileUpload component

---
 apps/admin-x-design-system/src/global/form/FileUpload.tsx    | 5 +++--
 .../advanced/migrationtools/UniversalImportModal.tsx         | 1 +
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/admin-x-design-system/src/global/form/FileUpload.tsx b/apps/admin-x-design-system/src/global/form/FileUpload.tsx
index 02218ab843..8f1711f002 100644
--- a/apps/admin-x-design-system/src/global/form/FileUpload.tsx
+++ b/apps/admin-x-design-system/src/global/form/FileUpload.tsx
@@ -16,9 +16,10 @@ export interface FileUploadProps {
     style?: CSSProperties;
     unstyled?: boolean;
     inputRef?: React.RefObject<HTMLInputElement>;
+    accept?: string;
 }
 
-const FileUpload: React.FC<FileUploadProps> = ({id, onUpload, children, style, unstyled = false, inputRef, className, dragIndicatorClassName, ...props}) => {
+const FileUpload: React.FC<FileUploadProps> = ({id, onUpload, children, style, unstyled = false, inputRef, className, dragIndicatorClassName, accept, ...props}) => {
     const [fileKey, setFileKey] = useState<number>(Date.now());
     const [isDragging, setIsDragging] = useState(false);
 
@@ -52,7 +53,7 @@ const FileUpload: React.FC<FileUploadProps> = ({id, onUpload, children, style, u
     return (
         <label className={clsx('relative', className)} htmlFor={id} style={style} onDragEnter={handleDragging} onDragLeave={handleStopDragging} onDragOver={handleDragging} onDrop={handleDrop} {...props}>
             <div className={clsx({'absolute inset-1 rounded': true, 'border-2 border-dashed border-grey-400/25': isDragging}, isDragging && [dragIndicatorClassName])} />
-            <input key={fileKey} ref={inputRef || null} id={id} type="file" hidden onChange={handleFileChange} />
+            <input key={fileKey} ref={inputRef || null} accept={accept} id={id} type="file" hidden onChange={handleFileChange} />
             {(typeof children === 'string') ?
                 <div className={!unstyled ? `inline-flex h-[34px] cursor-pointer items-center justify-center rounded px-4 text-sm font-semibold hover:bg-grey-100 dark:text-white dark:hover:bg-grey-900` : ''}>
                     {children}
diff --git a/apps/admin-x-settings/src/components/settings/advanced/migrationtools/UniversalImportModal.tsx b/apps/admin-x-settings/src/components/settings/advanced/migrationtools/UniversalImportModal.tsx
index e2ad85124a..23c07fa51d 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/migrationtools/UniversalImportModal.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/migrationtools/UniversalImportModal.tsx
@@ -20,6 +20,7 @@ const UniversalImportModal: React.FC = () => {
         >
             <div className='py-4 leading-9'>
                 <FileUpload
+                    accept="application/json, application/zip"
                     id="import-file"
                     onUpload={async (file) => {
                         setUploading(true);