diff --git a/src/client/routes/home/index.jsx b/src/client/routes/home/index.jsx index d1805cbc..b7fbfbbd 100644 --- a/src/client/routes/home/index.jsx +++ b/src/client/routes/home/index.jsx @@ -43,6 +43,8 @@ import { createSecret, burnSecret } from '../../api/secret'; import { generateKey, encrypt } from '../../../shared/helpers/crypto'; import { useTranslation } from 'react-i18next'; +import style from './style.module.css'; + const DEFAULT_TTL = 259200; // 3 days - 72 hours const Home = () => { @@ -215,6 +217,12 @@ const Home = () => { } }; + const removeFile = (index) => { + const updatedFiles = [...form.values.files]; + updatedFiles.splice(index, 1); + form.setFieldValue('files', updatedFiles); + }; + const handleFocus = (event) => event.target.select(); const getSecretURL = (withEncryptionKey = true) => { @@ -399,8 +407,18 @@ const Home = () => { {form.values.files?.length > 0 && ( - {form.values.files.map((file) => ( - + {form.values.files.map((file, index) => ( + + removeFile(index)} + > + × + {file.name} ))} diff --git a/src/client/routes/home/style.module.css b/src/client/routes/home/style.module.css new file mode 100644 index 00000000..c28390f4 --- /dev/null +++ b/src/client/routes/home/style.module.css @@ -0,0 +1,17 @@ +.file-badge { + padding-left: 0; +} + +.file-remove { + background: none; + color: red; + cursor: pointer; + padding: 0 5px; + margin-right: 5px; +} + +.file-remove:hover { + /* background: #602e12; */ + background: red; + color: white; +}