add header text for file previewer

Author: alanpoon

src/room/room_input_bar.rs

@@ -19,9 +19,13 @@ use makepad_widgets::*;
 use matrix_sdk::room::reply::{EnforceThread, Reply};
 use matrix_sdk_ui::timeline::{EmbeddedEvent, EventTimelineItem, TimelineEventItemId};
 use ruma::{events::room::message::{LocationMessageEventContent, MessageType, RoomMessageEventContent}, OwnedRoomId};
-use crate::{home::{editing_pane::{EditingPaneState, EditingPaneWidgetExt}, location_preview::LocationPreviewWidgetExt, room_screen::{MessageAction, RoomScreenProps, populate_preview_of_timeline_item}, tombstone_footer::{SuccessorRoomDetails, TombstoneFooterWidgetExt}}, location::init_location_subscriber, shared::{avatar::AvatarWidgetRefExt, file_previewer::{FileLoadReceiver, FilePreviewerMetaData}, html_or_plaintext::HtmlOrPlaintextWidgetRefExt, mentionable_text_input::MentionableTextInputWidgetExt, popup_list::{PopupItem, PopupKind, enqueue_popup_notification}, progress::ProgressWidgetExt, styles::*}, sliding_sync::{MatrixRequest, UserPowerLevels, submit_async_request}, utils};
+use crate::{home::{editing_pane::{EditingPaneState, EditingPaneWidgetExt}, location_preview::LocationPreviewWidgetExt, room_screen::{MessageAction, RoomScreenProps, populate_preview_of_timeline_item}, tombstone_footer::{SuccessorRoomDetails, TombstoneFooterWidgetExt}}, location::init_location_subscriber, shared::{avatar::AvatarWidgetRefExt, file_previewer::{FileLoadReceiver, FilePreviewerMetaData, format_file_size}, html_or_plaintext::HtmlOrPlaintextWidgetRefExt, mentionable_text_input::MentionableTextInputWidgetExt, popup_list::{PopupItem, PopupKind, enqueue_popup_notification}, progress::ProgressWidgetExt, styles::*}, sliding_sync::{MatrixRequest, UserPowerLevels, submit_async_request}, utils};
 use crate::shared::file_previewer::FilePreviewerAction;
 
+/// Maximum file size allowed for upload (100 MB).
+/// Files larger than this will be rejected to prevent memory issues.
+const MAX_FILE_SIZE_BYTES: u64 = 100 * 1024 * 1024;
+
 live_design! {
     use link::theme::*;
     use link::shaders::*;
@@ -80,14 +84,36 @@ live_design! {
             flow: Down,
             spacing: 5,
 
-            progress_label = <Label> {
+            header_row = <View> {
                 width: Fill,
                 height: Fit,
-                draw_text: {
-                    text_style: <REGULAR_TEXT>{font_size: 10},
-                    color: #666
+                flow: Right,
+                align: {y: 0.5}
+                spacing: 10,
+
+                progress_label = <Label> {
+                    width: Fill,
+                    height: Fit,
+                    draw_text: {
+                        text_style: <REGULAR_TEXT>{font_size: 10},
+                        color: #666
+                    }
+                    text: "Uploading..."
+                }
+
+                cancel_upload_button = <Button> {
+                    width: Fit,
+                    height: Fit,
+                    padding: {top: 4, bottom: 4, left: 8, right: 8}
+                    draw_text: {
+                        text_style: <REGULAR_TEXT>{font_size: 9},
+                        color: #fff
+                    }
+                    draw_bg: {
+                        color: #c44
+                    }
+                    text: "Cancel"
                 }
-                text: "Uploading..."
             }
 
             progress = <Progress> {
@@ -269,8 +295,8 @@ impl Widget for RoomInputBar {
                     0.0
                 };
 
-                self.view.progress(ids!(progress)).set_value(cx, progress_percentage);
-                let progress_label = self.view.label(ids!(upload_progress_view.progress_label));
+                self.view.progress(ids!(upload_progress_view.progress)).set_value(cx, progress_percentage);
+                let progress_label = self.view.label(ids!(upload_progress_view.header_row.progress_label));
                 progress_label.set_text(cx, &format!("Uploading... {:.0}%", progress_percentage));
             }
             self.redraw(cx);
@@ -339,6 +365,44 @@ impl RoomInputBar {
         // Handle the file attachment upload button being clicked.
         if self.button(ids!(attachment_upload_button)).clicked(actions) {
             if let Some(selected_file_path) = rfd::FileDialog::new().pick_file() {
+                // Check file size before reading to prevent memory issues
+                let file_size = match std::fs::metadata(&selected_file_path) {
+                    Ok(metadata) => metadata.len(),
+                    Err(e) => {
+                        error!("Failed to read file metadata for {:?}: {}", selected_file_path, e);
+                        enqueue_popup_notification(PopupItem {
+                            message: format!("Unable to access file: {}", e),
+                            auto_dismissal_duration: None,
+                            kind: PopupKind::Error
+                        });
+                        return;
+                    }
+                };
+
+                // Check for empty files
+                if file_size == 0 {
+                    enqueue_popup_notification(PopupItem {
+                        message: String::from("Cannot upload empty file"),
+                        auto_dismissal_duration: None,
+                        kind: PopupKind::Error
+                    });
+                    return;
+                }
+
+                // Check if file exceeds maximum size
+                if file_size > MAX_FILE_SIZE_BYTES {
+                    enqueue_popup_notification(PopupItem {
+                        message: format!(
+                            "File too large ({}). Maximum allowed size is {}",
+                            format_file_size(file_size),
+                            format_file_size(MAX_FILE_SIZE_BYTES)
+                        ),
+                        auto_dismissal_duration: None,
+                        kind: PopupKind::Error
+                    });
+                    return;
+                }
+
                 let filename = selected_file_path
                     .file_name()
                     .and_then(|n| n.to_str())
@@ -355,7 +419,6 @@ impl RoomInputBar {
                 let (sender, receiver) = std::sync::mpsc::channel();
                 self.background_task_id = self.background_task_id.wrapping_add(1);
                 self.receiver = Some((self.background_task_id, receiver));
-
                 // Read file in background thread to avoid blocking the UI
                 cx.spawn_thread(move || {
                     match std::fs::read(&selected_file_path) {
@@ -383,6 +446,21 @@ impl RoomInputBar {
             }
         }
 
+        // Handle cancel upload button being clicked.
+        if self.button(ids!(upload_progress_view.header_row.cancel_upload_button)).clicked(actions) {
+            log!("Upload cancelled by user");
+            // Hide the progress bar immediately
+            self.view.view(ids!(upload_progress_view)).set_visible(cx, false);
+            self.upload_progress_subscriber = None;
+            // Note: The actual upload will continue in the background but user won't see progress
+            enqueue_popup_notification(PopupItem {
+                message: String::from("Upload cancelled"),
+                kind: PopupKind::Info,
+                auto_dismissal_duration: Some(3.0)
+            });
+            self.redraw(cx);
+        }
+
         // Handle the send location button being clicked.
         if self.button(ids!(location_preview.send_location_button)).clicked(actions) {
             let location_preview = self.location_preview(ids!(location_preview));

src/shared/file_previewer.rs

@@ -40,7 +40,6 @@ live_design! {
             align: {x: 0.5}
             flow: Down
             padding: {top: 20, right: 20, bottom: 10, left: 20}
-
             show_bg: true
             draw_bg: {
                 color: (COLOR_PRIMARY)
@@ -49,36 +48,59 @@ live_design! {
 
             <View> {
                 width: Fit, height: Fit
-                flow: Right
-                // Document view (visible only for non-image files)
-                document_view = <View> {
-                    visible: false,
-                    width: Fit
-                    height: 40
-                    flow: Down
-                    align: {x: 0.5, y: 0.5}
-                    file_icon = <Icon> {
-                        draw_icon: {
-                            svg_file: (ICON_FILE),
-                            color: #999,
+                flow: Down
+
+                <View> {
+                    width: Fit, height: Fit
+
+                    header_label = <Label> {
+                        width: 200
+                        height: 50
+                        padding: 0
+                        //margin: {bottom: 15}
+                        draw_text: {
+                            text_style: <REGULAR_TEXT>{font_size: 15},
+                            color: (COLOR_TEXT),
+                            wrap: Word
                         }
-                        icon_walk: { width: 20, height: 20 }
+                        text: "Upload Files"
                     }
                 }
-                // File metadata section (always visible)
-                metadata_view = <View> {
-                    width: 250
-                    height: Fit
-                    flow: Down
-                    spacing: 5
-
-                    filename_text = <Label> {
-                        width: Fill
+                <View> {
+                    width: Fit, height: Fit
+                    flow: Right
+
+                    // Document view (visible only for non-image files)
+                    document_view = <View> {
+                        visible: false,
+                        width: Fit
+                        height: 40
+                        flow: Down
+                        align: {x: 0.5, y: 0.5}
+                        file_icon = <Icon> {
+                            draw_icon: {
+                                svg_file: (ICON_FILE),
+                                color: #999,
+                            }
+                            icon_walk: { width: 20, height: 20 }
+                        }
+                    }
+
+                    // File metadata section (always visible)
+                    metadata_view = <View> {
+                        width: 250
                         height: Fit
-                        draw_text: {
-                            text_style: <REGULAR_TEXT>{font_size: 14},
-                            color: #000,
-                            wrap: Word
+                        flow: Down
+                        spacing: 5
+
+                        filename_text = <Label> {
+                            width: Fill
+                            height: Fit
+                            draw_text: {
+                                text_style: <REGULAR_TEXT>{font_size: 14},
+                                color: #000,
+                                wrap: Word
+                            }
                         }
                     }
                 }
@@ -347,7 +369,7 @@ pub enum FileType {
 ///
 /// Uses binary units (1024 bytes = 1 KB) for conversion.
 /// For sizes less than 1 KB, displays the exact byte count without decimal places.
-fn format_file_size(bytes: u64) -> String {
+pub fn format_file_size(bytes: u64) -> String {
     const UNITS: &[&str] = &["B", "KB", "MB", "GB", "TB"];
 
     if bytes == 0 {

src/sliding_sync.rs

@@ -1418,21 +1418,22 @@ async fn matrix_worker_task(
                     let mime_type  = file_meta.mime.clone();
 
                     // Upload the file to the media repository and send the message
+                    let file_size_uint = UInt::try_from(file_meta.file_size as u64).ok();
                     let attachment_config = matrix_sdk::attachment::AttachmentConfig::new()
                         .info(if mime_type.type_() == mime::IMAGE {
                             matrix_sdk::attachment::AttachmentInfo::Image(
                                 matrix_sdk::attachment::BaseImageInfo {
                                     height: None,
                                     width: None,
-                                    size: Some(UInt::new(file_meta.file_size as u64).unwrap()),
+                                    size: file_size_uint,
                                     blurhash: None,
                                     is_animated: None,
                                 }
                             )
                         } else {
                             matrix_sdk::attachment::AttachmentInfo::File(
                                 matrix_sdk::attachment::BaseFileInfo {
-                                    size: Some(UInt::new(file_meta.file_size as u64).unwrap()),
+                                    size: file_size_uint,
                                 }
                             )
                         });
@@ -1483,12 +1484,15 @@ async fn matrix_worker_task(
                         }
                         Err(e) => {
                             error!("Failed to upload file to room {room_id}: {e:?}");
+                            // Set progress to completion state (0/0) to hide the progress bar
                             progress_sender.set(TransmissionProgress { total: 0, current: 0 });
                             enqueue_popup_notification(PopupItem {
                                 message: format!("Failed to upload file: {e}"),
                                 kind: PopupKind::Error,
                                 auto_dismissal_duration: None
                             });
+                            // Signal UI to update and hide the progress bar
+                            SignalToUI::set_ui_signal();
                         }
                     }
                 });