Fix autofill image name

pkolt · Jul 6, 2024 · 1f398f9 · 1f398f9
1 parent 8378a05
commit 1f398f9
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 7 deletions.
diff --git a/src/pages/ImportFromImage/ImportForm/hooks/useImageUrl.ts b/src/pages/ImportFromImage/ImportForm/hooks/useImageUrl.ts
@@ -1,8 +1,9 @@
+import { capitalize } from '@/utils/string';
 import { useEffect } from 'react';
 
 interface ImageUrlHookParams {
   imageUrl?: string;
-  setImage: (value: FileList) => void;
+  setImage: (files: FileList, name: string) => void;
 }
 
 export const useImageUrl = ({ imageUrl, setImage }: ImageUrlHookParams): void => {
@@ -13,9 +14,10 @@ export const useImageUrl = ({ imageUrl, setImage }: ImageUrlHookParams): void =>
         const blob = await res.blob();
         const dataTransfer = new DataTransfer();
         const mimeType = 'image/svg+xml';
-        const name = imageUrl.split('/').at(-1) ?? '';
-        dataTransfer.items.add(new File([blob], name, { type: mimeType }));
-        setImage(dataTransfer.files);
+        const filename = imageUrl.split('/').at(-1) ?? '';
+        const name = capitalize(filename.split('.')[0].replaceAll('-', ' '));
+        dataTransfer.items.add(new File([blob], filename, { type: mimeType }));
+        setImage(dataTransfer.files, name);
       })();
     }
   }, [imageUrl, setImage]);

diff --git a/src/pages/ImportFromImage/ImportForm/index.tsx b/src/pages/ImportFromImage/ImportForm/index.tsx
@@ -59,16 +59,18 @@ export const ImportForm = ({ setBitmap, onSubmit, imageUrl }: ImportFormProps) =
   }, [onReset, reset]);
 
   const setImage = useCallback(
-    (value: FileList) => {
+    (files: FileList, name: string) => {
       const elem = document.getElementById(ID_FILE_INPUT);
       if (elem) {
-        setValue('files', value);
-        (elem as HTMLInputElement).files = value;
+        setValue('files', files);
+        (elem as HTMLInputElement).files = files;
+        setValue('name', name);
         setFocus('name');
       }
     },
     [setValue, setFocus],
   );
+
   useImageUrl({ imageUrl, setImage });
 
   useEffect(() => {