Drag and drop files (#283)

* Add file drop

* Skip if no files are droped

* Show the page is not accepting file on the welcome page
This commit is contained in:
ginnyTheCat 2022-02-03 15:40:22 +01:00 committed by GitHub
parent b155d7d1ba
commit 552a324e08
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 32 additions and 1 deletions

View file

@ -58,9 +58,11 @@ function RoomViewInput({
useEffect(() => {
settings.on(cons.events.settings.MARKDOWN_TOGGLED, setIsMarkdown);
roomsInput.on(cons.events.roomsInput.ATTACHMENT_SET, setAttachment);
viewEvent.on('focus_msg_input', requestFocusInput);
return () => {
settings.removeListener(cons.events.settings.MARKDOWN_TOGGLED, setIsMarkdown);
roomsInput.removeListener(cons.events.roomsInput.ATTACHMENT_SET, setAttachment);
viewEvent.removeListener('focus_msg_input', requestFocusInput);
};
}, []);

View file

@ -12,6 +12,8 @@ import EmojiBoardOpener from '../../organisms/emoji-board/EmojiBoardOpener';
import logout from '../../../client/action/logout';
import initMatrix from '../../../client/initMatrix';
import navigation from '../../../client/state/navigation';
import cons from '../../../client/state/cons';
function Client() {
const [isLoading, changeLoading] = useState(true);
@ -54,8 +56,34 @@ function Client() {
</div>
);
}
const handleDrag = (e) => {
e.preventDefault();
if (!navigation.selectedRoomId) {
e.dataTransfer.dropEffect = 'none';
}
};
const handleDrop = (e) => {
e.preventDefault();
const roomId = navigation.selectedRoomId;
if (!roomId) return;
const { files } = e.dataTransfer;
if (!files) return;
const file = files[0];
initMatrix.roomsInput.setAttachment(roomId, file);
initMatrix.roomsInput.emit(cons.events.roomsInput.ATTACHMENT_SET, file);
};
return (
<div className="client-container">
<div
className="client-container"
onDragOver={handleDrag}
onDrop={handleDrop}
>
<div className="navigation__wrapper">
<Navigation />
</div>

View file

@ -108,6 +108,7 @@ const cons = {
},
roomsInput: {
MESSAGE_SENT: 'MESSAGE_SENT',
ATTACHMENT_SET: 'ATTACHMENT_SET',
FILE_UPLOADED: 'FILE_UPLOADED',
UPLOAD_PROGRESS_CHANGES: 'UPLOAD_PROGRESS_CHANGES',
FILE_UPLOAD_CANCELED: 'FILE_UPLOAD_CANCELED',