diff --git a/app/soapbox/features/compose/editor/plugins/floating-block-type-toolbar-plugin.tsx b/app/soapbox/features/compose/editor/plugins/floating-block-type-toolbar-plugin.tsx index 404ff6188..e3c9bb673 100644 --- a/app/soapbox/features/compose/editor/plugins/floating-block-type-toolbar-plugin.tsx +++ b/app/soapbox/features/compose/editor/plugins/floating-block-type-toolbar-plugin.tsx @@ -26,7 +26,6 @@ import { defineMessages, useIntl } from 'react-intl'; import { uploadFile } from 'soapbox/actions/compose'; import { useAppDispatch, useInstance } from 'soapbox/hooks'; -import { onlyImages } from '../../components/upload-button'; import { $createImageNode } from '../nodes/image-node'; import { setFloatingElemPosition } from '../utils/set-floating-elem-position'; @@ -47,17 +46,24 @@ const UploadButton: React.FC = ({ onSelectFile }) => { const intl = useIntl(); const { configuration } = useInstance(); const dispatch = useAppDispatch(); + const [disabled, setDisabled] = useState(false); const fileElement = useRef(null); const attachmentTypes = configuration.getIn(['media_attachments', 'supported_mime_types']) as ImmutableList; const handleChange: React.ChangeEventHandler = (e) => { if (e.target.files?.length) { + setDisabled(true); + // @ts-ignore dispatch(uploadFile( e.target.files.item(0) as File, intl, - ({ url }) => onSelectFile(url), + ({ url }) => { + onSelectFile(url); + setDisabled(false); + }, + () => setDisabled(false), )); } }; @@ -66,11 +72,7 @@ const UploadButton: React.FC = ({ onSelectFile }) => { fileElement.current?.click(); }; - const src = ( - onlyImages(attachmentTypes) - ? require('@tabler/icons/photo.svg') - : require('@tabler/icons/paperclip.svg') - ); + const src = require('@tabler/icons/photo.svg'); return ( @@ -200,12 +201,12 @@ const BlockTypeFloatingToolbar = ({ > {editor.isEditable() && ( <> + - )}