1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
use dioxus::prelude::*;
/// Drag-and-drop file upload overlay.
/// Shown when the user drags files over the room content area.
#[component]
pub fn DragDropOverlay(
on_drop: EventHandler<Vec<String>>,
) -> Element {
let mut is_dragging = use_signal(|| false);
rsx! {
div {
class: "drag-drop-zone",
ondragover: move |evt| {
evt.prevent_default();
is_dragging.set(true);
},
ondragleave: move |_| {
is_dragging.set(false);
},
ondrop: move |evt| {
evt.prevent_default();
is_dragging.set(false);
// Dioxus drag events don't directly expose files yet,
// but this provides the UI scaffolding for when they do.
// For now, users can use the attachment button.
tracing::debug!("Files dropped on room area");
on_drop.call(Vec::new());
},
if *is_dragging.read() {
div {
class: "drag-drop-overlay",
div {
class: "drag-drop-overlay__content",
div { class: "drag-drop-overlay__icon", "📎" }
p { class: "drag-drop-overlay__text", "Drop files here to upload" }
}
}
}
}
}
}