fix: handle multiple files when allow edit is turned off

Author: akhlopiachyi

src/components/FileUpload/index.tsx

@@ -132,6 +132,12 @@ export const FileUpload: FC<FileUploadProps> = ({
     }
   }, [files]);
 
+  useEffect(() => {
+    if (!isDataEditable && files.length > 1) {
+      setFiles([files[0]]);
+    }
+  }, [files, isDataEditable]);
+
   const removeFile = useCallback((name: string) => {
     setFiles((prev) => prev.filter((file) => file.name !== name));
   }, [files]);

src/components/NFTMultipleData/index.tsx

@@ -1,5 +1,5 @@
 import { useAppDispatch, useAppSelector } from "@/store/hooks";
-import { FC, Fragment, useCallback, useMemo } from "react";
+import { FC, Fragment, useCallback, useEffect, useMemo } from "react";
 import { addDataToMultipleData, setNFTMultipleData } from "@/features/nft/nftSlice";
 import { FileUpload } from "../FileUpload";
 import { Input } from "../Input";
@@ -51,6 +51,12 @@ export const NFTMultipleData: FC<NFTMultipleDataProps> = ({ isDataEditable }: NF
     }
   }, []);
 
+  useEffect(() => {
+    if (!isDataEditable && nftMultipleData.length > 1) {
+      dispatch(setNFTMultipleData([...nftMultipleData.slice(0, 1)]));
+    }
+  }, [isDataEditable, nftMultipleData]);
+
   const renderContentData = useMemo(() => {
     if (!isDataEditable) {
       return (