Skip to Content
Logo of RG Logo of RG
  • Home
  • Shop
  • Events
  • Courses
  • Company
    • News
    • Success Stories
  • Odoo Docs 19
  • Appointment
  • Jobs
  • Contact us
  • 0
  • 0
  • +1 555-555-5556
  • Sign in
Logo of RG Logo of RG
  • 0
  • 0
    • Home
    • Shop
    • Events
    • Courses
    • Company
      • News
      • Success Stories
    • Odoo Docs 19
    • Appointment
    • Jobs
    • Contact us
  • +1 555-555-5556
  • Sign in
Odoo Docs 19
Home Components Guides Classes Search
418 components
Forms
  • Account Json Checkboxes
  • Ace
  • Ace Field
  • Allowed Qweb Expressions
  • Attachment Image
  • Attachment Image Field
  • Badge
  • Badge Field
  • Badge Selection Field
  • Binary
  • Binary
  • Binary
  • Binary Field
  • Boolean
  • Boolean Favorite
  • Boolean Favorite Field
  • Boolean Field
  • Boolean Icon
  • Boolean Icon Field
  • Boolean Toggle
  • Boolean Toggle
  • boolean Toggle Field
  • calendar Properties Field
  • card Properties Field
  • Char
  • Char Field
  • Code
  • Code Ir Ui View
  • Color
  • Color Field
  • Color Picker
  • Color Picker Field
  • Contact Image
  • contact Image Field
  • Contact Statistics
  • Contact Statistics Field
  • Copyclipboardbutton
  • copy Clipboard Button Field
  • Copyclipboardchar
  • copy Clipboard Char Field
  • Copyclipboardurl
  • copy Clipboard URL Field
  • Dashboard Graph
  • date Field
  • date Range Field
  • Date Time Field
  • Domain
  • Domain Field
  • Dynamic Placeholder Popover
  • Email
  • Email
  • Email Field
  • Field Selector
  • Field Selector Field
  • File Uploader
  • Filterable Selection
  • filterable Selection Field
  • Float
  • Float Factor
  • float Factor Field
  • Float Field
  • Float Time
  • Float Time Field
  • Float Toggle
  • Float Toggle Field
  • form Email Field
  • form Phone Field
  • form Url Field
  • Gauge
  • Gauge Field
  • Google Slide Viewer
  • Handle
  • Handle Field
  • Html
  • html Field
  • Iframe Wrapper
  • Iframe Wrapper Field
  • Image
  • Image Field
  • Image Url
  • Image Url Field
  • Integer
  • Integer Field
  • ir Ui View Ace Field
  • Journal Dashboard Graph Field
  • Json
  • Json Checkboxes
  • Json Field
  • Kanban Color Picker
  • kanban Color Picker Field
  • kanban Many2 Many Tags Avatar Field
  • kanban Many2 Many Tags Field
  • Kanban Many2 One
  • Kanban Many2 One Avatar Field
  • kanban Progress Bar Field
  • Label Selection
  • Label Selection Field
  • list Badge Selection Field
  • list Binary Field
  • list Boolean Toggle Field
  • list Date Field
  • list Date Range Field
  • list Date Time Field
  • list Many2 Many Tags Avatar Field
  • list Text Field
  • List X2 Many Field
  • Many2many
  • Many2many
  • Many2many
  • Many2many Binary
  • Many2 Many Binary Field
  • Many2many Checkboxes
  • Many2 Many Checkboxes Field
  • Many2many Tags
  • Many2many Tags
  • Many2many Tags
  • Many2many Tags Avatar
  • Many2many Tags Avatar
  • Many2many Tags Avatar
  • many2 Many Tags Avatar Field
  • Many2many Tags Avatar Popover
  • Many2 Many Tags Field
  • Many2 One
  • Many2one
  • Many2one Avatar
  • Many2one Avatar
  • Many2 One Avatar Field
  • Many2one Barcode
  • Many2 One Barcode Field
  • Many2 One Field
  • Many2one Reference
  • Many2 One Reference Field
  • Many2one Reference Integer
  • Many2 X Autocomplete
  • Monetary
  • Monetary Field
  • One2many
  • One2many
  • One2many
  • Pdf Viewer
  • Pdf Viewer Field
  • Percentage
  • Percentage Field
  • Percentpie
  • Percent Pie Field
  • Phone
  • Phone
  • Phone Field
  • Priority
  • Priority Field
  • Profiling Qweb View
  • Progressbar
  • Progressbar
  • Progress Bar Field
  • Properties
  • Properties
  • Properties
  • Properties
  • Properties Field
  • Property Definition
  • Property Definition Selection
  • Property Tags
  • Property Tags Field
  • Property Text
  • Property Value
  • Radio
  • Radio
  • Radio Field
  • Reference
  • Reference Field
  • Remaining Days
  • Remaining Days Field
  • Res User Group Ids
  • Res User Group Ids Privilege
  • Selection
  • Selection Badge
  • Selection Badge
  • Selection Badge With Filter
  • Selection Field
  • settings Radio Field
  • Signature Field
  • State Selection
  • State Selection Field
  • Statinfo
  • Stat Info Field
  • Statusbar
  • Status Bar Field
  • Text
  • Text
  • Text Field
  • Timezone Mismatch
  • timezone Mismatch Field
  • Translation Button
  • Translation Dialog
  • Upgrade Boolean
  • upgrade Boolean Field
  • Upgrade Dialog
  • Url
  • Url
  • Url Field
  • X2 Many Field
  • X2 Many Field Dialog
  1. Components
  2. Binary Field
OWL forms

Binary Field

Odoo 19 OWL component — Binary Field (views)

Live preview Interactive
Source excerpt web/static/src/views/fields/binary/binary_field.js
import { registry } from "@web/core/registry";
import { useService } from "@web/core/utils/hooks";
import { isBinarySize, toBase64Length } from "@web/core/utils/binary";
import { download } from "@web/core/network/download";
import { standardFieldProps } from "../standard_field_props";
import { FileUploader } from "../file_handler";
import { _t } from "@web/core/l10n/translation";

import { Component } from "@odoo/owl";

export const MAX_FILENAME_SIZE_BYTES = 0xFF;  // filenames do not exceed 255 bytes on Linux/Windows/MacOS

export class BinaryField extends Component {
    static template = "web.BinaryField";
    static components = {
        FileUploader,
    };
    static props = {
        ...standardFieldProps,
        acceptedFileExtensions: { type: String, optional: true },
        // See https://www.iana.org/assignments/media-types/media-types.xhtml
        allowedMIMETypes: { type: String, optional: true },
        fileNameField: { type: String, optional: true },
    };
    static defaultProps = {
        acceptedFileExtensions: "*",
    };

    setup() {
        this.notification = useService("notification");
    }

    get fileName() {
        let value = this.props.record.data[this.props.name];
        value = value && typeof value === "string" ? value : false;
        return (this.props.record.data[this.props.fileNameField] || value || "").slice(
            0,
            toBase64Length(MAX_FILENAME_SIZE_BYTES)
        );
    }

    update({ data, name }) {
        const { fileNameField, record } = this.props;
        const changes = { [this.props.name]: data || false };
        if (fileNameField in record.fields && record.data[fileNameField] !== name) {
            changes[fileNameField] = name || '';
        }
        return this.props.record.update(changes);
    }

    getDownloadData() {
        return {
            model: this.props.record.resModel,
            id: this.props.record.resId,
            field: this.props.name,
            filename_field: this.fileName,
            filename: this.fileName || "",
            download: true,
            data: isBinarySize(this.props.record.data[this.props.name])
                ? null
                : this.props.record.data[this.props.name],
        };
    }

    async onFileDownload() {
        await download({
            data: this.getDownloadData(),
            url: "/web/content",
        });
    }
}

export class ListBinaryField extends BinaryField {
    static template = "web.ListBinaryField";
}

export const binaryField = {
    component: BinaryField,
    displayName: _t("File"),
    supportedOptions: [
        {
            label: _t("Accepted file extensions"),
            name: "accepted_file_extensions",
            type: "string",
        },
        {
            label: _t("Allowed file mimetype"),
            name: "allowed_mime_type",
            type: "string",
        },
    ],
    supportedTypes: ["binary"],
    extractProps: ({ attrs, options }) => ({
        acceptedFileExtensions: options.accepted_file_extensions,
        allowedMIMETypes: options.allowed_mime_type,
        fileNameField: attrs.filename,
    }),
};

export const listBinaryField = {
    ...binaryField,
    component: ListBinaryField,
};

registry.category("fields").add("binary", binaryField);
registry.category("fields").add("list.binary", listBinaryField);
Registry / API
Registry name
BinaryField
Category
—
Module
web
Slug
binary-field
Nav group
forms
Follow us

250 Executive Park Blvd, Suite 3400
San Francisco CA 94134

  • +1 555-555-5556
  • info@yourcompany.example.com
Copyright © Company name
Powered by Odoo - The #1 Open Source eCommerce