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

@ -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>