OCT 31 : [ADD] Initial Commit 'drag_and_drop_image_widget'

drag_and_drop_image_widget/README.rst

@@ -0,0 +1,48 @@
+.. image:: https://img.shields.io/badge/licence-LGPL--3-green.svg
+    :target: http://www.gnu.org/licenses/lgpl-3.0-standalone.html
+    :alt: License: LGPL-3
+
+Drag and Drop Widget
+=======================
+This is a widget for Drag and drop files into the attachment field.
+
+Configuration
+===============
+Add the 'drag_and_drop' as the widget of an image field.
+
+Company
+-------
+* `Cybrosys Techno Solutions <https://cybrosys.com/>`__
+
+License
+-------
+General Public License, Version 3 (LGPL v3).
+(http://www.gnu.org/licenses/lgpl-3.0-standalone.html)
+
+Credits
+-------
+Developer: Megha K @cybrosys, Contact: odoo@cybrosys.com
+
+Contacts
+--------
+* Mail Contact : odoo@cybrosys.com
+* Website : https://cybrosys.com
+
+Bug Tracker
+-----------
+Bugs are tracked on GitHub Issues. In case of trouble,
+please check there if your issue has already been reported.
+
+Maintainer
+==========
+.. image:: https://cybrosys.com/images/logo.png
+   :target: https://cybrosys.com
+
+This module is maintained by Cybrosys Technologies.
+
+For support and more information, please
+visit `Our Website <https://cybrosys.com/>`__
+
+Further information
+===================
+HTML Description: `<static/description/index.html>`__

drag_and_drop_image_widget/__init__.py

@@ -0,0 +1,22 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Cybrosys (<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU LESSER
+#    GENERAL PUBLIC LICENSE (LGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details.
+#
+#    You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE
+#    (LGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+from . import models

drag_and_drop_image_widget/__manifest__.py

@@ -0,0 +1,47 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Cybrosys (<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU LESSER
+#    GENERAL PUBLIC LICENSE (LGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details.
+#
+#    You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE
+#    (LGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+{
+    'name': 'Drag and Drop Widget',
+    'version': '16.0.1.0.0',
+    'category': 'Extra Tools',
+    'summary': 'This is a widget for Drag and drop images into the '
+               'image field',
+    'description': "This module is used to drag and drop files into the "
+                   "image field",
+    'author': 'Cybrosys Techno Solutions',
+    'maintainer': 'Cybrosys Techno Solutions',
+    'company': 'Cybrosys Techno Solutions',
+    'website': 'https://www.cybrosys.com',
+    'depends': ['base', 'web'],
+    'images': ['static/description/banner.jpg'],
+    'assets': {
+        'web.assets_backend': [
+            'drag_and_drop_image_widget/static/src/scss/drag_and_drop.scss',
+            'drag_and_drop_image_widget/static/src/js/drag_and_drop.js',
+            'drag_and_drop_image_widget/static/src/xml/drag_and_drop_templates.xml'
+        ]
+    },
+    'license': 'LGPL-3',
+    'installable': True,
+    'auto_install': False,
+    'application': False,
+}

drag_and_drop_image_widget/doc/RELEASE_NOTES.md

@@ -0,0 +1,6 @@
+## Module <drag_and_drop_image_widget>
+
+#### 31.10.2023
+#### Version 16.0.1.0.0
+#### ADD
+- Initial commit for Drag and Drop Widget

drag_and_drop_image_widget/models/__init__.py

@@ -0,0 +1,22 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Cybrosys (<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU LESSER
+#    GENERAL PUBLIC LICENSE (LGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details.
+#
+#    You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE
+#    (LGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+from . import ir_attachment

drag_and_drop_image_widget/models/ir_attachment.py

@@ -0,0 +1,36 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Cybrosys (<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU LESSER
+#    GENERAL PUBLIC LICENSE (LGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details.
+#
+#    You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE
+#    (LGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+from odoo import models
+
+
+class Attachment(models.Model):
+    """Inheriting the ir attachment and saving the image into the fields"""
+    _inherit = 'ir.attachment'
+
+    def action_save_drag_and_drop_image(self, data, url):
+        """Save the image into the fields"""
+        image = url.split(',')
+        self.env[data['resModel']].browse(
+            int(data['id'])).sudo().write({
+            data['name']: image[1]
+        })
+        return True

drag_and_drop_image_widget/static/description/index.html

@@ -0,0 +1,572 @@
+<div style="background-color: #714B67; height: 810px; width: 100%; padding: 15px; position: relative;">
+    <!-- TITLE BAR -->
+    <div class="d-flex align-items-center justify-content-between"
+         style="border-bottom: 1px solid #875A7B; padding: 15px; display: flex; justify-content: space-between; align-items: center;">
+        <img src="assets/misc/cybrosys-logo.png" width="42" height="42" style="width: 42px; height: 42px;"/>
+        <div>
+            <div
+                    style="color: #7C7BAD; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: bold; background-color: white; display: inline-block; padding: 3px 10px; border-radius: 50px;"
+                    class="mr-2">
+                <i class="fa fa-check mr-1"></i>Community
+            </div>
+            <div
+                    style="color: #875A7B; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: bold; background-color: white; display: inline-block; padding: 3px 10px; border-radius: 50px;"
+                    class="mr-2">
+                <i class="fa fa-check mr-1"></i>Enterprise
+            </div>
+
+            <div
+                    style="color: #017E84; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: bold; background-color: white; display: inline-block; padding: 3px 10px; border-radius: 50px;"
+                    class="mr-2">
+                <i class="fa fa-check mr-1"></i>Odoo sh
+            </div>
+        </div>
+    </div>
+    <!-- END OF TITLE BAR -->
+    <div class="container">
+        <div class="row">
+            <div class="col-sm-12 col-md-12 col-lg-12">
+                <!-- APP HERO -->
+                <h1 style="color: #FFFFFF; font-weight: bolder; font-size: 50px; text-align: center; margin-top: 50px;">
+                  Drag and Drop Widget</h1>
+                <p style="color:#FFFFFF; padding: 8px 15px; text-align: center; font-size: 24px;">Drag and Drop Widget for Image Fields
+
+                </p>
+                <img src="./assets/screenshots/hero.gif" class="img-responsive" width="100%" height="auto" />
+
+                <!-- END OF APP HERO -->
+            </div>
+        </div>
+    </div>
+
+
+</div>
+
+<!-- NAVIGATION SECTION -->
+<div class="d-flex align-items-center" style="border-bottom: 2px solid #714B67; padding: 15px 0px; margin-top: 300px;">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+         style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/compass.png"/>
+    </div>
+    <h2 class="mt-2" style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">Explore This
+        Module</h2>
+</div>
+<div class="row my-4" style="font-family: 'Montserrat', sans-serif;">
+    <div class="col-sm-12 col-md-6 my-3">
+        <a href="#overview">
+            <div class="d-flex justify-content-between align-items-center"
+                 style="background-color: #f5f5f5; padding: 30px; width: 100%;">
+                <div>
+                    <span style="color: #714B67; font-size: 24px; font-weight: 500; display: block;">Overview</span>
+                    <span style="color: #714B67; font-size: 16px; font-weight: 400; color:#282F33;  display: block;">Learn
+            more about this
+            module</span>
+                </div>
+                <img src="assets/misc/right-arrow.png" width="36" height="36"/>
+            </div>
+        </a>
+    </div>
+    <div class="col-sm-12 col-md-6 my-3">
+        <a href="#features">
+            <div class="d-flex justify-content-between align-items-center"
+                 style="background-color: #f5f5f5; padding: 30px; width: 100%;">
+                <div>
+                    <span style="color: #714B67; font-size: 24px; font-weight: 500; display: block;">Features</span>
+                    <span style="color: #714B67; font-size: 16px; font-weight: 400; color:#282F33;  display: block;">View
+            features of this
+            module</span>
+                </div>
+                <img src="assets/misc/right-arrow.png" width="36" height="36"/>
+            </div>
+        </a>
+    </div>
+    <div class="col-sm-12 col-md-6 my-3">
+        <a href="#screenshots">
+            <div class="d-flex justify-content-between align-items-center"
+                 style="background-color: #f5f5f5; padding: 30px; width: 100%;">
+                <div>
+                    <span style="color: #714B67; font-size: 24px; font-weight: 500; display: block;">Screenshots</span>
+                    <span style="color: #714B67; font-size: 16px; font-weight: 400; color:#282F33;  display: block;">View
+            screenshots for this
+            module</span>
+                </div>
+                <img src="assets/misc/right-arrow.png" width="36" height="36"/>
+            </div>
+        </a>
+    </div>
+</div>
+<!-- END OF NAVIGATION SECTION -->
+
+<!-- OVERVIEW SECTION -->
+<div class="d-flex align-items-center" style="border-bottom: 2px solid #714B67; padding: 15px 0px;" id="overview">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+         style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/pie-chart.png"/>
+    </div>
+    <h2 class="mt-2" style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">Overview
+    </h2>
+</div>
+<div class="row" style="font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 14px; line-height: 200%;">
+    <div class="col-sm-12 py-4">
+        This module is used to Drag and drop image to an image fields.
+        This is a widget used to drag and drop the images.
+    </div>
+</div>
+<!-- END OF OVERVIEW SECTION -->
+
+<!-- FEATURES SECTION -->
+<div class="d-flex align-items-center" style="border-bottom: 2px solid #714B67; padding: 15px 0px;" id="features">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+         style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/features.png"/>
+    </div>
+    <h2 class="mt-2" style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">Features
+    </h2>
+</div>
+<div class="row" style="font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 14px; line-height: 200%;">
+    <div class="col-sm-12 col-md-6">
+        <div class="d-flex align-items-center" style="margin-top: 40px; margin-bottom: 40px">
+            <img src="assets/misc/check-box.png" class="mr-2"/>
+            <span style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Enterprise and Community compatible.</span>
+        </div>
+        <div class="d-flex align-items-center" style="margin-top: 30px; margin-bottom: 30px">
+            <img src="assets/misc/check-box.png" class="mr-2"/>
+            <span style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Drag and drop Images</span>
+        </div>
+    </div>
+</div>
+<!-- END OF FEATURES SECTION -->
+
+<!-- SCREENSHOTS SECTION -->
+<div class="d-flex align-items-center" style="border-bottom: 2px solid #714B67; padding: 15px 0px;" id="screenshots">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+         style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/pictures.png"/>
+    </div>
+    <h2 class="mt-2" style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">Screenshots
+    </h2>
+</div>
+<div class="row">
+    <div class="col-sm-12">
+
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Configuration
+            </h3>
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">Add the 'drag_and_drop' as the widget of an image field</p>
+        </div>
+
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Click the Up Arrow button to start the drag and drop operation
+            </h3>
+            <img src="assets/screenshots/Screenshot-1.png" class="img-thumbnail">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Drag and drop images to this area.
+            </h3>
+            <img src="assets/screenshots/Screenshot-2.png" class="img-thumbnail">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;"> Drag the image and click the Upload image button.
+            </h3>
+            <img src="assets/screenshots/Screenshot-3.png" class="img-thumbnail">
+        </div>
+
+    </div>
+</div>
+<!-- END OF SCREENSHOTS SECTION -->
+<!-- RELATED PRODUCTS -->
+<div class="d-flex align-items-center"
+     style="border-bottom: 2px solid #714B67; padding: 15px 0px;">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+         style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/categories.png"/>
+    </div>
+    <h2 class="mt-2"
+        style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">
+        Related
+        Products
+    </h2>
+</div>
+<div class="row">
+    <div class="col-sm-12">
+        <div id="demo1" class="row carousel slide" data-ride="carousel">
+            <!-- The slideshow -->
+            <div class="carousel-inner" style="padding: 30px;">
+                <div class="carousel-item" style="min-height: 198.656px;">
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16"
+                         style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/16.0/direct_print_odoo/"
+                           target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block"
+                                     style="border-radius: 0px;"
+                                     src="assets/modules/l1.png">
+                            </div>
+                        </a>
+                    </div>
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16"
+                         style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/16.0/login_user_detail/"
+                           target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block"
+                                     style="border-radius: 0px;"
+                                     src="assets/modules/l2.png">
+                            </div>
+                        </a>
+                    </div>
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16"
+                         style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/16.0/shopify_odoo_connector/"
+                           target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block"
+                                     style="border-radius: 0px;"
+                                     src="assets/modules/l3.png">
+                            </div>
+                        </a>
+                    </div>
+                </div>
+                <div class="carousel-item active"
+                     style="min-height: 198.656px;">
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16"
+                         style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/16.0/odoo_dynamic_dashboard/"
+                           target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block"
+                                     style="border-radius: 0px;"
+                                     src="assets/modules/l4.png">
+                            </div>
+                        </a>
+                    </div>
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16"
+                         style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/16.0/custom_gantt_view/"
+                           target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block"
+                                     style="border-radius: 0px;"
+                                     src="assets/modules/l5.png">
+                            </div>
+                        </a>
+                    </div>
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16"
+                         style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/16.0/todo_list/"
+                           target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block"
+                                     style="border-radius: 0px;"
+                                     src="assets/modules/l6.png">
+                            </div>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <!-- Left and right controls -->
+            <a class="carousel-control-prev" href="#demo1" data-slide="prev"
+               style="width:35px; color:#000"> <span
+                    class="carousel-control-prev-icon"><i
+                    class="fa fa-chevron-left"
+                    style="font-size:24px"></i></span>
+            </a> <a class="carousel-control-next" href="#demo1"
+                    data-slide="next" style="width:35px; color:#000">
+                <span class="carousel-control-next-icon"><i
+                        class="fa fa-chevron-right"
+                        style="font-size:24px"></i></span>
+        </a>
+        </div>
+    </div>
+</div>
+<!-- END OF RELATED PRODUCTS -->
+
+<!-- OUR SERVICES -->
+
+<div class="d-flex align-items-center" style="border-bottom: 2px solid #714B67; padding: 15px 0px;">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+         style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/star.png"/>
+    </div>
+    <h2 class="mt-2" style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">Our Services
+    </h2>
+</div>
+
+<div class="container my-5">
+    <div class="row">
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                 style="background-color: #1dd1a1 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/cogs.png" class="img-responsive" height="48px" width="48px">
+            </div>
+            <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo
+                Customization</h6>
+        </div>
+
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                 style="background-color: #ff6b6b !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/wrench.png" class="img-responsive" height="48px" width="48px">
+            </div>
+            <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo
+                Implementation</h6>
+        </div>
+
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                 style="background-color: #6462CD !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/lifebuoy.png" class="img-responsive" height="48px" width="48px">
+            </div>
+            <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo
+                Support</h6>
+        </div>
+
+
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                 style="background-color: #ffa801 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/user.png" class="img-responsive" height="48px" width="48px">
+            </div>
+            <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Hire
+                Odoo
+                Developer</h6>
+        </div>
+
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                 style="background-color: #54a0ff  !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/puzzle.png" class="img-responsive" height="48px" width="48px">
+            </div>
+            <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo
+                Integration</h6>
+        </div>
+
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                 style="background-color: #6d7680 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/update.png" class="img-responsive" height="48px" width="48px">
+            </div>
+            <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo
+                Migration</h6>
+        </div>
+
+
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                 style="background-color: #786fa6 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/consultation.png" class="img-responsive" height="48px" width="48px">
+            </div>
+            <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo
+                Consultancy</h6>
+        </div>
+
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                 style="background-color: #f8a5c2 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/training.png" class="img-responsive" height="48px" width="48px">
+            </div>
+            <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo
+                Implementation</h6>
+        </div>
+
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                 style="background-color: #e6be26 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/license.png" class="img-responsive" height="48px" width="48px">
+            </div>
+            <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo
+                Licensing Consultancy</h6>
+        </div>
+    </div>
+
+</div>
+
+<!-- END OF OUR SERVICES -->
+
+<!-- OUR INDUSTRIES -->
+
+<div class="d-flex align-items-center" style="border-bottom: 2px solid #714B67; padding: 15px 0px;">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+         style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/corporate.png"/>
+    </div>
+    <h2 class="mt-2" style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">Our
+        Industries
+    </h2>
+</div>
+
+<div class="container my-5">
+    <div class="row">
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                 style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/trading-black.png" class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    Trading
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    Easily procure
+                    and
+                    sell your products</p>
+            </div>
+        </div>
+
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                 style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/pos-black.png" class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    POS
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    Easy
+                    configuration
+                    and convivial experience</p>
+            </div>
+        </div>
+
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                 style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/education-black.png" class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    Education
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    A platform for
+                    educational management</p>
+            </div>
+        </div>
+
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                 style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/manufacturing-black.png" class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    Manufacturing
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    Plan, track and
+                    schedule your operations</p>
+            </div>
+        </div>
+
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                 style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/ecom-black.png" class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    E-commerce &amp; Website
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    Mobile
+                    friendly,
+                    awe-inspiring product pages</p>
+            </div>
+        </div>
+
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                 style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/service-black.png" class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    Service Management
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    Keep track of
+                    services and invoice</p>
+            </div>
+        </div>
+
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                 style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/restaurant-black.png" class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    Restaurant
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    Run your bar or
+                    restaurant methodically</p>
+            </div>
+        </div>
+
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                 style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/hotel-black.png" class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    Hotel Management
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    An
+                    all-inclusive
+                    hotel management application</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- END OF OUR INDUSTRIES -->
+
+<!-- SUPPORT -->
+<div class="d-flex align-items-center" style="border-bottom: 2px solid #714B67; padding: 15px 0px;">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+         style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/customer-support.png"/>
+    </div>
+    <h2 class="mt-2" style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">Support
+    </h2>
+</div>
+<div class="container mt-5">
+    <div class="row">
+        <div class="col-sm-12 col-md-6">
+            <div style="background-color: #F6F8F9; padding: 30px; display: flex; align-items: center;">
+                <div class="mr-4 d-flex justify-content-center align-items-center"
+                     style="background-color: #714B67; display: inline-block; height: 70px; width: 70px; display: flex; align-items: center; justify-content: center;">
+                    <img src="assets/misc/support.png" height="48" width="48" style="width: 42px; height: 42px;"/>
+                </div>
+                <div>
+                    <h4>Need Help?</h4>
+                    <p style="line-height: 100%;">Got questions or need help? Get in touch.</p>
+                    <a href="mailto:odoo@cybrosys.com">
+                        <p style="font-weight: 400; font-size: 28px; line-height: 80%; color: #714B67;">
+                            odoo@cybrosys.com</p>
+                    </a>
+                </div>
+            </div>
+        </div>
+        <div class="col-sm-12 col-md-6">
+            <div style="background-color: #F6F8F9; padding: 30px; display: flex; align-items: center;">
+                <div class="mr-4 d-flex justify-content-center align-items-center"
+                     style="background-color: #2AC44D; display: inline-block; height: 70px; width: 70px; display: flex; align-items: center; justify-content: center;">
+                    <img src="assets/misc/whatsapp.png" height="52" width="52" style="width: 52px; height: 52px;"/>
+                </div>
+                <div>
+                    <h4>WhatsApp</h4>
+                    <p style="line-height: 100%;">Say hi to us on WhatsApp!</p>
+                    <a href="https://api.whatsapp.com/send?phone=918606827707">
+                        <p style="font-weight: 400; font-size: 28px; line-height: 80%; color: #714B67;">+91 86068
+                            27707</p>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-sm-12 my-5 d-flex justify-content-center align-items-center">
+            <img src="assets/misc/logo.png" width="144" height="31"
+                 style="width:144px; height: 31px; margin-top: 40px;"/>
+        </div>
+    </div>
+</div>
+<!-- END OF SUPPORT -->

drag_and_drop_image_widget/static/src/js/drag_and_drop.js

@@ -0,0 +1,171 @@
+/** @odoo-module **/
+import { isMobileOS } from "@web/core/browser/feature_detection";
+import { registry } from "@web/core/registry";
+import { FileUploader } from "@web/views/fields/file_handler";
+import { standardFieldProps } from "@web/views/fields/standard_field_props";
+import { _lt } from "@web/core/l10n/translation";
+import { useService } from "@web/core/utils/hooks";
+import { isBinarySize } from "@web/core/utils/binary";
+const placeholder = "/web/static/img/placeholder.png";
+const { DateTime } = luxon;
+import { url } from "@web/core/utils/urls";
+import rpc from 'web.rpc';
+const { useRef } = owl;
+
+export const fileTypeMagicWordMap = {
+    "/": "jpg",
+    R: "gif",
+    i: "png",
+    P: "svg+xml",
+};
+
+export function imageCacheKey(value) {
+    if (value instanceof DateTime) {
+        return value.ts;
+    }
+    return "";
+}
+var translation = require('web.translation');
+var _t = translation._t;
+import { Component, useState, onWillUpdateProps } from "@odoo/owl";
+
+export class DragAndDropBinaryField extends Component {
+    setup() {
+        /* setting for widget  */
+        this.notification = useService("notification");
+        this.isMobile = isMobileOS();
+        this.state = useState({
+            isValid: true,
+        });
+        this.inputFile = useRef('inputFile')
+        this.image_picker = useRef('image_picker')
+        this.rawCacheKey = this.props.record.data.__last_update;
+        onWillUpdateProps((nextProps) => {
+            const { record } = this.props;
+            const { record: nextRecord } = nextProps;
+            if (record.resId !== nextRecord.resId || nextRecord.mode === "readonly") {
+                this.rawCacheKey = nextRecord.data.__last_update;
+            }
+        });
+    }
+    get sizeStyle() {
+        /* Styling the widget */
+        let style = "";
+        if (this.props.width) {
+            style += `max-width: ${this.props.width}px;`;
+        }
+        if (this.props.height) {
+            style += `max-height: ${this.props.height}px;`;
+        }
+        return style;
+    }
+    get hasTooltip() {
+        /* Method for getting the tooltip */
+        return this.props.enableZoom && this.props.readonly && this.props.value;
+    }
+    getUrl(previewFieldName) {
+         /* Get image URL */
+        if (this.state.isValid && this.props.value) {
+            if (isBinarySize(this.props.value)) {
+                if (!this.rawCacheKey) {
+                    this.rawCacheKey = this.props.record.data.__last_update;
+                }
+                return url("/web/image", {
+                    model: this.props.record.resModel,
+                    id: this.props.record.resId,
+                    field: previewFieldName,
+                    unique: imageCacheKey(this.rawCacheKey),
+                });
+            } else {
+                // Use magic-word technique for detecting image type
+                const magic = fileTypeMagicWordMap[this.props.value[0]] || "png";
+                return `data:image/${magic};base64,${this.props.value}`;
+            }
+        }
+        return placeholder;
+    }
+    /* File Remove */
+    onFileRemove() {
+        this.state.isValid = true;
+        this.props.update(false);
+    }
+    /* File Upload */
+    onFileUploaded(info) {
+        this.state.isValid = true;
+        this.rawCacheKey = null;
+        this.props.update(info.data);
+    }
+    /* File Load */
+    onLoadFailed() {
+        this.state.isValid = false;
+        this.notification.add(this.env._t("Could not display the selected image"), {
+            type: "danger",
+        });
+    }
+    /* Upload Image to the field */
+    onImageUpload(){
+        let file =this.inputFile.el.defaultValue
+        if (file == "")
+        {
+            image_picker.classList.add('d-none');
+        }
+        else{
+           rpc.query({
+                model: 'ir.attachment',
+                method: 'action_save_drag_and_drop_image',
+                args: [[], {'resModel': this.props.record.resModel,
+                'id': this.props.record.data.id, 'name': this.props.name}, file],
+            }).then(function(results){
+                location.reload();
+            })
+
+        }
+    }
+    /* method for dragging */
+    onFileDragImage(){
+        var image_picker = this.image_picker.el;
+        image_picker.classList.remove('d-none');
+    }
+}
+
+DragAndDropBinaryField.components = {
+    FileUploader,
+};
+DragAndDropBinaryField.props = {
+    ...standardFieldProps,
+    enableZoom: { type: Boolean, optional: true },
+    zoomDelay: { type: Number, optional: true },
+    previewImage: { type: String, optional: true },
+    acceptedFileExtensions: { type: String, optional: true },
+    width: { type: Number, optional: true },
+    height: { type: Number, optional: true },
+};
+DragAndDropBinaryField.defaultProps = {
+    acceptedFileExtensions: "image/*",
+};
+
+DragAndDropBinaryField.displayName = _lt("Image");
+DragAndDropBinaryField.supportedTypes = ["binary"];
+
+DragAndDropBinaryField.fieldDependencies = {
+    __last_update: { type: "datetime" },
+};
+
+DragAndDropBinaryField.extractProps = ({ attrs }) => {
+    return {
+        enableZoom: attrs.options.zoom,
+        zoomDelay: attrs.options.zoom_delay,
+        previewImage: attrs.options.preview_image,
+        acceptedFileExtensions: attrs.options.accepted_file_extensions,
+        width:
+            attrs.options.size && Boolean(attrs.options.size[0])
+                ? attrs.options.size[0]
+                : attrs.width,
+        height:
+            attrs.options.size && Boolean(attrs.options.size[1])
+                ? attrs.options.size[1]
+                : attrs.height,
+    };
+};
+DragAndDropBinaryField.template = 'FieldDragAndDropBinary';
+registry.category("fields").add("drag_and_drop", DragAndDropBinaryField);

drag_and_drop_image_widget/static/src/scss/drag_and_drop.scss

@@ -0,0 +1,192 @@
+@import url(https://fonts.googleapis.com/css?family=Open+Sans);
+
+@basecolor: #f80;
+@dropperbg: hsl(0, 0%, 90%);
+
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+body {
+  background: #eee;
+  font-family: "Open Sans", Helvetica, sans-serif;
+}
+.setting {
+  background: #fff;
+  margin: 0 auto 3px;
+  padding: 12px;
+  width: 300px;
+  h2 {
+    color: #999;
+    font-size: 14px;
+    font-weight: 400;
+    margin: 0 0 6px;
+    line-height: 24px;
+  }
+  a[data-action] {
+    cursor: pointer;
+    color: #555;
+    font-size: 14px;
+    line-height: 24px;
+    transition: color 0.2s;
+    i {
+      width: 1.25em;
+      text-align: center;
+    }
+    &:hover {
+      color: #f80;
+    }
+    &.disabled {
+      opacity: 0.35;
+      cursor: default;
+      &:hover {
+        color: #555;
+      }
+    }
+  }
+}
+.image_picker .settings_wrap {
+  overflow: hidden;
+  position: relative;
+  .drop_target,
+  .settings_actions {
+    float: left;
+  }
+  .drop_target {
+    margin-right: 18px;
+  }
+  .settings_actions {
+    margin-top: 12px;
+  }
+}
+.settings_actions.vertical {
+  a {
+    display: block;
+  }
+}
+.drop_target {
+  position: relative;
+  cursor: pointer;
+  background: hsl(0, 0%, 90%);
+  border-top: 1px solid darken(hsl(0, 0%, 90%), 10%);
+  border-radius: 4px;
+  width: 72px;
+  height: 72px;
+  padding: 4px 6px 6px;
+  transition: all 0.2s;
+  input[type="file"] {
+    visibility: hidden;
+  }
+  &:before {
+    content: "\f0ee";
+    font-family: FontAwesome;
+    position: absolute;
+    display: block;
+    width: 60px;
+    line-height: 60px;
+    text-align: center;
+    font-size: 32px;
+    color: fadeout(#000, 70%);
+    transition: color 0.2s;
+  }
+  &:hover,
+  &.dropping {
+    background: #aca8a3;
+    border-top-color: darken(#0d0d0d, 10%);
+  }
+  &:hover:before,
+  &.dropping:before {
+    color: fadeout(#000, 40%);
+  }
+  .image_preview {
+    width: 100%;
+    height: 100%;
+    background: no-repeat center;
+    background-size: contain;
+    position: relative;
+    z-index: 2;
+  }
+}
+.image_details {
+  width: 192px;
+  padding: 4px;
+  background: hsl(0, 0%, 90%);
+  border-radius: 4px;
+  position: absolute;
+  top: 0;
+  left: 84px;
+  z-index: 5;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.4s;
+  .dropped ~ & {
+    opacity: 1;
+    pointer-events: all;
+  }
+  &:before {
+    content: "";
+    display: block;
+    width: 0;
+    height: 0;
+    border: 6px solid transparent;
+    border-right-color: hsl(0, 0%, 90%);
+    position: absolute;
+    left: -12px;
+    top: 10px;
+  }
+  .input_line {
+    display: block;
+    overflow: hidden;
+    margin-bottom: 4px;
+    &:last-of-type {
+      margin-bottom: 0;
+    }
+    span,
+    input {
+      float: left;
+      line-height: 24px;
+    }
+    span {
+      font-size: 12px;
+      color: #666;
+      width: 20%;
+    }
+    input[type="text"] {
+      width: 100%;
+      color: #444444;
+      appearance: none;
+      border: 1px solid hsl(0, 0%, 90%);
+      border-radius: 3px;
+      background: #fff;
+      height: 24px;
+      line-height: 18px;
+      padding: 3px 5px;
+      font-size: 14px;
+      transition: border 0.2s;
+      &:hover,
+      &:focus {
+        outline: 0;
+        border: 1px solid #f80;
+      }
+      &::-webkit-input-placeholder {
+        font-size: 14px;
+        color: #999;
+      }
+    }
+  }
+  a.confirm {
+    position: absolute;
+    right: -12px;
+    top: 50%;
+    margin-top: -12px;
+    display: block;
+    width: 21px;
+    height: 21px;
+    border-radius: 100%;
+    background: #eee;
+    line-height: 23px;
+    text-align: center;
+    font-size: 16px;
+  }
+}

drag_and_drop_image_widget/static/src/xml/drag_and_drop_templates.xml

@@ -0,0 +1,112 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!--Template for the Drag and Drop widget-->
+<templates>
+    <t t-name="FieldDragAndDropBinary" owl="1">
+        <div class="d-inline-block position-relative opacity-trigger-hover" >
+            <div t-attf-class="position-absolute d-flex justify-content-between w-100 bottom-0 opacity-0 opacity-100-hover {{isMobile ? 'o_mobile_controls' : ''}}"
+                 aria-atomic="true" t-att-style="sizeStyle">
+                <t t-if="!props.readonly">
+                    <FileUploader
+                            acceptedFileExtensions="props.acceptedFileExtensions"
+                            onUploaded.bind="onFileUploaded"
+                            type="'image'">
+                        <t t-set-slot="toggler">
+                            <button
+                                    class="o_select_file_button btn btn-light border-0 rounded-circle m-1 p-1"
+                                    data-tooltip="Edit"
+                                    aria-label="Edit">
+                                <i class="fa fa-pencil fa-fw"/>
+                            </button>
+                        </t>
+                        <button
+                                t-if="props.value 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>
+                    </FileUploader>
+                    <button
+                            t-if="props.record.data.id"
+                            class="o_upload_image_button btn btn-light border-0 rounded-circle m-1 p-1"
+                            data-tooltip="Drag"
+                            aria-label="Drag"
+                            t-on-click="onFileDragImage">
+                            <i class="fa fa-arrow-up fa-fw"/>
+                    </button>
+                </t>
+            </div>
+            <img
+                    class="img img-fluid w-100"
+                    alt="Binary file"
+                    t-att-src="getUrl(props.previewImage or props.name)"
+                    t-att-name="props.name"
+                    t-att-height="props.height"
+                    t-att-width="props.width"
+                    t-att-style="sizeStyle"
+                    t-on-error.stop="onLoadFailed"
+                    t-att-data-tooltip-template="hasTooltip and tooltipAttributes.template"
+                    t-att-data-tooltip-info="hasTooltip and tooltipAttributes.info"
+                    t-att-data-tooltip-delay="hasTooltip and props.zoomDelay"/>
+        </div>
+        <div class="setting image_picker d-none" id="image_picker" t-ref="image_picker">
+            <div class="settings_wrap">
+                <label class="drop_target">
+                    <div class="image_preview"/>
+                </label>
+                <input id="inputFile" t-ref="inputFile"  name="inputFile" type="hidden"/>
+                <button
+                        class="o_upload_image_button btn btn-light border-0 rounded-circle m-1 p-1"
+                        data-tooltip="Upload"
+                        aria-label="Upload"
+                        t-on-click="onImageUpload">
+                    <i class="fa fa-camera fa-fw"/>Upload Images
+                </button>
+            </div>
+        </div>
+        <script type="text/javascript">
+            var $dropzone = this.$('.image_picker');
+            var $droptarget = this.$('.drop_target');
+            var $dropinput = this.$('#inputFile');
+            var $dropimg = this.$('.image_preview');
+            var $remover = this.$('[data-action="remove_current_image"]');
+            var image_url;
+            this.$dropzone.on('dragover', function() {
+                $droptarget.addClass('dropping');
+                return false;
+            });
+            this.$dropzone.on('dragend dragleave', function() {
+                $droptarget.removeClass('dropping');
+                return false;
+            });
+            this.$dropzone.on('drop', function(e) {
+              $droptarget.removeClass('dropping');
+              $droptarget.addClass('dropped');
+              $remover.removeClass('disabled');
+              e.preventDefault();
+              var file = e.originalEvent.dataTransfer.files[0],
+                  reader = new FileReader();
+              reader.onload = function(event) {
+                $dropimg.css('background-image', 'url(' + event.target.result + ')');
+                image_url=event.target.result;
+                  document.getElementById("inputFile").value =event.target.result;
+              };
+              reader.readAsDataURL(file);
+              return false;
+            });
+            this.$dropinput.change(function(e) {
+              $droptarget.addClass('dropped');
+              $remover.removeClass('disabled');
+              var image_title = $('.image_title input').val('');
+            });
+            this.$remover.on('click', function() {
+              $dropimg.css('background-image', '');
+              $droptarget.removeClass('dropped');
+              $remover.addClass('disabled');
+              $('.image_title input').val('');
+              document.getElementById("inputFile").value = '';
+            });
+        </script>
+    </t>
+</templates>