feat: url fetch and create file (#199)

* docs

* docs

* feat: url fetch and create file

client/src/hooks/useSelectFile.tsx

@@ -1,8 +1,12 @@
 import React, { useRef, useCallback } from 'react';
 import { Box } from '@chakra-ui/react';
+import { useToast } from './useToast';
+import { useTranslation } from 'react-i18next';
 
 export const useSelectFile = (props?: { fileType?: string; multiple?: boolean }) => {
+  const { t } = useTranslation();
   const { fileType = '*', multiple = false } = props || {};
+  const { toast } = useToast();
   const SelectFileDom = useRef<HTMLInputElement>(null);
 
   const File = useCallback(
@@ -15,12 +19,18 @@ export const useSelectFile = (props?: { fileType?: string; multiple?: boolean })
           multiple={multiple}
           onChange={(e) => {
             if (!e.target.files || e.target.files?.length === 0) return;
+            if (e.target.files.length > 10) {
+              return toast({
+                status: 'warning',
+                title: t('file.Select a maximum of 10 files')
+              });
+            }
             onSelect(Array.from(e.target.files));
           }}
         />
       </Box>
     ),
-    [fileType, multiple]
+    [fileType, multiple, t, toast]
   );
 
   const onOpen = useCallback(() => {