Disable file drag-and-drop if insufficient permissions (#30186)

* Disable file drag-and-drop if insufficient permissions Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Add tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2025-06-24 13:26:03 +00:00
parent f707bb410e
commit 2b8f95a25b
5 changed files with 94 additions and 7 deletions
@@ -7,11 +7,14 @@ Please see LICENSE files in the repository root for full details.
 */

 import React, { useEffect, useState } from "react";
+import { type Room } from "matrix-js-sdk/src/matrix";

 import { _t } from "../../languageHandler";
 import UploadBigSvg from "../../../res/img/upload-big.svg";
+import { useRoomState } from "../../hooks/useRoomState.ts";

 interface IProps {
+    room: Room;
    parent: HTMLElement | null;
    onFileDrop(dataTransfer: DataTransfer): void;
 }
@@ -21,14 +24,15 @@ interface IState {
    counter: number;
 }

-const FileDropTarget: React.FC<IProps> = ({ parent, onFileDrop }) => {
+const FileDropTarget: React.FC<IProps> = ({ parent, onFileDrop, room }) => {
    const [state, setState] = useState<IState>({
        dragging: false,
        counter: 0,
    });
+    const hasPermission = useRoomState(room, (state) => state.maySendMessage(room.client.getUserId()!));

    useEffect(() => {
-        if (!parent || parent.ondrop) return;
+        if (!hasPermission || !parent || parent.ondrop) return;

        const onDragEnter = (ev: DragEvent): void => {
            ev.stopPropagation();
@@ -102,9 +106,9 @@ const FileDropTarget: React.FC<IProps> = ({ parent, onFileDrop }) => {
            parent?.removeEventListener("dragenter", onDragEnter);
            parent?.removeEventListener("dragleave", onDragLeave);
        };
-    }, [parent, onFileDrop]);
+    }, [parent, onFileDrop, hasPermission]);

-    if (state.dragging) {
+    if (hasPermission && state.dragging) {
        return (
            <div className="mx_FileDropTarget">
                <img src={UploadBigSvg} className="mx_FileDropTarget_image" alt="" />