[MIG] attachment_preview: Migration to 14.0

attachment_preview/__manifest__.py

@@ -3,10 +3,11 @@
 
 {
     "name": "Preview attachments",
-    "version": "12.0.1.0.2",
+    "version": "14.0.1.0.0",
     "author": "Therp BV," "Onestein," "Odoo Community Association (OCA)",
     "license": "AGPL-3",
     "summary": "Preview attachments supported by Viewer.js",
+    "website": "https://github.com/OCA/knowledge",
     "category": "Knowledge Management",
     "depends": ["web", "mail"],
     "data": ["templates/assets.xml"],

attachment_preview/models/ir_attachment.py

@@ -25,9 +25,7 @@ class IrAttachment(models.Model):
             for this in (
                 self.env[model].with_context(bin_size=True).browse(ids_to_browse)
             ):
-                if not this.id:
+                result[this.id] = False
-                    result[this.id] = False
-                    continue
                 extension = ""
                 if this[filename_field]:
                     filename, extension = os.path.splitext(this[filename_field])
@@ -42,9 +40,7 @@ class IrAttachment(models.Model):
         #  to get the extension from the content
         ids_to_browse = [_id for _id in ids_to_browse if _id not in result]
         for this in self.env[model].with_context(bin_size=True).browse(ids_to_browse):
-            if not this[binary_field]:
+            result[this.id] = False
-                result[this.id] = False
-                continue
             try:
                 import magic
 
@@ -52,17 +48,17 @@ class IrAttachment(models.Model):
                     mimetype = magic.from_file(
                         this._full_path(this.store_fname), mime=True
                     )
-                    _logger.debug(
+                    # _logger.debug(
-                        "Magic determined mimetype %s from file %s",
+                    #     "Magic determined mimetype %s from file %s",
-                        mimetype,
+                    #     mimetype,
-                        this.store_fname,
+                    #     this.store_fname,
-                    )
+                    # )
                 else:
                     mimetype = magic.from_buffer(this[binary_field], mime=True)
-                    _logger.debug("Magic determined mimetype %s from buffer", mimetype)
+                    # _logger.debug("Magic determined mimetype %s from buffer", mimetype)
             except ImportError:
                 (mimetype, encoding) = mimetypes.guess_type(
-                    "data:;base64," + this[binary_field], strict=False
+                    "data:;base64," + this[binary_field].decode("utf-8"), strict=False
                 )
                 _logger.debug("Mimetypes guessed type %s from buffer", mimetype)
             extension = mimetypes.guess_extension(mimetype.split(";")[0], strict=False)
@@ -73,4 +69,4 @@ class IrAttachment(models.Model):
 
     @api.model
     def get_attachment_extension(self, ids):
-        return self.get_binary_extension(self._name, ids, "datas", "datas_fname")
+        return self.get_binary_extension(self._name, ids, "datas", "name")

attachment_preview/static/src/js/attachment_preview.js

@@ -1,280 +1,157 @@
-/* Copyright 2014 Therp BV (<http://therp.nl>)
+odoo.define("/attachment_preview/static/src/js/attachment_preview.js", function (
- * License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl). */
+    require
-
+) {
-odoo.define("attachment_preview", function (require) {
     "use strict";
-
+    const components = {
-    var core = require("web.core");
+        Attachment: require("mail/static/src/components/attachment/attachment.js"),
-    var _t = core._t;
+        Chatter: require("mail/static/src/components/chatter/chatter.js"),
-    var qweb = core.qweb;
+        ChatterContainer: require("mail/static/src/components/chatter_container/chatter_container.js"),
-    var Chatter = require("mail.Chatter");
+    };
+    const {patch} = require("web.utils");
+    var rpc = require("web.rpc");
     var basic_fields = require("web.basic_fields");
     var FormRenderer = require("web.FormRenderer");
-    var FormController = require("web.FormController");
     var Widget = require("web.Widget");
+    var core = require("web.core");
+    var _t = core._t;
 
-    var AttachmentPreviewMixin = {
+    var chatterpreviewableAttachments = [];
-        canPreview: function (extension) {
+    var active_attachment_id = 0;
-            return (
+    var active_attachment_index = 0;
-                $.inArray(extension, [
+    var first_click = true;
-                    "odt",
-                    "odp",
-                    "ods",
-                    "fodt",
-                    "pdf",
-                    "ott",
-                    "fodp",
-                    "otp",
-                    "fods",
-                    "ots",
-                ]) > -1
-            );
-        },
 
-        getUrl: function (
+    function canPreview(extension) {
-            attachment_id,
+        return (
-            attachment_url,
+            $.inArray(extension, [
-            attachment_extension,
+                "odt",
-            attachment_title
+                "odp",
-        ) {
+                "ods",
-            var url =
+                "fodt",
-                (window.location.origin || "") +
+                "pdf",
-                "/attachment_preview/static/lib/ViewerJS/index.html" +
+                "ott",
-                "?type=" +
+                "fodp",
-                encodeURIComponent(attachment_extension) +
+                "otp",
-                "&title=" +
+                "fods",
-                encodeURIComponent(attachment_title) +
+                "ots",
-                "#" +
+            ]) > -1
-                attachment_url.replace(window.location.origin, "");
+        );
+    }
+
+    function getUrl(
+        attachment_id,
+        attachment_url,
+        attachment_extension,
+        attachment_title
+    ) {
+        if (attachment_url) {
+            var url = "";
+            if (attachment_url.slice(0, 21) === "/web/static/lib/pdfjs") {
+                url = (window.location.origin || "") + attachment_url;
+            } else {
+                url =
+                    (window.location.origin || "") +
+                    "/attachment_preview/static/lib/ViewerJS/index.html" +
+                    "?type=" +
+                    encodeURIComponent(attachment_extension) +
+                    "&title=" +
+                    encodeURIComponent(attachment_title) +
+                    "#" +
+                    attachment_url.replace(window.location.origin, "");
+            }
             return url;
-        },
+        }
+        url =
+            (window.location.origin || "") +
+            "/attachment_preview/static/lib/ViewerJS/index.html" +
+            "?type=" +
+            encodeURIComponent(attachment_extension) +
+            "&title=" +
+            encodeURIComponent(attachment_title) +
+            "#" +
+            "/web/content/" +
+            attachment_id +
+            "?model%3Dir.attachment";
+        return url;
+    }
 
-        showPreview: function (
+    const attachment = patch(
-            attachment_id,
+        components.Attachment,
-            attachment_url,
+        "mail/static/src/components/attachment/attachment.js",
-            attachment_extension,
+        {
-            attachment_title,
+            events: _.extend({}, components.Chatter.prototype.events, {
-            split_screen
+                "click .o_attachment_preview": "_onPreviewAttachment",
-        ) {
+            }),
-            var url = this.getUrl(
+
+            showPreview(
                 attachment_id,
                 attachment_url,
                 attachment_extension,
-                attachment_title
+                attachment_title,
-            );
+                split_screen
-            if (split_screen) {
+            ) {
-                this.trigger_up("onAttachmentPreview", {url: url});
+                chatterpreviewableAttachments.forEach((att) => {
-            } else {
+                    if (parseInt(att.id, 10) === attachment_id) {
-                window.open(url);
+                        if (att.url === undefined) {
-            }
+                            att.url = attachment_url.slice(
-        },
+                                window.location.origin.length
-    };
+                            );
-
+                        }
-    Chatter.include(AttachmentPreviewMixin);
+                    }
-    Chatter.include({
-        events: _.extend({}, Chatter.prototype.events, {
-            "click .o_attachment_preview": "_onPreviewAttachment",
-        }),
-
-        previewableAttachments: null,
-
-        _openAttachmentBox: function () {
-            var res = this._super.apply(this, arguments);
-
-            this.getPreviewableAttachments().done(
-                function (atts) {
-                    this.previewableAttachments = atts;
-                    this.updatePreviewButtons(atts);
-                    this.getParent().attachmentPreviewWidget.setAttachments(atts);
-                }.bind(this)
-            );
-
-            return res;
-        },
-
-        update: function () {
-            var res = this._super.apply(this, arguments);
-            var self = this;
-            if (this.getParent().$el.hasClass("attachment_preview")) {
-                this._fetchAttachments().done(function () {
-                    self._openAttachmentBox();
-                    self.getPreviewableAttachments().done(function (atts) {
-                        self.updatePreviewButtons(self.previewableAttachments);
-                        self.previewableAttachments = atts;
-                        self.getParent().attachmentPreviewWidget.setAttachments(atts);
-                    });
                 });
-            }
+                var url = getUrl(
-            return res;
-        },
-
-        _onPreviewAttachment: function (event) {
-            event.preventDefault();
-            var self = this,
-                $target = $(event.currentTarget),
-                split_screen = $target.attr("data-target") !== "new",
-                attachment_id = parseInt($target.attr("data-id"), 10),
-                attachment_url = $target.attr("data-url"),
-                attachment_extension = $target.attr("data-extension"),
-                attachment_title = $target.attr("data-original-title");
-
-            if (attachment_extension) {
-                this.showPreview(
                     attachment_id,
                     attachment_url,
                     attachment_extension,
-                    attachment_title,
+                    attachment_title
-                    split_screen
                 );
-            } else {
+                if (split_screen) {
-                this._rpc({
+                    this.trigger("onAttachmentPreview", {url: url});
-                    model: "ir.attachment",
+                } else {
-                    method: "get_attachment_extension",
+                    window.open(url);
-                    args: [attachment_id],
+                }
-                }).then(function (extension) {
+            },
-                    self.showPreview(
+
+            _onPreviewAttachment(event) {
+                first_click = true;
+                event.preventDefault();
+                var $target = $(event.currentTarget),
+                    split_screen = $target.attr("data-target") !== "new",
+                    attachment_id = parseInt($target.attr("data-id"), 10),
+                    attachment_extension = "pdf",
+                    attachment_title = $target.attr("data-original-title"),
+                    attachment_url = this.attachmentUrl;
+                active_attachment_id = attachment_id;
+
+                if (attachment_extension) {
+                    this.showPreview(
                         attachment_id,
                         attachment_url,
-                        extension,
+                        attachment_extension,
-                        null,
+                        attachment_title,
                         split_screen
                     );
-                });
-            }
-        },
-
-        getPreviewableAttachments: function () {
-            var self = this;
-            var deferred = $.Deferred();
-
-            var $items = this.$el.find(".o_attachment_preview");
-            var attachments = _.object(
-                $items.map(function () {
-                    return parseInt($(this).attr("data-id"), 10);
-                }),
-                $items.map(function () {
-                    return {
-                        url: $(this).attr("data-url"),
-                        extension: $(this).attr("data-extension"),
-                        title: $(this).attr("data-original-title"),
-                    };
-                })
-            );
-
-            this._rpc({
-                model: "ir.attachment",
-                method: "get_attachment_extension",
-                args: [
-                    _.map(_.keys(attachments), function (id) {
-                        return parseInt(id, 10);
-                    }),
-                ],
-            }).then(
-                function (extensions) {
-                    var reviewableAttachments = _.map(
-                        _.keys(
-                            _.pick(extensions, function (extension, id) {
-                                return self.canPreview(extension);
-                            })
-                        ),
-                        function (id) {
-                            return {
-                                id: id,
-                                url: attachments[id].url,
-                                extension: extensions[id],
-                                title: attachments[id].title,
-                                previewUrl: self.getUrl(
-                                    id,
-                                    attachments[id].url,
-                                    extensions[id],
-                                    id + " - " + attachments[id].title
-                                ),
-                            };
-                        }
-                    );
-                    deferred.resolve(reviewableAttachments);
-                },
-                function () {
-                    deferred.reject();
-                }
-            );
-            return deferred.promise();
-        },
-
-        updatePreviewButtons: function (previewableAttachments) {
-            this.$el.find(".o_attachment_preview").each(function () {
-                var $this = $(this);
-                var id = $this.attr("data-id");
-                var att = _.findWhere(previewableAttachments, {id: id});
-                if (att) {
-                    $this.attr("data-extension", att.extension);
                 } else {
-                    $this.remove();
+                    rpc.query({
+                        model: "ir.attachment",
+                        method: "get_attachment_extension",
+                        args: [attachment_id],
+                    }).then(function (extension) {
+                        this.showPreview(
+                            attachment_id,
+                            attachment_url,
+                            extension,
+                            null,
+                            split_screen
+                        );
+                    });
                 }
-            });
+            },
-        },
+        }
-    });
+    );
-
-    basic_fields.FieldBinaryFile.include(AttachmentPreviewMixin);
-    basic_fields.FieldBinaryFile.include({
-        events: _.extend({}, basic_fields.FieldBinaryFile.prototype.events, {
-            "click .fa-search": "_onPreview",
-        }),
-
-        _renderReadonly: function () {
-            var self = this;
-            this._super.apply(this, arguments);
-
-            if (this.recordData.id) {
-                this._getBinaryExtension().done(function (extension) {
-                    if (self.canPreview(extension)) {
-                        self._renderPreviewButton(extension);
-                    }
-                });
-            }
-        },
-
-        _renderPreviewButton: function (extension) {
-            this.$previewBtn = $("<a/>");
-            this.$previewBtn.addClass("fa fa-search mr-2");
-            this.$previewBtn.attr("href", "javascript:void(0)");
-            this.$previewBtn.attr(
-                "title",
-                _.str.sprintf(_t("Preview %s"), this.field.string)
-            );
-            this.$previewBtn.attr("data-extension", extension);
-            this.$el.find(".fa-download").before(this.$previewBtn);
-        },
-
-        _getBinaryExtension: function () {
-            return this._rpc({
-                model: "ir.attachment",
-                method: "get_binary_extension",
-                args: [this.model, this.recordData.id, this.name, this.attrs.filename],
-            });
-        },
-
-        _onPreview: function (event) {
-            this.showPreview(
-                null,
-                _.str.sprintf(
-                    "/web/content?model=%s&field=%s&id=%d",
-                    this.model,
-                    this.name,
-                    this.recordData.id
-                ),
-                $(event.currentTarget).attr("data-extension"),
-                _.str.sprintf(_t("Preview %s"), this.field.string),
-                false
-            );
-            event.stopPropagation();
-        },
-    });
 
     var AttachmentPreviewWidget = Widget.extend({
         template: "attachment_preview.AttachmentPreviewWidget",
         activeIndex: 0,
-        attachments: null,
 
         events: {
             "click .attachment_preview_close": "_onCloseClick",
@@ -284,10 +161,11 @@ odoo.define("attachment_preview", function (require) {
         },
 
         start: function () {
+            first_click = true;
             var res = this._super.apply(this, arguments);
-            this.$overlay = this.$el.find(".attachment_preview_overlay");
+            this.$overlay = $(".attachment_preview_overlay");
-            this.$iframe = this.$el.find(".attachment_preview_iframe");
+            this.$iframe = $(".attachment_preview_iframe");
-            this.$current = this.$el.find(".attachment_preview_current");
+            this.$current = $(".attachment_preview_current");
             return res;
         },
 
@@ -312,6 +190,9 @@ odoo.define("attachment_preview", function (require) {
         },
 
         next: function () {
+            if (first_click) {
+                first_click = !first_click;
+            }
             var index = this.activeIndex + 1;
             if (index >= this.attachments.length) {
                 index = 0;
@@ -322,6 +203,10 @@ odoo.define("attachment_preview", function (require) {
         },
 
         previous: function () {
+            if (first_click) {
+                first_click = !first_click;
+            }
+            first_click = true;
             var index = this.activeIndex - 1;
             if (index < 0) {
                 index = this.attachments.length - 1;
@@ -337,6 +222,7 @@ odoo.define("attachment_preview", function (require) {
         },
 
         hide: function () {
+            first_click = true;
             this.$el.addClass("d-none");
             this.trigger("hidden");
         },
@@ -347,6 +233,9 @@ odoo.define("attachment_preview", function (require) {
                 this.activeIndex + 1,
                 this.attachments.length
             );
+            this.$overlay = $(".attachment_preview_overlay");
+            this.$iframe = $(".attachment_preview_iframe");
+            this.$current = $(".attachment_preview_current");
             this.$current.html(value);
         },
 
@@ -356,15 +245,243 @@ odoo.define("attachment_preview", function (require) {
                 return;
             }
 
-            var att = this.attachments[this.activeIndex];
+            if (first_click) {
+                for (let i = 0; i < this.attachments.length; i++) {
+                    if (this.attachments[i].id === active_attachment_id.toString()) {
+                        active_attachment_index = i;
+                        first_click = false;
+                    }
+                }
+            } else {
+                active_attachment_index = this.activeIndex;
+            }
+
+            var att = this.attachments[active_attachment_index];
             this.$iframe.attr("src", att.previewUrl);
         },
 
         setAttachments: function (attachments) {
-            this.attachments = attachments;
+            if (attachments) {
-            this.activeIndex = 0;
+                this.attachments = attachments;
-            this.updatePaginator();
+                this.activeIndex = 0;
-            this.loadPreview();
+                this.updatePaginator();
+                this.loadPreview();
+            }
+        },
+    });
+
+    const chatter = patch(
+        components.Chatter,
+        "mail/static/src/components/chatter/chatter.js",
+        {
+            showPreview(
+                attachment_id,
+                attachment_url,
+                attachment_extension,
+                attachment_title,
+                split_screen
+            ) {
+                var url = getUrl(
+                    attachment_id,
+                    attachment_url,
+                    attachment_extension,
+                    attachment_title
+                );
+                if (split_screen) {
+                    this.trigger("onAttachmentPreview", {url: url});
+                } else {
+                    window.open(url);
+                }
+            },
+
+            /**
+             * @override
+             */
+            _update() {
+                var self = this;
+
+                setTimeout(() => {
+                    self.getPreviewableAttachments().then(
+                        function (atts) {
+                            this.previewableAttachments = atts;
+                            // This.updatePreviewButtons(this.previewableAttachments);
+                            this.updatePreviewButtons(this.previewableAttachments);
+                            if (!this.attachmentPreviewWidget) {
+                                this.attachmentPreviewWidget = new AttachmentPreviewWidget(
+                                    this
+                                );
+                                this.attachmentPreviewWidget.setAttachments(atts);
+                            }
+                            this.previewableAttachments = atts;
+                            chatterpreviewableAttachments = atts;
+                            this.attachmentPreviewWidget.setAttachments(atts);
+                        }.bind(this)
+                    );
+                }, 500);
+            },
+
+            getPreviewableAttachments: function () {
+                var deferred = $.Deferred();
+                var self = this;
+                var attachments = [];
+                const chatter_ref = this.env.models["mail.chatter"].get(
+                    self.props.chatterLocalId
+                );
+                const thread = chatter_ref ? chatter_ref.thread : undefined;
+                if (thread) {
+                    attachments = thread.allAttachments;
+                }
+
+                attachments = _.object(
+                    attachments.map((att) => {
+                        return parseInt(att.localId.slice(16), 10);
+                    }),
+                    attachments.map((at) => {
+                        if (at.defaultSource) {
+                            return {
+                                url: at.defaultSource,
+                                extension: at.extension,
+                                title: at.name,
+                            };
+                        }
+                        return {
+                            url: "/web/content?id=" + at.id + "&download=true",
+                            extension: at.extension,
+                            title: at.name,
+                        };
+                    })
+                );
+
+                rpc.query({
+                    model: "ir.attachment",
+                    method: "get_attachment_extension",
+                    args: [
+                        _.map(_.keys(attachments), function (id) {
+                            return parseInt(id, 10);
+                        }),
+                    ],
+                }).then(
+                    function (extensions) {
+                        var reviewableAttachments = _.map(
+                            _.keys(
+                                _.pick(extensions, function (extension) {
+                                    return canPreview(extension);
+                                })
+                            ),
+                            function (id) {
+                                return {
+                                    id: id,
+                                    url: attachments[id].url,
+                                    extension: extensions[id],
+                                    title: attachments[id].title,
+                                    previewUrl: getUrl(
+                                        id,
+                                        attachments[id].url,
+                                        extensions[id],
+                                        attachments[id].title
+                                    ),
+                                };
+                            }
+                        );
+                        deferred.resolve(reviewableAttachments);
+                    },
+
+                    function () {
+                        deferred.reject();
+                    }
+                );
+                return deferred.promise();
+            },
+
+            updatePreviewButtons: function (previewableAttachments) {
+                $(this)
+                    .find(".o_attachment_preview")
+                    .each(function () {
+                        var $this = $(this);
+                        var att = _.findWhere(previewableAttachments, {
+                            id: $this.attr("data-id"),
+                        });
+                        if (att) {
+                            $this.attr("data-extension", att.extension);
+                        } else {
+                            $this.remove();
+                        }
+                    });
+            },
+        }
+    );
+
+    basic_fields.FieldBinaryFile.include(components.Chatter);
+    basic_fields.FieldBinaryFile.include({
+        showPreview(
+            attachment_id,
+            attachment_url,
+            attachment_extension,
+            attachment_title,
+            split_screen
+        ) {
+            var url = getUrl(
+                attachment_id,
+                attachment_url,
+                attachment_extension,
+                attachment_title
+            );
+            if (split_screen) {
+                this.trigger("onAttachmentPreview", {url: url});
+            } else {
+                window.open(url);
+            }
+        },
+
+        _renderReadonly: function () {
+            var self = this;
+            this._super.apply(this, arguments);
+
+            if (this.recordData.id) {
+                this._getBinaryExtension().then(function (extension) {
+                    if (canPreview(extension)) {
+                        // Self._renderPreviewButton(extension, recordData);
+                        self._renderPreviewButton(extension);
+                    }
+                });
+            }
+        },
+
+        _renderPreviewButton: function (extension) {
+            this.$previewBtn = $("<a/>");
+            this.$previewBtn.addClass("fa fa-external-link mr-2");
+            this.$previewBtn.attr("href");
+            this.$previewBtn.attr(
+                "title",
+                _.str.sprintf(_t("Preview %s"), this.field.string)
+            );
+            this.$previewBtn.attr("data-extension", extension);
+            this.$el.find(".fa-download").after(this.$previewBtn);
+            this.$previewBtn.on("click", this._onPreview.bind(this));
+        },
+
+        _getBinaryExtension: function () {
+            return rpc.query({
+                model: "ir.attachment",
+                method: "get_binary_extension",
+                args: [this.model, this.recordData.id, this.name, this.attrs.filename],
+            });
+        },
+
+        _onPreview: function (event) {
+            this.showPreview(
+                null,
+                _.str.sprintf(
+                    "/web/content?model=%s&field=%s&id=%d",
+                    this.model,
+                    this.name,
+                    this.recordData.id
+                ),
+                $(event.currentTarget).attr("data-extension"),
+                _.str.sprintf(_t("Preview %s"), this.field.string),
+                false
+            );
+            event.stopPropagation();
         },
     });
 
@@ -372,11 +489,10 @@ odoo.define("attachment_preview", function (require) {
         custom_events: _.extend({}, FormRenderer.prototype.custom_events, {
             onAttachmentPreview: "_onAttachmentPreview",
         }),
-
         attachmentPreviewWidget: null,
 
         init: function () {
-            var res = this._super.apply(this, arguments);
+            var res = this._super(...arguments);
             this.attachmentPreviewWidget = new AttachmentPreviewWidget(this);
             this.attachmentPreviewWidget.on(
                 "hidden",
@@ -389,7 +505,7 @@ odoo.define("attachment_preview", function (require) {
         start: function () {
             var self = this;
             return this._super.apply(this, arguments).then(function () {
-                return self.attachmentPreviewWidget.insertAfter(self.$el);
+                self.attachmentPreviewWidget.insertAfter(self.$el);
             });
         },
 
@@ -399,10 +515,8 @@ odoo.define("attachment_preview", function (require) {
 
         showAttachmentPreviewWidget: function () {
             this.$el.addClass("attachment_preview");
-
+            this.chatterpreviewableAttachments = chatterpreviewableAttachments;
-            this.attachmentPreviewWidget.setAttachments(
+            this.attachmentPreviewWidget.setAttachments(chatterpreviewableAttachments);
-                this.chatter.previewableAttachments
-            );
             this.attachmentPreviewWidget.show();
         },
 
@@ -411,13 +525,14 @@ odoo.define("attachment_preview", function (require) {
             return this._super.apply(this, arguments);
         },
 
-        _onAttachmentPreview: function (event) {
+        _onAttachmentPreview: function () {
             this.showAttachmentPreviewWidget();
         },
     });
 
     return {
-        AttachmentPreviewMixin: AttachmentPreviewMixin,
+        attachment,
+        chatter,
         AttachmentPreviewWidget: AttachmentPreviewWidget,
     };
 });

attachment_preview/static/src/js/viewerjs_tweaks.js

@@ -4,6 +4,7 @@
 // This file contains tweaks for viewerjs itself and is not meant to be run in
 // OpenERP's context
 (function (original_Viewer) {
+    "use strict";
     window.Viewer = function (plugin, parameters) {
         if (!plugin) {
             // eslint-disable-next-line no-alert

attachment_preview/static/src/scss/attachment_preview.scss

@@ -55,3 +55,10 @@
         }
     }
 }
+
+.o_group {
+    .mr-2,
+    .mx-2 {
+        margin-left: 0.5rem !important;
+    }
+}

attachment_preview/static/src/xml/attachment_preview.xml

@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t
+        t-name="Attachment"
+        t-inherit="mail.Attachment"
+        t-inherit-mode="extension"
+        owl="1"
+    >
+        <xpath expr="//div[hasclass('o_Attachment_aside')]" position="before">
+            <div class="o_Attachment_aside o-has-multiple-action">
+                <div
+                    t-if="attachmentUrl"
+                    class="o_Attachment_asideItem ml4 o_attachment_preview"
+                    t-att-data-id="attachment.id"
+                    t-att-data-url="attachmentUrl"
+                    t-on-click="_onPreviewAttachment"
+                    t-att-data-original-title="attachment.name"
+                    t-attf-title="Preview {{attachment.name}} in side panel"
+                    tabindex="0"
+                    role="menuitem"
+                >
+                    <i class="fa fa-search" />
+                </div>
+                <div
+                    t-if="attachmentUrl"
+                    class="o_Attachment_asideItem ml4 o_attachment_preview o_attachment_preview_new_tab"
+                    data-target="new"
+                    t-att-data-id="attachment.id"
+                    t-att-data-url="attachmentUrl"
+                    t-on-click="_onPreviewAttachment"
+                    t-att-data-original-title="attachment.name"
+                    t-attf-title="Open preview {{attachment.name}} in a new tab"
+                    tabindex="0"
+                    role="menuitem"
+                >
+                    <i class="fa fa-external-link" />
+                </div>
+            </div>
+        </xpath>
+    </t>
+
+    <t t-name="attachment_preview.AttachmentPreviewWidget">
+        <div class="attachment_preview_widget d-none">
+            <div class="attachment_preview_buttons">
+                <div class="button-group pull-left">
+                    <button
+                        class="btn btn-sm btn-secondary attachment_preview_previous"
+                    ><i class="fa fa-chevron-left" /></button>
+                    <button
+                        class="btn btn-sm btn-secondary disabled attachment_preview_current"
+                    >1 / 2</button>
+                    <button class="btn btn-sm btn-secondary attachment_preview_next"><i
+                            class="fa fa-chevron-right"
+                        /></button>
+                </div>
+                <button
+                    class="btn btn-sm btn-secondary pull-left ml8 attachment_preview_popout"
+                ><i class="fa fa-external-link" /></button>
+
+                <button
+                    class="btn btn-sm btn-secondary pull-right attachment_preview_close"
+                ><i class="fa fa-times" /></button>
+            </div>
+            <iframe class="attachment_preview_iframe" />
+        </div>
+    </t>
+</templates>

attachment_preview/templates/assets.xml

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<odoo>
+    <template
+        id="assets_backend"
+        name="attachment_preview assets"
+        inherit_id="web.assets_backend"
+    >
+        <xpath expr="." position="inside">
+            <script
+                type="text/javascript"
+                src="/attachment_preview/static/src/js/attachment_preview.js"
+            />
+            <link
+                rel="stylesheet"
+                type="text/scss"
+                href="/attachment_preview/static/src/scss/attachment_preview.scss"
+            />
+        </xpath>
+    </template>
+</odoo>

attachment_preview/tests/test_attachment_preview.py

@@ -9,18 +9,10 @@ from odoo.tests.common import TransactionCase
 class TestAttachmentPreview(TransactionCase):
     def test_get_extension(self):
         attachment = self.env["ir.attachment"].create(
-            {
+            {"datas": base64.b64encode(b"from this, to that."), "name": "doc.txt"}
-                "datas": base64.b64encode(b"from this, to that."),
-                "name": "doc.txt",
-                "datas_fname": "doc.txt",
-            }
         )
         attachment2 = self.env["ir.attachment"].create(
-            {
+            {"datas": base64.b64encode(b"Png"), "name": "image.png"}
-                "datas": base64.b64encode(b"Png"),
-                "name": "image.png",
-                "datas_fname": "image.png",
-            }
         )
         res = self.env["ir.attachment"].get_attachment_extension(attachment.id)
         self.assertEqual(res, "txt")