[IMP] fs_image: Add download button

On image hover, a download button is now available to easily download the image
OCA · Nov 22, 2024 · 5666071 · 5666071
1 parent 0f35e5c
commit 5666071
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 18 deletions.
diff --git a/fs_image/static/src/scss/fsimage_field.scss b/fs_image/static/src/scss/fsimage_field.scss
@@ -0,0 +1,5 @@
+.fs_file_download_button {
+    top: 10% !important;
+    left: 50% !important;
+    position: absolute !important;
+}
diff --git a/fs_image/static/src/views/fields/fsimage_field.esm.js b/fs_image/static/src/views/fields/fsimage_field.esm.js
@@ -11,6 +11,7 @@ import {
 } from "@web/views/fields/image/image_field";
 import {AltTextDialog} from "../dialogs/alttext_dialog.esm";
 import {_t} from "@web/core/l10n/translation";
+import {download, downloadFile} from "@web/core/network/download";
 import {registry} from "@web/core/registry";
 import {useService} from "@web/core/utils/hooks";
 import {url as utilUrl} from "@web/core/utils/urls";
@@ -80,6 +81,27 @@ export class FSImageField extends ImageField {
         };
         this.dialogService.add(AltTextDialog, dialogProps);
     }
+    async onFileDownload() {
+        if (this.props.value.content) {
+            const magic = fileTypeMagicWordMap[this.props.value.content[0]] || "png";
+            await downloadFile(
+                `data:image/${magic};base64,${this.props.value.content}`,
+                this.state.filename,
+                `image/${magic}`
+            );
+        } else {
+            await download({
+                data: {
+                    model: this.props.record.resModel,
+                    id: this.props.record.resId,
+                    field: this.props.name,
+                    filename: this.state.filename || "download",
+                    download: true,
+                },
+                url: "/web/image",
+            });
+        }
+    }
 }
 
 FSImageField.template = "fs_image.FSImageField";

diff --git a/fs_image/static/src/views/fields/fsimage_field.xml b/fs_image/static/src/views/fields/fsimage_field.xml
@@ -23,24 +23,24 @@
                                 <i class="fa fa-pencil fa-fw" />
                             </button>
                         </t>
-                        <button
-                            t-if="props.record.data[props.name] and state.isValid"
-                            class="o_add_alter_text_button btn btn-light border-0 rounded-circle m-1 p-1"
-                            data-tooltip="Alt Text"
-                            aria-label="Set Alt Text"
-                            t-on-click="onAltTextEdit"
-                        >
-                            <i class="fa fa-blind fa-fw" />
-                        </button>
-                        <button
-                            t-if="props.record.data[props.name] and state.isValid"
-                            class="o_clear_file_button btn btn-light border-0 rounded-circle m-1 p-1"
-                            data-tooltip="Clear"
-                            aria-label="Clear"
-                            t-on-click="onFileRemove"
-                        >
-                            <i class="fa fa-trash-o fa-fw" />
-                        </button>
+                        <t t-if="props.record.data[props.name] and state.isValid">
+                            <button
+                                class="o_alt_text_file_button btn btn-light border-0 rounded-circle m-1 p-1"
+                                data-tooltip="Alt Text"
+                                aria-label="Set Alt Text"
+                                t-on-click="onAltTextEdit"
+                            >
+                                <i class="fa fa-blind fa-fw" />
+                            </button>
+                            <button
+                                class="o_clear_file_button btn btn-light border-0 rounded-circle m-1 p-1"
+                                data-tooltip="Clear"
+                                aria-label="Clear"
+                                t-on-click="onFileRemove"
+                            >
+                                <i class="fa fa-trash-o fa-fw" />
+                            </button>
+                        </t>
                     </FileUploader>
                 </t>
             </div>
@@ -59,6 +59,16 @@
                 t-att-data-tooltip-info="hasTooltip and tooltipAttributes.info"
                 t-att-data-tooltip-delay="hasTooltip and props.zoomDelay"
             />
+            <button
+                t-if="props.value and state.isValid"
+                class="fs_file_download_button btn btn-light border-0 rounded-circle m-1 p-1 translate-middle opacity-0 opacity-100-hover"
+                data-tooltip="Download"
+                aria-label="Download"
+                t-on-click="onFileDownload"
+            >
+                <i class="fa fa-download fa-fw" />
+            </button>
+
         </div>
     </t>