Introduction

The Images Drag And Drop Widgets module is a state-of-the-art solution designed to enhance your Odoo experience by integrating modern, user-friendly drag and drop image widgets.

Who Can Benefit?

Whether you run an e-commerce site, a media portal, a real estate listing platform, or any business that requires the handling of multiple images per record, this module is built for you. Enjoy:

• E-commerce websites: Easily manage product images with a simple drag and drop interface.
• Businesses with heavy media content: Quickly update portfolios, galleries, and listings.
• Developers and Designers: Seamlessly integrate modern widgets across all modules—no extra dependency required!

Use Cases

Online Stores: Showcase products with multiple images that can be easily updated on-the-fly.

Real Estate Platforms: Effortlessly manage property photos, floor plans, and virtual tours.

Agencies & Portfolios: Create visually appealing portfolios where media speaks louder than words.

Benefits

With our module, say goodbye to tedious file uploads and hello to a more engaging user experience. It’s simple, robust, and designed to boost your productivity!

Installation

Follow these detailed steps to install the eis_drag_drop module:

1. Download the Module: Obtain the module as a ZIP file from the official repository or your vendor.
2. Extract the ZIP: Unzip the downloaded file to reveal the module folder.
3. Copy to Addons Folder: Move or copy the extracted module folder into your Odoo addons directory.
4. Restart Odoo Service:
   • On systemd-based systems: sudo systemctl restart odoo
   • On SysVinit-based systems: sudo service odoo restart
   • Or use the appropriate command for your OS.
5. Update App List: In your Odoo database, navigate to the Apps menu and click Update Apps List.
6. Install the Module: Search for Drag and Drop Widgets (or eis_drag_drop) and click install.

User Guide

Updating Existing Image Fields

You can update any existing binary image field to use our drag and drop widget without altering your custom modules. Simply update your XML views by setting the widget attribute to:

                        <field name="image_field" widget="d_and_d_image" options="{
                            "image_size": "150x150",
                            "preview_image": "image_128",
                            "acceptedFileExtensions": "image/*",
                            "enableZoom": true,
                            "additionalStyles": "border:2px solid #007bff;"
                            }>
                            </field>
                        
                    

Options Explained:

• image_size: Defines the display size of the widget. Example: "150x150" sets the width to 150px and height to 150px.
• preview_image: Specifies the field used for the image preview. If not set, it defaults to the binary field name.
• acceptedFileExtensions: Determines which image formats can be uploaded.
• enableZoom: If true, hovering over the image displays a zoom popup.
• additionalStyles: Custom CSS styles that are appended to the widget's inline styles.

Detailed O2M Setup & Custom Integration

For One2Many fields, our widget transforms the standard image upload into a dynamic drag and drop area. Note: The related model must have a Kanban view defined that includes at least the name and image (or image_1920) fields.

Why a Kanban View? The Kanban view enables the widget to render image previews instead of just record IDs. Without it, you may only see numerical identifiers.

Form View for Videos & Manual Entry: If you wish to add videos or manually add images in the traditional way, ensure that your One2Many field is also accessible via a form view.

Example of One2Many Field Integration

                        <page name="media" string="Extra Media">
                            <field name="media_ids" widget="d_and_d_images"
                            options="{
                            'childImageField': 'image_1920',
                            'extraData': {
                            'categ_id': 1,
                            'enable_zoom': true,
                            'previewImage': 'image_128',
                            'cssStyles': 'width:150px; height:200px; border-radius:15px;'
                            }
                            }"/>
                            </page>
                        
                    

Options Explained:

• childImageField: Specifies the field in the child model where the binary image data is stored. This is mandatory for the widget to function correctly. If not specified, image_1920 will be used.
• extraData: Allows you to pass additional data to the child records. This can include:
  • categ_id: An example field that sets a default category ID. This feature allows you to add any additional field and its value if your model has a required field and without it, it cannot create new records, or a field that you need to fill with static data.
  • sale_ok: This is another example field and you can pass any bool value if your required field is bool type
  • previewImage: Specifies a smaller image field to use for previews, which is important if you want to show a smaller size image to save bandwidth. This value should be used if your model is inherited from image.mixin and you want to display a smaller preview image.
  • cssStyles: Custom CSS styles for the image display. Example: "width:150px; height:200px; border-radius:15px; object-fit:cover;".
• acceptedFileExtensions: Determines which file types are acceptable for upload. Default is "image/*".

User Guide

Updating Existing Image Fields

You can update any existing binary image field to use our drag and drop widget without altering your custom modules. Simply update your XML views by setting the widget attribute to:

                        <field name="image_field" widget="d_and_d_image" options="{
                            "image_size": "150x150",
                            "preview_image": "image_128",
                            "acceptedFileExtensions": "image/*",
                            "enableZoom": true,
                            "additionalStyles": "border:2px solid #007bff;"
                            }>
                            </field>
                        
                    

Options Explained:

• image_size: Defines the display size of the widget. Example: "150x150" sets the width to 150px and height to 150px.
• preview_image: Specifies the field used for the image preview. If not set, it defaults to the binary field name.
• acceptedFileExtensions: Determines which image formats can be uploaded.
• enableZoom: If true, hovering over the image displays a zoom popup.
• additionalStyles: Custom CSS styles that are appended to the widget's inline styles.

Detailed O2M Setup & Custom Integration

For One2Many fields, our widget transforms the standard image upload into a dynamic drag and drop area. Note: The related model must have a Kanban view defined that includes at least the name and image (or image_1920) fields.

Why a Kanban View? The Kanban view enables the widget to render image previews instead of just record IDs. Without it, you may only see numerical identifiers.

Form View for Videos & Manual Entry: If you wish to add videos or manually add images in the traditional way, ensure that your One2Many field is also accessible via a form view.

Example of One2Many Field Integration

                        <page name="media" string="Extra Media">
                            <field name="media_ids" widget="d_and_d_images"
                            options="{
                            'childImageField': 'image_1920',
                            'extraData': {
                            'categ_id': 1,
                            'enable_zoom': true,
                            'previewImage': 'image_128',
                            'cssStyles': 'width:150px; height:200px; border-radius:15px;'
                            }
                            }"/>
                            </page>
                        
                    

Options Explained:

• childImageField: Specifies the field in the child model where the binary image data is stored. This is mandatory for the widget to function correctly. If not specified, image_1920 will be used.
• extraData: Allows you to pass additional data to the child records. This can include:
  • categ_id: An example field that sets a default category ID. This feature allows you to add any additional field and its value if your model has a required field and without it, it cannot create new records, or a field that you need to fill with static data.
  • sale_ok: This is another example field and you can pass any bool value if your required field is bool type.
  • previewImage: Specifies a smaller image field to use for previews, which is important if you want to show a smaller size image to save bandwidth. This value should be used if your model is inherited from image.mixin and you want to display a smaller preview image.
  • cssStyles: Custom CSS styles for the image display. Example: "width:150px; height:200px; border-radius:15px; object-fit:cover;".
• acceptedFileExtensions: Determines which file types are acceptable for upload. Default is "image/*".

Complete Example (Taken from Odoo builtin Code):

Adding Multiple Image Support to product.template

Let's say we have a model product.template and we need to add multiple image support to it. We will create a model product.image by inheriting from the image.mixin class. This way, we automatically get fields like image_1920 and other related fields for our model product.image.

Here are the steps to achieve this:

1. Create the product.image Model:

   Inherit from image.mixin to automatically get image-related fields.

                                   class ProductImage(models.Model):
                                       _name = 'product.image'
                                       _inherit = 'image.mixin'
   
                                       product_tmpl_id = fields.Many2one('product.template', string='Product Template')
                                       sequence = fields.Integer('Sequence')
                                       video_url = fields.Char('Video URL')
                                   
                               

2. Extend the product.template Model:

   Add a One2Many field to link multiple images.

                                   class ProductTemplate(models.Model):
                                       _inherit = 'product.template'
   
                                       product_template_image_ids = fields.One2many('product.image', 'product_tmpl_id',
                                       string='Images')
                                   
                               

3. Create a Kanban View for product.image:

   Add a Kanban view with the necessary fields.

                                   <record id="view_product_image_kanban" model="ir.ui.view">
                                       <field name="name">product.image.kanban</field>
                                       <field name="model">product.image</field>
                                       <field name="arch" type="xml">
                                       <kanban>
                                       <field name="id"/>
                                       <field name="name"/>
                                       <field name="image_1920" widget="image"/>
                                       <field name="sequence"/>
                                       </kanban>
                                       </field>
                                       </record>
                                   
                               

4. Create a Form View for product.image:

   Add a form view with fields for video URL and image.

                                   <record id="view_product_image_form" model="ir.ui.view">
                                       <field name="name">product.image.form</field>
                                       <field name="model">product.image</field>
                                       <field name="arch" type="xml">
                                       <form>
                                       <field name="id"/>
                                       <field name="name"/>
                                       <field name="video_url"/>
                                       <field name="image_1920" widget="image"/>
                                       </form>
                                       </field>
                                       </record>
                                   
                               

5. Update the product.template Form View:

   Add the One2Many field with the drag-and-drop widget.

                                   <record id="view_product_template_form" model="ir.ui.view">
                                       <field name="name">product.template.form</field>
                                       <field name="model">product.template</field>
                                       <field name="inherit_id" ref="product.product_template_only_form_view"/>
                                       <field name="arch" type="xml">
                                       <form>
                                       <sheet>
                                       <group>
                                       <field name="product_template_image_ids" widget="d_and_d_images" options="{
                                       'childImageField': 'image_1920',
                                       'extraData': {
                                       'cssStyles': 'width:150px;height:150px;'
                                       }
                                       }"/>
                                       </group>
                                       </sheet>
                                       </form>
                                       </field>
                                       </record>
                                   
                               

Screenshots Explaination

01

Drag and Drop Widget Overview

A clear view of the drag and drop widget areas for single binary image and for one2many images., allowing users to effortlessly update images.

02

One2Many Drag And Drop Explained

In this screenshot, you can see a simple explaination of the view. Each record's thumbnail, have a small cross on top right corner to remove a record, view also display video thumbnail, and buttons.

04

Add Video Button

This screenshot illustrates how the one2many field widget 'Add Video' button is working. You can access odoo builtin method being used in website_sale module of odoo to add extra media including videos or images.

05

Manual File Uploding Button Display

This screenshot illustrates how the one2many field widget manual upload button is working. If you want to upload images manually from file uploader, you can click on this button and it will open finder / file explorer for you. It will only allow images to upload with jpg, jpeg, png, svg etc

06

Iamges Dragging over One2many Field Display

This screenshot illustrates how the one2many field is being used to drop 4 images into drag drop area. Notice the blue border that is highlighted when we dragged the images over it. As soon as we will drop the images, they will be uploaded automatically

Video Explaination

Module Version Information & Changelog

90 Days Support

Explore Our Other Modules

Module 1: Advanced Reporting

Module 2: CRM Enhancements

Module 3: Inventory Optimizer

Best Practices & Troubleshooting

Code Snippets

Below are examples of typical XML view definitions where the new drag and drop fields are highlighted:

                        <form string="Product Form">
                            <sheet>
                            <group>
                            <field name="name" />
                            <field name="description" />
                            <!-- Our new drag and drop image field is highlighted below -->
                             <field name="image_1920" widget="d_and_d_image"
                                class="oe_avator" options="{
                                "image_size": "200x200",
                                "preview_image": "image_128",
                                "acceptedFileExtensions": "image/*",
                                "enableZoom": true
                                }" />
                                <field name="price" />
                            
                            </group>
                            </sheet>
                            </form>
                        
                    

                        <form string="Product Form">
                            <sheet>
                            <group>
                            <field name="name" />
                            <field name="description" />
                            <!-- One2Many drag and drop image field -->
                             <field name="product_images" widget="d_and_d_images"
                                options="{
                                "childImageField": "image_1920",
                                "extraData": {
                                "cssStyles": "width:150px;height:150px;"
                                }
                                }" />
                                <field name="price" />
                            
                            </group>
                            </sheet>
                            </form>