Rework upload file while creating LibraryItem

rsconcept/frontend/src/pages/CreateRSFormPage.tsx

@@ -1,18 +1,21 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { toast } from 'react-toastify';
 
 import BackendError from '../components/BackendError';
 import Button from '../components/Common/Button';
 import Checkbox from '../components/Common/Checkbox';
-import FileInput from '../components/Common/FileInput';
 import Form from '../components/Common/Form';
+import Label from '../components/Common/Label';
+import MiniButton from '../components/Common/MiniButton';
 import SubmitButton from '../components/Common/SubmitButton';
 import TextArea from '../components/Common/TextArea';
 import TextInput from '../components/Common/TextInput';
+import { UploadIcon } from '../components/Icons';
 import RequireAuth from '../components/RequireAuth';
 import { useLibrary } from '../context/LibraryContext';
 import { useConceptNavigation } from '../context/NagivationContext';
+import { EXTEOR_TRS_FILE } from '../utils/constants';
 import { IRSFormCreateData, LibraryItemType } from '../utils/models';
 
 function CreateRSFormPage() {
@@ -24,20 +27,15 @@ function CreateRSFormPage() {
   const [alias, setAlias] = useState('');
   const [comment, setComment] = useState('');
   const [common, setCommon] = useState(false);
-  const [file, setFile] = useState<File | undefined>()
+
+  const [fileName, setFileName] = useState('');
+  const [file, setFile] = useState<File | undefined>();
+  const inputRef = useRef<HTMLInputElement | null>(null);
 
   useEffect(() => {
     setError(undefined);
   }, [title, alias, setError]);
 
-  function handleFile(event: React.ChangeEvent<HTMLInputElement>) {
-    if (event.target.files && event.target.files.length > 0) {
-      setFile(event.target.files[0]);
-    } else {
-      setFile(undefined);
-    }
-  }
-
   function handleCancel() {
     if (location.key !== 'default') {
       navigateHistory(-1);
@@ -67,12 +65,39 @@ function CreateRSFormPage() {
     });
   }
 
+  function handleFileChange(event: React.ChangeEvent<HTMLInputElement>) {
+    if (event.target.files && event.target.files.length > 0) {
+      setFileName(event.target.files[0].name);
+      setFile(event.target.files[0]);
+    } else {
+      setFileName('');
+      setFile(undefined);
+    }
+  }
+
   return (
     <RequireAuth>
     <Form title='Создание концептуальной схемы' 
       onSubmit={handleSubmit}
       widthClass='max-w-lg w-full mt-4'
     >
+      <div className='relative w-full'>
+      <div className='absolute top-[-2.4rem] right-[-1rem] flex'>
+        <input
+          type='file'
+          ref={inputRef}
+          style={{ display: 'none' }}
+          accept={EXTEOR_TRS_FILE}
+          onChange={handleFileChange}
+        />
+        <MiniButton
+          tooltip='Загрузить из Экстеор'
+          icon={<UploadIcon size={5} color='text-primary'/>}
+          onClick={() => inputRef.current?.click()}
+        />
+      </div>
+      </div>
+      { fileName && <Label text={`Загружен файл: ${fileName}`} />}
       <TextInput id='title' label='Полное название' type='text'
         required={!file}
         placeholder={file && 'Загрузить из файла'}
@@ -95,11 +120,6 @@ function CreateRSFormPage() {
         value={common}
         setValue={value => setCommon(value ?? false)}
       />
-      <FileInput id='trs' label='Загрузить из Экстеор'
-        acceptType='.trs'
-        onChange={handleFile}
-      />
-
       <div className='flex items-center justify-center gap-4 py-2 mt-4'>
         <SubmitButton 
           text='Создать схему'

rsconcept/frontend/src/pages/RSFormPage/DlgUploadRSForm.tsx

@@ -5,6 +5,7 @@ import Checkbox from '../../components/Common/Checkbox';
 import FileInput from '../../components/Common/FileInput';
 import Modal from '../../components/Common/Modal';
 import { useRSForm } from '../../context/RSFormContext';
+import { EXTEOR_TRS_FILE } from '../../utils/constants';
 import { IRSFormUploadData } from '../../utils/models';
 
 interface DlgUploadRSFormProps {
@@ -47,7 +48,7 @@ function DlgUploadRSForm({ hideWindow }: DlgUploadRSFormProps) {
       <div className='flex flex-col items-center'>
         <FileInput
           label='Выбрать файл'
-          acceptType='.trs'
+          acceptType={EXTEOR_TRS_FILE}
           onChange={handleFile}
         />
         <Checkbox

rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx

@@ -14,7 +14,7 @@ import { useConceptNavigation } from '../../context/NagivationContext';
 import { useRSForm } from '../../context/RSFormContext';
 import { useConceptTheme } from '../../context/ThemeContext';
 import useModificationPrompt from '../../hooks/useModificationPrompt';
-import { prefixes, TIMEOUT_UI_REFRESH } from '../../utils/constants';
+import { EXTEOR_TRS_FILE, prefixes, TIMEOUT_UI_REFRESH } from '../../utils/constants';
 import { ICstCreateData, ICstRenameData, SyntaxTree } from '../../utils/models';
 import { createAliasFor } from '../../utils/staticUI';
 import DlgCloneRSForm from './DlgCloneRSForm';
@@ -256,7 +256,7 @@ function RSTabs() {
         return;
       }
     }
-    const fileName = (schema?.alias ?? 'Schema') + '.trs';
+    const fileName = (schema?.alias ?? 'Schema') +  EXTEOR_TRS_FILE;
     download(
     (data) => {
       try {

rsconcept/frontend/src/utils/constants.ts

@@ -5,6 +5,8 @@ export const config = {
 export const TIMEOUT_UI_REFRESH = 100;
 export const TIMEOUT_GRAPH_REFRESH = 200;
 
+export const EXTEOR_TRS_FILE = '.trs';
+
 export const youtube = {
   intro: '0Ty9mu9sOJo'
 };