Add file upload preview

fixes #756

12 files changed, 375 insertions, 140 deletions

diff --git a/main/src/ui/chat_input/chat_input_controller.vala b/main/src/ui/chat_input/chat_input_controller.vala
index 4844ff6c..fb7f88b1 100644
--- a/main/src/ui/chat_input/chat_input_controller.vala
+++ b/main/src/ui/chat_input/chat_input_controller.vala
@@ -9,6 +9,7 @@ namespace Dino.Ui {
 public class ChatInputController : Object {
 
     public signal void activate_last_message_correction();
+    public signal void file_picker_selected();
 
     public new string? conversation_display_name { get; set; }
     public string? conversation_topic { get; set; }
@@ -33,11 +34,12 @@ public class ChatInputController : Object {
 
         chat_input.chat_text_view.text_view.buffer.changed.connect(on_text_input_changed);
         chat_input.chat_text_view.text_view.key_press_event.connect(on_text_input_key_press);
+
         chat_text_view_controller.send_text.connect(send_text);
 
         chat_input.encryption_widget.encryption_changed.connect(on_encryption_changed);
 
-        stream_interactor.get_module(FileManager.IDENTITY).upload_available.connect(on_upload_available);
+        chat_input.file_button.clicked.connect(() => file_picker_selected());
     }
 
     public void set_conversation(Conversation conversation) {
@@ -51,6 +53,10 @@ public class ChatInputController : Object {
         chat_text_view_controller.initialize_for_conversation(conversation);
     }
 
+    public void set_file_upload_active(bool active) {
+        chat_input.set_file_upload_active(active);
+    }
+
     private void on_encryption_changed(Plugins.EncryptionListEntry? encryption_entry) {
         reset_input_field_status();
 
@@ -72,13 +78,6 @@ public class ChatInputController : Object {
         set_input_field_status(new Plugins.InputFieldStatus("", Plugins.InputFieldStatus.MessageType.NONE, Plugins.InputFieldStatus.InputState.NORMAL));
     }
 
-    private void on_upload_available(Account account) {
-        if (conversation != null && conversation.account.equals(account)) {
-            chat_input.file_button.visible = true;
-            chat_input.file_separator.visible = true;
-        }
-    }
-
     private void send_text() {
         // Don't do anything if we're in a NO_SEND state. Don't clear the chat input, don't send.
         if (input_field_status.input_state == Plugins.InputFieldStatus.InputState.NO_SEND) {
diff --git a/main/src/ui/chat_input/view.vala b/main/src/ui/chat_input/view.vala
index 166ead2e..b99cd1c4 100644
--- a/main/src/ui/chat_input/view.vala
+++ b/main/src/ui/chat_input/view.vala
@@ -33,17 +33,9 @@ public class View : Box {
 
         encryption_widget = new EncryptionButton(stream_interactor) { relief=ReliefStyle.NONE, margin_top=3, valign=Align.START, visible=true };
 
-        file_button.clicked.connect(() => {
-            PreviewFileChooserNative chooser = new PreviewFileChooserNative("Select file", get_toplevel() as Gtk.Window, FileChooserAction.OPEN, "Select", "Cancel");
-            if (chooser.run() == Gtk.ResponseType.ACCEPT) {
-                string uri = chooser.get_filename();
-                stream_interactor.get_module(FileManager.IDENTITY).send_file.begin(uri, conversation);
-            }
-        });
         file_button.get_style_context().add_class("dino-attach-button");
 
         encryption_widget.get_style_context().add_class("dino-chatinput-button");
-        encryption_widget.encryption_changed.connect(update_file_transfer_availability);
 
         // Emoji button for emoji picker (recents don't work < 3.22.19, category icons don't work <3.23.2)
         if (Gtk.get_major_version() >= 3 && Gtk.get_minor_version() >= 24) {
@@ -68,18 +60,15 @@ public class View : Box {
         return this;
     }
 
-    private void update_file_transfer_availability() {
-        bool upload_available = stream_interactor.get_module(FileManager.IDENTITY).is_upload_available(conversation);
-        file_button.visible = upload_available;
-        file_separator.visible = upload_available;
+    public void set_file_upload_active(bool active) {
+        file_button.visible = active;
+        file_separator.visible = active;
     }
 
     public void initialize_for_conversation(Conversation conversation) {
         if (this.conversation != null) entry_cache[this.conversation] = chat_text_view.text_view.buffer.text;
         this.conversation = conversation;
 
-        update_file_transfer_availability();
-
         chat_text_view.text_view.buffer.text = "";
         if (entry_cache.has_key(conversation)) {
             chat_text_view.text_view.buffer.text = entry_cache[conversation];
diff --git a/main/src/ui/conversation_content_view/conversation_item_skeleton.vala b/main/src/ui/conversation_content_view/conversation_item_skeleton.vala
index ef880063..b589fe9e 100644
--- a/main/src/ui/conversation_content_view/conversation_item_skeleton.vala
+++ b/main/src/ui/conversation_content_view/conversation_item_skeleton.vala
@@ -49,10 +49,10 @@ public class ConversationItemSkeleton : EventBox {
         if (initial_item) {
             this.add(image_content_box);
         } else {
-            Revealer revealer = new Revealer() { transition_duration=200, transition_type = RevealerTransitionType.SLIDE_UP, visible = true };
+            Revealer revealer = new Revealer() { transition_duration=200, transition_type=RevealerTransitionType.SLIDE_UP, reveal_child=false, visible=true };
             revealer.add_with_properties(image_content_box);
-            revealer.reveal_child = true;
             this.add(revealer);
+            revealer.reveal_child = true;
         }
 
 
diff --git a/main/src/ui/conversation_content_view/file_default_widget.vala b/main/src/ui/conversation_content_view/file_default_widget.vala
index 045223fe..c2af92e3 100644
--- a/main/src/ui/conversation_content_view/file_default_widget.vala
+++ b/main/src/ui/conversation_content_view/file_default_widget.vala
@@ -29,7 +29,7 @@ public class FileDefaultWidget : EventBox {
         mime_label.leave_notify_event.connect((event) => { pointer_inside = true; return false; });
     }
 
-    public void update_file_info(string? mime_type, FileTransfer.State state, int size) {
+    public void update_file_info(string? mime_type, FileTransfer.State state, long size) {
         this.state = state;
 
         spinner.active = false; // A hidden spinning spinner still uses CPU. Deactivate asap
@@ -111,7 +111,7 @@ public class FileDefaultWidget : EventBox {
         }
     }
 
-    private static string get_size_string(int size) {
+    private static string get_size_string(long size) {
         if (size < 1024) {
             return @"$(size) B";
         } else if (size < 1000 * 1000) {
diff --git a/main/src/ui/conversation_content_view/file_image_widget.vala b/main/src/ui/conversation_content_view/file_image_widget.vala
new file mode 100644
index 00000000..8005f996
--- /dev/null
+++ b/main/src/ui/conversation_content_view/file_image_widget.vala
@@ -0,0 +1,86 @@
+using Gee;
+using Gdk;
+using Gtk;
+
+using Dino.Entities;
+
+namespace Dino.Ui {
+
+public class FileImageWidget : EventBox {
+
+    private ScalingImage image;
+    FileDefaultWidget file_default_widget;
+    FileDefaultWidgetController file_default_widget_controller;
+    private bool pointer_inside = false;
+
+    public FileImageWidget() {
+        this.halign = Align.START;
+        this.events = EventMask.POINTER_MOTION_MASK;
+
+        Util.force_css(this, "* { border: 1px solid alpha(@theme_fg_color, 0.1); border-radius: 3px; }");
+    }
+
+    public async void load_from_file(File file, string file_name, int MAX_WIDTH=600, int MAX_HEIGHT=300) throws GLib.Error {
+        // Load and prepare image in tread
+        Thread<ScalingImage?> thread = new Thread<ScalingImage?> (null, () => {
+            ScalingImage image = new ScalingImage() { halign=Align.START, visible = true, max_width = MAX_WIDTH, max_height = MAX_HEIGHT };
+
+            Gdk.Pixbuf pixbuf;
+            try {
+                pixbuf = new Gdk.Pixbuf.from_file(file.get_path());
+            } catch (Error error) {
+                warning("Can't load picture %s - %s", file.get_path(), error.message);
+                Idle.add(load_from_file.callback);
+                return null;
+            }
+
+            pixbuf = pixbuf.apply_embedded_orientation();
+
+            image.load(pixbuf);
+
+            Idle.add(load_from_file.callback);
+            return image;
+        });
+        yield;
+        image = thread.join();
+        if (image == null) throw new Error(-1, 0, "Error loading image");
+
+        FileInfo file_info = file.query_info("*", FileQueryInfoFlags.NONE);
+        string? mime_type = file_info.get_content_type();
+
+        file_default_widget = new FileDefaultWidget() { valign=Align.END, vexpand=false };
+        file_default_widget.stack_event_box.visible = false;
+        file_default_widget_controller = new FileDefaultWidgetController(file_default_widget);
+        file_default_widget_controller.set_file(file, file_name, mime_type);
+
+        Util.force_css(file_default_widget, "* { color: #eee; }");
+        Util.force_css(file_default_widget, "* { background-color: rgba(0, 0, 0, 0.5); }");
+
+        Overlay overlay = new Overlay() { visible=true };
+        overlay.add(image);
+        overlay.add_overlay(file_default_widget);
+
+        this.enter_notify_event.connect(() => {
+            file_default_widget.visible = true;
+            return false;
+        });
+        this.leave_notify_event.connect(() => {
+            pointer_inside = false;
+            Timeout.add(20, () => {
+                if (!pointer_inside) {
+                    file_default_widget.visible = false;
+                }
+                return false;
+            });
+
+            return false;
+        });
+
+        file_default_widget.enter_notify_event.connect(() => { pointer_inside = true; return false; });
+        file_default_widget.leave_notify_event.connect(() => { pointer_inside = true; return false; });
+
+        this.add(overlay);
+    }
+}
+
+}
diff --git a/main/src/ui/conversation_content_view/file_widget.vala b/main/src/ui/conversation_content_view/file_widget.vala
index d92eedb5..3819e5bc 100644
--- a/main/src/ui/conversation_content_view/file_widget.vala
+++ b/main/src/ui/conversation_content_view/file_widget.vala
@@ -5,9 +5,9 @@ using Pango;
 
 using Dino.Entities;
 
-namespace Dino.Ui.ConversationSummary {
+namespace Dino.Ui {
 
-public class FileMetaItem : ContentMetaItem {
+public class FileMetaItem : ConversationSummary.ContentMetaItem {
 
     private StreamInteractor stream_interactor;
 
@@ -25,7 +25,7 @@ public class FileMetaItem : ContentMetaItem {
     public override Gee.List<Plugins.MessageAction>? get_item_actions(Plugins.WidgetType type) { return null; }
 }
 
-public class FileWidget : Box {
+public class FileWidget : SizeRequestBox {
 
     enum State {
         IMAGE,
@@ -42,6 +42,11 @@ public class FileWidget : Box {
     private FileDefaultWidgetController default_widget_controller;
     private Widget? content = null;
 
+    construct {
+        margin_top = 4;
+        size_request_mode = SizeRequestMode.HEIGHT_FOR_WIDTH;
+    }
+
     public FileWidget(StreamInteractor stream_interactor, FileTransfer file_transfer) {
         this.stream_interactor = stream_interactor;
         this.file_transfer = file_transfer;
@@ -60,100 +65,34 @@ public class FileWidget : Box {
     private async void update_widget() {
         if (show_image() && state != State.IMAGE) {
             var content_bak = content;
-            Widget? image_widget = yield get_image_widget(file_transfer.get_file(), file_transfer.file_name);
 
-            // If the widget changed in the meanwhile, stop
-            if (content != content_bak) return;
+            FileImageWidget file_image_widget = null;
+            try {
+                file_image_widget = new FileImageWidget() { visible=true };
+                yield file_image_widget.load_from_file(file_transfer.get_file(), file_transfer.file_name);
+
+                // If the widget changed in the meanwhile, stop
+                if (content != content_bak) return;
 
-            if (image_widget != null) {
                 if (content != null) this.remove(content);
-                content = image_widget;
+                content = file_image_widget;
                 state = State.IMAGE;
                 this.add(content);
                 return;
-            }
+            } catch (Error e) { }
         }
 
         if (state != State.DEFAULT) {
             if (content != null) this.remove(content);
             FileDefaultWidget default_file_widget = new FileDefaultWidget() { visible=true };
-            default_widget_controller = new FileDefaultWidgetController(default_file_widget, file_transfer, stream_interactor);
+            default_widget_controller = new FileDefaultWidgetController(default_file_widget);
+            default_widget_controller.set_file_transfer(file_transfer, stream_interactor);
             content = default_file_widget;
             this.state = State.DEFAULT;
             this.add(content);
         }
     }
 
-    public static async Widget? get_image_widget(File file, string file_name, int MAX_WIDTH=600, int MAX_HEIGHT=300) {
-        // Load and prepare image in tread
-        Thread<Image?> thread = new Thread<Image?> (null, () => {
-            ScalingImage image = new ScalingImage() { halign=Align.START, visible = true, max_width = MAX_WIDTH, max_height = MAX_HEIGHT };
-
-            Gdk.Pixbuf pixbuf;
-            try {
-                pixbuf = new Gdk.Pixbuf.from_file(file.get_path());
-            } catch (Error error) {
-                warning("Can't load picture %s - %s", file.get_path(), error.message);
-                Idle.add(get_image_widget.callback);
-                return null;
-            }
-
-            pixbuf = pixbuf.apply_embedded_orientation();
-
-            image.load(pixbuf);
-
-            Idle.add(get_image_widget.callback);
-            return image;
-        });
-        yield;
-        Image image = thread.join();
-        if (image == null) return null;
-
-        Util.force_css(image, "* { box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.1); margin: 2px; border-radius: 3px; }");
-
-        Builder builder = new Builder.from_resource("/im/dino/Dino/conversation_content_view/image_toolbar.ui");
-        Widget toolbar = builder.get_object("main") as Widget;
-        Util.force_background(toolbar, "rgba(0, 0, 0, 0.5)");
-        Util.force_css(toolbar, "* { padding: 3px; border-radius: 3px; }");
-
-        Label url_label = builder.get_object("url_label") as Label;
-        Util.force_color(url_label, "#eee");
-
-        if (file_name != null && file_name != "") {
-            string caption = file_name;
-            url_label.label = caption;
-        } else {
-            url_label.visible = false;
-        }
-
-        Image open_image = builder.get_object("open_image") as Image;
-        Util.force_css(open_image, "*:not(:hover) { color: #eee; }");
-        Button open_button = builder.get_object("open_button") as Button;
-        Util.force_css(open_button, "*:hover { background-color: rgba(255,255,255,0.3); border-color: transparent; }");
-        open_button.clicked.connect(() => {
-            try{
-                AppInfo.launch_default_for_uri(file.get_uri(), null);
-            } catch (Error err) {
-                info("Could not to open file://%s: %s", file.get_path(), err.message);
-            }
-        });
-
-        Revealer toolbar_revealer = new Revealer() { transition_type=RevealerTransitionType.CROSSFADE, transition_duration=400, visible=true };
-        toolbar_revealer.add(toolbar);
-
-        Grid grid = new Grid() { visible=true };
-        grid.attach(toolbar_revealer, 0, 0, 1, 1);
-        grid.attach(image, 0, 0, 1, 1);
-
-        EventBox event_box = new EventBox() { margin_top=5, halign=Align.START, visible=true };
-        event_box.events = EventMask.POINTER_MOTION_MASK;
-        event_box.add(grid);
-        event_box.enter_notify_event.connect(() => { toolbar_revealer.reveal_child = true; return false; });
-        event_box.leave_notify_event.connect(() => { toolbar_revealer.reveal_child = false; return false; });
-
-        return event_box;
-    }
-
     private bool show_image() {
         if (file_transfer.mime_type == null) return false;
         if (file_transfer.state != FileTransfer.State.COMPLETE &&
@@ -175,18 +114,22 @@ public class FileWidget : Box {
 public class FileDefaultWidgetController : Object {
 
     private FileDefaultWidget widget;
-    private FileTransfer file_transfer;
-    private StreamInteractor stream_interactor;
+    private FileTransfer? file_transfer;
+    private StreamInteractor? stream_interactor;
+    private string file_uri;
+    private FileTransfer.State state;
 
-    public FileDefaultWidgetController(FileDefaultWidget widget, FileTransfer file_transfer, StreamInteractor stream_interactor) {
+    public FileDefaultWidgetController(FileDefaultWidget widget) {
         this.widget = widget;
+        widget.button_release_event.connect(on_clicked);
+    }
+
+    public void set_file_transfer(FileTransfer file_transfer, StreamInteractor stream_interactor) {
         this.file_transfer = file_transfer;
         this.stream_interactor = stream_interactor;
 
         widget.name_label.label = file_transfer.file_name;
 
-        widget.button_release_event.connect(on_clicked);
-
         file_transfer.notify["path"].connect(update_file_info);
         file_transfer.notify["state"].connect(update_file_info);
         file_transfer.notify["mime-type"].connect(update_file_info);
@@ -194,22 +137,32 @@ public class FileDefaultWidgetController : Object {
         update_file_info();
     }
 
+    public void set_file(File file, string file_name, string? mime_type) {
+        file_uri = file.get_uri();
+        state = FileTransfer.State.COMPLETE;
+        widget.name_label.label = file_name;
+        widget.update_file_info(mime_type, state, -1);
+    }
+
     private void update_file_info() {
+        file_uri = file_transfer.get_file().get_uri();
+        state = file_transfer.state;
         widget.update_file_info(file_transfer.mime_type, file_transfer.state, file_transfer.size);
     }
 
     private bool on_clicked(EventButton event_button) {
-        switch (file_transfer.state) {
+        switch (state) {
             case FileTransfer.State.COMPLETE:
                 if (event_button.button == 1) {
                     try{
-                        AppInfo.launch_default_for_uri(file_transfer.get_file().get_uri(), null);
+                        AppInfo.launch_default_for_uri(file_uri, null);
                     } catch (Error err) {
-                        print("Tried to open " + file_transfer.get_file().get_path());
+                        print("Tried to open " + file_uri);
                     }
                 }
                 break;
             case FileTransfer.State.NOT_STARTED:
+                assert(stream_interactor != null && file_transfer != null);
                 stream_interactor.get_module(FileManager.IDENTITY).download_file.begin(file_transfer);
                 break;
         }
diff --git a/main/src/ui/conversation_view.vala b/main/src/ui/conversation_view.vala
index b521b5ad..5d27e138 100644
--- a/main/src/ui/conversation_view.vala
+++ b/main/src/ui/conversation_view.vala
@@ -7,13 +7,38 @@ using Dino.Entities;
 namespace Dino.Ui {
 
 [GtkTemplate (ui = "/im/dino/Dino/conversation_view.ui")]
-public class ConversationView : Gtk.Box {
+public class ConversationView : Gtk.Overlay {
 
     [GtkChild] public Revealer goto_end_revealer;
     [GtkChild] public Button goto_end_button;
     [GtkChild] public ChatInput.View chat_input;
     [GtkChild] public ConversationSummary.ConversationView conversation_frame;
+    [GtkChild] public Revealer white_revealer;
 
+    construct {
+        white_revealer.notify["child-revealed"].connect_after(on_child_revealed_changed);
+    }
+
+    public void add_overlay_dialog(Widget widget) {
+        Revealer revealer = new Revealer() { transition_type=RevealerTransitionType.CROSSFADE , transition_duration= 100, visible=true };
+        revealer.add(widget);
+
+        this.add_overlay(revealer);
+
+        revealer.reveal_child = true;
+        white_revealer.visible = true;
+        white_revealer.reveal_child = true;
+        widget.destroy.connect(() => {
+            revealer.destroy();
+            white_revealer.reveal_child = false;
+        });
+    }
+
+    private void on_child_revealed_changed() {
+        if (!white_revealer.child_revealed) {
+            white_revealer.visible = false;
+        }
+    }
 }
 
 }
diff --git a/main/src/ui/conversation_view_controller.vala b/main/src/ui/conversation_view_controller.vala
index dce9920e..8e17cc91 100644
--- a/main/src/ui/conversation_view_controller.vala
+++ b/main/src/ui/conversation_view_controller.vala
@@ -22,6 +22,7 @@ public class ConversationViewController : Object {
 
     private Application app;
     private ConversationView view;
+    private Widget? overlay_dialog;
     private ConversationTitlebar titlebar;
     public SearchMenuEntry search_menu_entry = new SearchMenuEntry();
 
@@ -36,15 +37,15 @@ public class ConversationViewController : Object {
         this.app = GLib.Application.get_default() as Application;
 
         this.chat_input_controller = new ChatInputController(view.chat_input, stream_interactor);
+        chat_input_controller.activate_last_message_correction.connect(() => view.conversation_frame.activate_last_message_correction());
+        chat_input_controller.file_picker_selected.connect(() => on_file_picker_selected());
 
         view.conversation_frame.init(stream_interactor);
 
         // drag 'n drop file upload
-        Gtk.drag_dest_set(view, DestDefaults.ALL, target_list, Gdk.DragAction.COPY);
         view.drag_data_received.connect(this.on_drag_data_received);
 
         // forward key presses
-        chat_input_controller.activate_last_message_correction.connect(() => view.conversation_frame.activate_last_message_correction());
         view.chat_input.key_press_event.connect(forward_key_press_to_chat_input);
         view.conversation_frame.key_press_event.connect(forward_key_press_to_chat_input);
         titlebar.key_press_event.connect(forward_key_press_to_chat_input);
@@ -79,6 +80,8 @@ public class ConversationViewController : Object {
             }
         });
 
+        stream_interactor.get_module(FileManager.IDENTITY).upload_available.connect(update_file_upload_status);
+
         // Headerbar plugins
         app.plugin_registry.register_contact_titlebar_entry(new MenuEntry(stream_interactor));
         app.plugin_registry.register_contact_titlebar_entry(search_menu_entry);
@@ -89,8 +92,17 @@ public class ConversationViewController : Object {
     }
 
     public void select_conversation(Conversation? conversation, bool default_initialize_conversation) {
+        if (this.conversation != null) {
+            conversation.notify["encryption"].disconnect(update_file_upload_status);
+        }
+        if (overlay_dialog != null) {
+            overlay_dialog.destroy();
+        }
+
         this.conversation = conversation;
 
+        conversation.notify["encryption"].connect(update_file_upload_status);
+
         chat_input_controller.set_conversation(conversation);
 
         update_conversation_display_name();
@@ -106,6 +118,8 @@ public class ConversationViewController : Object {
         if (default_initialize_conversation) {
             view.conversation_frame.initialize_for_conversation(conversation);
         }
+
+        update_file_upload_status();
     }
 
     public void unset_conversation() {
@@ -113,6 +127,16 @@ public class ConversationViewController : Object {
         conversation_topic = null;
     }
 
+    private void update_file_upload_status() {
+        bool upload_available = stream_interactor.get_module(FileManager.IDENTITY).is_upload_available(conversation);
+        chat_input_controller.set_file_upload_active(upload_available);
+        if (upload_available) {
+            Gtk.drag_dest_set(view, DestDefaults.ALL, target_list, Gdk.DragAction.COPY);
+        } else {
+            Gtk.drag_dest_unset(view);
+        }
+    }
+
     private void update_conversation_display_name() {
         conversation_display_name = Util.get_conversation_display_name(stream_interactor, conversation);
     }
@@ -139,8 +163,8 @@ public class ConversationViewController : Object {
                     string[] uris = selection_data.get_uris();
                     for (int i = 0; i < uris.length; i++) {
                         try {
-                            string filename = Filename.from_uri(uris[i]);
-                            stream_interactor.get_module(FileManager.IDENTITY).send_file.begin(filename, conversation);
+                            string file_path = Filename.from_uri(uris[i]);
+                            open_send_file_overlay(File.new_for_path(file_path));
                         } catch (Error err) {}
                     }
                     break;
@@ -150,6 +174,43 @@ public class ConversationViewController : Object {
         }
     }
 
+    private void on_file_picker_selected() {
+        PreviewFileChooserNative chooser = new PreviewFileChooserNative(_("Select file"), view.get_toplevel() as Gtk.Window, FileChooserAction.OPEN, _("Select"), _("Cancel"));
+        if (chooser.run() == Gtk.ResponseType.ACCEPT) {
+            open_send_file_overlay(File.new_for_path(chooser.get_filename()));
+        }
+    }
+
+    private void open_send_file_overlay(File file) {
+        FileInfo file_info;
+        try {
+            file_info = file.query_info("*", FileQueryInfoFlags.NONE);
+        } catch (Error e) { return; }
+
+        FileSendOverlay overlay = new FileSendOverlay(file, file_info);
+        overlay.send_file.connect(() => send_file(file));
+
+        HashMap<int, long> limits = stream_interactor.get_module(FileManager.IDENTITY).get_file_size_limits(conversation);
+        bool something_works = false;
+        foreach (var limit in limits.values) {
+            if (limit >= file_info.get_size()) {
+                something_works = true;
+            }
+        }
+        if (!something_works && limits.has_key(0)) {
+            if (!something_works && file_info.get_size() > limits[0]) {
+                overlay.set_file_too_large();
+            }
+        }
+
+        view.add_overlay_dialog(overlay);
+        overlay_dialog = overlay;
+    }
+
+    private void send_file(File file) {
+        stream_interactor.get_module(FileManager.IDENTITY).send_file.begin(file, conversation);
+    }
+
     private bool forward_key_press_to_chat_input(EventKey event) {
         if (((Gtk.Window)view.get_toplevel()).get_focus() is TextView) {
             return false;
diff --git a/main/src/ui/file_send_overlay.vala b/main/src/ui/file_send_overlay.vala
new file mode 100644
index 00000000..c19a5aef
--- /dev/null
+++ b/main/src/ui/file_send_overlay.vala
@@ -0,0 +1,88 @@
+using Gee;
+using Gdk;
+using Gtk;
+
+using Dino.Entities;
+
+namespace Dino.Ui {
+
+[GtkTemplate (ui = "/im/dino/Dino/file_send_overlay.ui")]
+public class FileSendOverlay : Gtk.EventBox {
+
+    public signal void close();
+    public signal void send_file();
+
+    [GtkChild] public Button close_button;
+    [GtkChild] public Button send_button;
+    [GtkChild] public SizingBin file_widget_insert;
+    [GtkChild] public Label info_label;
+
+    private bool can_send = true;
+
+    public FileSendOverlay(File file, FileInfo file_info) {
+        close_button.clicked.connect(() => this.destroy());
+        send_button.clicked.connect(() => {
+            send_file();
+            this.destroy();
+        });
+
+        load_file_widget.begin(file, file_info);
+
+        this.realize.connect(() => {
+            if (can_send) {
+                send_button.grab_focus();
+            } else {
+                close_button.grab_focus();
+            }
+        });
+
+        this.key_release_event.connect((event) => {
+            if (event.keyval == Gdk.Key.Escape) {
+                this.destroy();
+            }
+            return false;
+        });
+    }
+
+    public void set_file_too_large() {
+        info_label.label= "The file exceeds the server's maximum upload size.";
+        Util.force_error_color(info_label);
+        send_button.sensitive = false;
+        can_send = false;
+    }
+
+    private async void load_file_widget(File file, FileInfo file_info) {
+        string file_name = file_info.get_display_name();
+        string mime_type = file_info.get_content_type();
+
+        bool is_image = false;
+
+        foreach (PixbufFormat pixbuf_format in Pixbuf.get_formats()) {
+            foreach (string supported_mime_type in pixbuf_format.get_mime_types()) {
+                if (supported_mime_type == mime_type) {
+                    is_image = true;
+                }
+            }
+        }
+
+        Widget? widget = null;
+        if (is_image) {
+            FileImageWidget image_widget = new FileImageWidget() { visible=true };
+            try {
+                yield image_widget.load_from_file(file, file_name);
+                widget = image_widget;
+            } catch (Error e) { }
+        }
+
+        if (widget == null) {
+            FileDefaultWidget default_widget = new FileDefaultWidget() { visible=true };
+            default_widget.name_label.label = file_name;
+            default_widget.update_file_info(mime_type, FileTransfer.State.COMPLETE, (long)file_info.get_size());
+            widget = default_widget;
+        }
+
+        file_widget_insert.add(widget);
+    }
+}
+
+}
diff --git a/main/src/ui/util/helper.vala b/main/src/ui/util/helper.vala
index 78c8f527..65318870 100644
--- a/main/src/ui/util/helper.vala
+++ b/main/src/ui/util/helper.vala
@@ -219,7 +219,7 @@ public static void image_set_from_scaled_pixbuf(Image image, Gdk.Pixbuf pixbuf,
 private const string force_background_css = "%s { background-color: %s; }";
 private const string force_color_css = "%s { color: %s; }";
 
-private static void force_css(Gtk.Widget widget, string css) {
+public static void force_css(Gtk.Widget widget, string css) {
     var p = new Gtk.CssProvider();
     try {
         p.load_from_data(css);
diff --git a/main/src/ui/util/scaling_image.vala b/main/src/ui/util/scaling_image.vala
index 276cc25c..cfc60847 100644
--- a/main/src/ui/util/scaling_image.vala
+++ b/main/src/ui/util/scaling_image.vala
@@ -25,17 +25,51 @@ class ScalingImage : Image {
         queue_resize();
     }
 
+    private void calculate_size(ref double exact_width, ref double exact_height) {
+        if (exact_width == -1 && exact_height == -1) {
+            if (target_width == -1) {
+                exact_width = ((double)image_width) / ((double)scale_factor);
+                exact_height = ((double)image_height) / ((double)scale_factor);
+            } else {
+                exact_width = target_width;
+                exact_height = exact_width * image_ratio;
+            }
+        } else if (exact_width != -1) {
+            exact_height = exact_width * image_ratio;
+        } else if (exact_height != -1) {
+            exact_width = exact_height / image_ratio;
+        } else {
+            if (exact_width * image_ratio > exact_height + scale_factor) {
+                exact_width = exact_height / image_ratio;
+            } else if (exact_height / image_ratio > exact_width + scale_factor) {
+                exact_height = exact_width * image_ratio;
+            }
+        }
+        if (max_width != -1 && exact_width > max_width) {
+            exact_width = max_width;
+            exact_height = exact_width * image_ratio;
+        }
+        if (max_height != -1 && exact_height > max_height) {
+            exact_height = max_height;
+            exact_width = exact_height / image_ratio;
+        }
+        if (exact_width < min_width) exact_width = min_width;
+        if (exact_height < min_height) exact_height = min_height;
+    }
+
     public override void size_allocate(Allocation allocation) {
         if (max_width != -1) allocation.width = int.min(allocation.width, max_width);
         if (max_height != -1) allocation.height = int.min(allocation.height, max_height);
-        allocation.height = int.min(allocation.height, (int)(allocation.width * image_ratio));
-        allocation.width = int.min(allocation.width, (int)(allocation.height / image_ratio));
+        allocation.height = int.max(allocation.height, min_height);
+        allocation.width = int.max(allocation.width, min_width);
+        double exact_width = allocation.width, exact_height = allocation.height;
+        calculate_size(ref exact_width, ref exact_height);
         base.size_allocate(allocation);
         if (last_allocation_height != allocation.height || last_allocation_width != allocation.width || last_scale_factor != scale_factor) {
             last_allocation_height = allocation.height;
             last_allocation_width = allocation.width;
             last_scale_factor = scale_factor;
-            Pixbuf scaled = image.scale_simple(allocation.width * scale_factor, allocation.height * scale_factor, Gdk.InterpType.BILINEAR);
+            Pixbuf scaled = image.scale_simple((int) Math.floor(exact_width * scale_factor), (int) Math.floor(exact_height * scale_factor), Gdk.InterpType.BILINEAR);
             scaled = crop_corners(scaled, 3 * scale_factor);
             Util.image_set_from_scaled_pixbuf(this, scaled);
         }
@@ -58,34 +92,34 @@ class ScalingImage : Image {
 
     public override void get_preferred_width(out int minimum_width, out int natural_width) {
         minimum_width = int.max(0, min_width);
-        natural_width = target_width != -1 ? target_width : (image_width / scale_factor);
-        natural_width = int.min(natural_width, max_width);
-        if (natural_width * image_ratio > max_height) {
-            natural_width = (int) (max_height / image_ratio);
-        }
+        double exact_width = -1, exact_height = -1;
+        calculate_size(ref exact_width, ref exact_height);
+        natural_width = (int) Math.ceil(exact_width);
     }
 
     public override void get_preferred_height(out int minimum_height, out int natural_height) {
         minimum_height = int.max(0, min_height);
-        natural_height = (int) (target_width != -1 ? target_width * image_ratio : image_width / scale_factor);
-        natural_height = int.min(natural_height, max_height);
-        if (natural_height / image_ratio > max_width) {
-            natural_height = (int) (max_width * image_ratio);
-        }
+        double exact_width = -1, exact_height = -1;
+        calculate_size(ref exact_width, ref exact_height);
+        natural_height = (int) Math.ceil(exact_height);
     }
 
     public override void get_preferred_height_for_width(int width, out int minimum_height, out int natural_height) {
-        natural_height = (int) (width * image_ratio);
-        minimum_height = min_height != -1 ? int.min(min_height, natural_height) : natural_height;
+        double exact_width = width, exact_height = -1;
+        calculate_size(ref exact_width, ref exact_height);
+        natural_height = (int) Math.ceil(exact_height);
+        minimum_height = natural_height;
     }
 
     public override void get_preferred_width_for_height(int height, out int minimum_width, out int natural_width) {
-        natural_width = (int) (height / image_ratio);
-        minimum_width = min_width != -1 ? int.min(min_width, natural_width) : natural_width;
+        double exact_width = -1, exact_height = height;
+        calculate_size(ref exact_width, ref exact_height);
+        natural_width = (int) Math.ceil(exact_width);
+        minimum_width = natural_width;
     }
 
     public override SizeRequestMode get_request_mode() {
         return SizeRequestMode.HEIGHT_FOR_WIDTH;
     }
 }
-}
\ No newline at end of file
+}
diff --git a/main/src/ui/util/sizing_bin.vala b/main/src/ui/util/sizing_bin.vala
index b81ff7e3..9c5ff4c7 100644
--- a/main/src/ui/util/sizing_bin.vala
+++ b/main/src/ui/util/sizing_bin.vala
@@ -1,7 +1,7 @@
 using Gtk;
 
 namespace Dino.Ui {
-class SizingBin : Bin {
+public class SizingBin : Bin {
     public int min_width { get; set; default = -1; }
     public int target_width { get; set; default = -1; }
     public int max_width { get; set; default = -1; }
@@ -32,4 +32,4 @@ class SizingBin : Bin {
     }
 
 }
-}
\ No newline at end of file
+}