FromChat/web
1
0
Fork 0
mirror of https://github.com/fromchat-messenger/web.git synced 2026-09-22 19:15:08 +03:00
Code Issues Packages Projects Releases Wiki Activity

Implement file drag & drop

Browse Source
This commit is contained in:
denis0001-dev
2025-09-25 18:47:29 +03:00
Unverified
parent 1db2d55f76
commit 0fbdcd04c9
7 changed files with 181 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/routes/messaging.py
+3 -5
View File
@@ -41,11 +41,9 @@ def convert_message(msg: Message) -> dict:
"reply_to": convert_message(msg.reply_to) if msg.reply_to else None,
"files": [
{
"path": f"/api/files/{'encrypted' if f.encrypted else 'normal'}/{Path(f.path).name}",
"encrypted": f.encrypted,
"filename": f.filename,
"content_type": f.content_type,
"size": f.size,
"path": f"/api/uploads/files/normal/{Path(f.path).name}",
"id": f.id,
"message_id": f.message_id
}
for f in (msg.files or [])
]
frontend/src/resources/css/_chat.scss
+41
View File
@@ -65,6 +65,7 @@
display: flex;
flex-direction: column;
height: 100%;
position: relative;
.chat-header {
padding: 16px;
@@ -277,6 +278,46 @@
}
}
.file-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 100;
backdrop-filter: blur(20px);
.file-overlay-wrapper {
border-radius: 30px;
outline: 3px dashed $color-dark-primary;
outline-offset: -20px;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
.file-overlay-inner {
display: flex;
gap: 12px;
align-items: center;
padding: 12px 16px;
background: rgba(18, 18, 18, 0.8);
border: 1px solid $color-dark-surface-container-high;
border-radius: 12px;
color: $color-dark-on-surface;
mdui-icon {
color: $color-dark-primary;
}
}
}
}
.chat-input-wrapper {
position: relative;
margin: 0 20px 20px 20px;
frontend/src/ui/components/chat/ChatInputWrapper.tsx
+15 -1
View File
@@ -16,6 +16,7 @@ interface ChatInputWrapperProps {
editVisible?: boolean;
onClearEdit?: () => void;
onCloseEdit?: () => void;
onProvideFileAdder?: (adder: (files: File[]) => void) => void;
}
export function ChatInputWrapper(
@@ -29,7 +30,8 @@ export function ChatInputWrapper(
editingMessage,
editVisible = false,
onClearEdit,
onCloseEdit
onCloseEdit,
onProvideFileAdder
}: ChatInputWrapperProps
) {
const [message, setMessage] = useState("");
@@ -37,6 +39,18 @@ export function ChatInputWrapper(
const [attachmentsVisible, setAttachmentsVisible] = useState(false);
const [errorOpen, setErrorOpen] = useState(false);
// Expose a way for parent to programmatically add files
useEffect(() => {
if (onProvideFileAdder) {
const addFiles = (files: File[]) => {
if (!files || files.length === 0) return;
setSelectedFiles(prev => [...prev, ...files]);
setAttachmentsVisible(true);
};
onProvideFileAdder(addFiles);
}
}, [onProvideFileAdder]);
// When entering edit mode, preload the message content
useEffect(() => {
if (editingMessage) {
frontend/src/ui/components/chat/MessagePanelRenderer.tsx
+64 -1
View File
@@ -5,6 +5,7 @@ import { ChatInputWrapper } from "./ChatInputWrapper";
import { setGlobalMessageHandler } from "../../../core/websocket";
import type { Message } from "../../../core/types";
import defaultAvatar from "../../../resources/images/default-avatar.png";
import AnimatedOpacity from "../core/animations/AnimatedOpacity";
interface MessagePanelRendererProps {
panel: MessagePanel | null;
@@ -22,6 +23,20 @@ export function MessagePanelRenderer({ panel, isChatSwitching }: MessagePanelRen
const [editVisible, setEditVisible] = useState(Boolean(editMessage));
const [pendingAction, setPendingAction] = useState<null | { type: "reply" | "edit"; message: Message }>(null);
// Drag & drop
const [isDragging, setIsDragging] = useState(false);
const dragCounterRef = useRef(0);
const addFilesRef = useRef<null | ((files: File[]) => void)>(null);
useEffect(() => {
if (!panel || !panelState) return;
return () => {
dragCounterRef.current = 0;
setIsDragging(false);
};
}, [panel, panelState]);
useEffect(() => {
if (replyTo) {
setReplyToVisible(true);
@@ -116,7 +131,41 @@ export function MessagePanelRenderer({ panel, isChatSwitching }: MessagePanelRen
return (
<div className={`chat-container ${switchIn ? "chat-switch-in" : ""} ${switchOut ? "chat-switch-out" : ""}`}>
<div className="chat-main" id="chat-inner">
<div
className="chat-main"
id="chat-inner"
onDragEnter={(e) => {
if (!e.dataTransfer) return;
e.preventDefault();
e.stopPropagation();
dragCounterRef.current += 1;
// Only show overlay when actual files are dragged
const hasFiles = Array.from(e.dataTransfer.types || []).includes("Files");
if (hasFiles) setIsDragging(true);
}}
onDragOver={(e) => {
if (!e.dataTransfer) return;
e.preventDefault();
e.stopPropagation();
e.dataTransfer.dropEffect = "copy";
}}
onDragLeave={(e) => {
e.preventDefault();
e.stopPropagation();
dragCounterRef.current = Math.max(0, dragCounterRef.current - 1);
if (dragCounterRef.current === 0) setIsDragging(false);
}}
onDrop={(e) => {
if (!e.dataTransfer) return;
e.preventDefault();
e.stopPropagation();
const files = Array.from(e.dataTransfer.files || []);
if (files.length > 0 && addFilesRef.current) {
addFilesRef.current(files);
}
setIsDragging(false);
dragCounterRef.current = 0;
}}>
<div className="chat-header">
<img
src={panelState.profilePicture || defaultAvatar}
@@ -175,6 +224,19 @@ export function MessagePanelRenderer({ panel, isChatSwitching }: MessagePanelRen
<div ref={messagesEndRef} />
</ChatMessages>
)}
<AnimatedOpacity
visible={isDragging}
className="file-overlay"
onDragOver={(e) => e.preventDefault()}
onDrop={(e) => e.preventDefault()}>
<div className="file-overlay-wrapper">
<div className="file-overlay-inner">
<mdui-icon name="upload_file" />
<span>Отпустите файл(ы) для добавления</span>
</div>
</div>
</AnimatedOpacity>
<ChatInputWrapper
onSendMessage={(text, files) => {
@@ -213,6 +275,7 @@ export function MessagePanelRenderer({ panel, isChatSwitching }: MessagePanelRen
setPendingAction(null);
}
}}
onProvideFileAdder={(adder) => { addFilesRef.current = adder; }}
/>
</div>
</div>
frontend/src/ui/components/core/animations/AnimatedHeight.tsx
+7 -13
View File
@@ -1,17 +1,10 @@
import { useEffect, useState, useRef, type ReactNode } from "react";
import { useEffect, useState, useRef } from "react";
import type { AnimatedPropertyProps } from "./types";
export interface AnimatedHeightProps {
visible: any;
duration?: number;
onFinish?: () => void
children?: ReactNode;
}
export default function AnimatedHeight({ visible, duration = 0.25, onFinish, children }: AnimatedHeightProps) {
export default function AnimatedHeight({ visible, duration = 0.25, onFinish, children, ...props }: AnimatedPropertyProps) {
const [height, setHeight] = useState("0px");
const [shouldRender, setShouldRender] = useState(visible);
const [isAnimating, setIsAnimating] = useState(false);
const contentRef = useRef<HTMLDivElement>(null);
const measureRef = useRef<HTMLDivElement>(null);
useEffect(() => {
@@ -50,7 +43,7 @@ export default function AnimatedHeight({ visible, duration = 0.25, onFinish, chi
}, duration * 1000);
}
}
}, [visible, duration, shouldRender]);
}, [visible, shouldRender]);
// Don't render if not visible and not animating
if (!visible && !shouldRender && !isAnimating) {
@@ -59,11 +52,12 @@ export default function AnimatedHeight({ visible, duration = 0.25, onFinish, chi
return (
<div
ref={contentRef}
{...props}
style={{
height,
transition: `height ${duration}s ease`,
overflow: "hidden"
overflow: "hidden",
...props.style
}}
>
<div ref={measureRef} style={{ height: "auto" }}>
frontend/src/ui/components/core/animations/AnimatedOpacity.tsx
+41
View File
@@ -0,0 +1,41 @@
import { useEffect, useState } from "react";
import type { AnimatedPropertyProps } from "./types";
export default function AnimatedOpacity({ visible, duration = 0.5, onFinish, children, ...props }: AnimatedPropertyProps) {
const [opacity, setOpacity] = useState(visible ? 1 : 0);
const [shouldRender, setShouldRender] = useState(visible);
useEffect(() => {
if (visible) {
setShouldRender(true);
setOpacity(0);
// Wait for content to render, then animate in
const id = setTimeout(() => {
setOpacity(1);
}, 10);
return () => clearTimeout(id);
} else {
setOpacity(0);
const id = setTimeout(() => {
setShouldRender(false);
if (onFinish) {
onFinish();
}
}, duration * 1000);
return () => clearTimeout(id);
}
}, [visible, duration, onFinish]);
return shouldRender && (
<div
{...props}
style={{
opacity,
transition: `opacity ${duration}s ease`,
...props.style
}}
>{children}</div>
);
}
frontend/src/ui/components/core/animations/types.d.ts
Vendored
+10
View File
@@ -0,0 +1,10 @@
import type { ReactNode } from "react";
export interface BaseAnimatedPropertyProps {
visible: any;
duration?: number;
onFinish?: () => void
children?: ReactNode;
}
export type AnimatedPropertyProps = BaseAnimatedPropertyProps & React.ComponentPropsWithRef<"div">