+
+
+
+
+
+ 
+
+
+
+
+
+
+ Community
+
+
+ Enterprise
+
+
+
+ Odoo sh
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+ + Drag and Drop Widget
+Drag and Drop Widget for Image Fields + +
+
+
+
+
+
+
+ 
+
+
+ Explore This + Module
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ Overview +
+
+
+
+
+
+
+ This module is used to Drag and drop image to an image fields.
+ This is a widget used to drag and drop the images.
+
+
+
+
+ 
+
+
+ Features +
+
+
+
+
+
+
+
+
+ 
+ Enterprise and Community compatible.
+
+
+ Enterprise and Community compatible.
+
+
+ Drag and drop Images
+
+
+ Drag and drop Images
+
+
+
+ 
+
+
+ Screenshots +
+
+
+
+
+
+
+
+
+
+
+ Configuration +
+Add the 'drag_and_drop' as the widget of an image field
+
+ 
+
+ Click the Up Arrow button to start the drag and drop operation +
+
+
+ 
+
+ Drag and drop images to this area. +
+
+
+ 
+
+
+ Drag the image and click the Upload image button. +
+
+
+
+
+ 
+
+
+ + Related + Products +
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+ 
+
+
+ Our Services +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Odoo + Customization
+
+
+
+
+ 
+
+
+ + Odoo + Implementation
+
+
+
+
+
+ 
+
+
+ + Odoo + Support
+
+
+
+
+ 
+
+
+ + Hire + Odoo + Developer
+
+
+
+
+ 
+
+
+ + Odoo + Integration
+
+
+
+
+
+ 
+
+
+ + Odoo + Migration
+
+
+
+
+ 
+
+
+ + Odoo + Consultancy
+
+
+
+
+ 
+
+
+ + Odoo + Implementation
+
+
+
+ 
+
+
+ + Odoo + Licensing Consultancy
+
+
+
+
+ 
+
+
+ Our + Industries +
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Trading +
++ Easily procure + and + sell your products
+
+
+
+
+ 
+
+
+ + POS +
++ Easy + configuration + and convivial experience
+
+
+
+
+ 
+
+
+ + Education +
++ A platform for + educational management
+
+
+
+
+ 
+
+
+ + Manufacturing +
++ Plan, track and + schedule your operations
+
+
+
+
+ 
+
+
+ + E-commerce & Website +
++ Mobile + friendly, + awe-inspiring product pages
+
+
+
+
+ 
+
+
+ + Service Management +
++ Keep track of + services and invoice
+
+
+
+
+ 
+
+
+ + Restaurant +
++ Run your bar or + restaurant methodically
+
+
+
+ 
+
+
+ + Hotel Management +
++ An + all-inclusive + hotel management application
+
+
+
+ 
+
+
+ Support +
+
+
+
\ No newline at end of file
diff --git a/drag_and_drop_image_widget/static/src/js/drag_and_drop.js b/drag_and_drop_image_widget/static/src/js/drag_and_drop.js
new file mode 100644
index 000000000..4e09d677f
--- /dev/null
+++ b/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);
diff --git a/drag_and_drop_image_widget/static/src/scss/drag_and_drop.scss b/drag_and_drop_image_widget/static/src/scss/drag_and_drop.scss
new file mode 100644
index 000000000..25979c939
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/drag_and_drop_image_widget/static/src/xml/drag_and_drop_templates.xml b/drag_and_drop_image_widget/static/src/xml/drag_and_drop_templates.xml
new file mode 100644
index 000000000..7f839a9c8
--- /dev/null
+++ b/drag_and_drop_image_widget/static/src/xml/drag_and_drop_templates.xml
@@ -0,0 +1,112 @@
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+
+ ![Binary file]()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+