diff --git a/rsconcept/frontend/src/pages/CreateRSFormPage.tsx b/rsconcept/frontend/src/pages/CreateRSFormPage.tsx index 1cb8147b..2cb13bdf 100644 --- a/rsconcept/frontend/src/pages/CreateRSFormPage.tsx +++ b/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() + + const [fileName, setFileName] = useState(''); + const [file, setFile] = useState(); + const inputRef = useRef(null); useEffect(() => { setError(undefined); }, [title, alias, setError]); - function handleFile(event: React.ChangeEvent) { - 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) { + 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 (
+
+
+ + } + onClick={() => inputRef.current?.click()} + /> +
+
+ { fileName &&