Odoo is a powerful open-source ERP (Enterprise Resource Planning) platform that provides a wide range of functionalities to manage various business operations. One common requirement in many applications is the ability to upload and display binary files, such as images, documents, or PDFs. In this blog post, we will explore how can display binary files uploaded in the backend on the front end in Odoo 16, along with some practical examples.
Understanding Binary Fields in Odoo:
In Odoo, binary fields are used to store binary data, such as images or files, directly in the database. These fields are represented by fields. Binary in the Odoo model definitions. When a binary field is used, the binary data is stored as a base64-encoded string in the database.
Step 1: Upload the Binary File in the Backend:
To begin, let's assume that you have a custom Odoo model called MyModel, which has a binary field called binary_file. In the Odoo backend, you can upload a file using the binary field through the form view. When the form is submitted, the file is stored as a binary field value in the database.
Here's an example of how you can define a binary field in the MyModel model:
import base64
class MyModel(models.Model):
_name = 'my.model'
binary_file = fields.Binary('Binary File')
file_name = fields.char()
And a character field to store the file name. For that, you can define the field in XML form view like this:
<field name="file_name" invisible="1"/>
<group>
<field name="binary_file" filename="file_name"/>
</group>
Step 2: Retrieve and Pass the Binary Data to the Frontend:
To display the binary file on the front end, you need to retrieve the binary data from the backend and pass it to the front end view. You can achieve this by defining a controller which passes the binary data into a suitable format for frontend rendering.
Here's an example of how you can define a controller for that use:
from odoo import http
from odoo.http import request
class FileController(http.Controller):
@http.route('/file/template', type='http', auth="public", website=True)
def file_template(self):
file_records = request.env['your.model'].search([]) # Replace 'your.model' with the actual model name
files = []
for file in file_records:
download_url = '/web/content/%s/%s/file/%s' % (file._name, file.id, file.file_name) + '?download=true'
image = '/web/image/%s/%s/image' % (file._name, file.id)
files.append({
'download_url': download_url,
'image': image
})
return request.render('your_module.template_name', {'files': files}) # Replace 'your_module' and 'template_name' with the appropriate module and template names
In this example, we define a controller method called file_template(). It is decorated with http.route() to specify the route URL for accessing the template. Inside the method, we retrieve the file records from the database using request.env['your.model'].search([]), and iterate over each record to construct the download_url and image values. We store these values in a list of dictionaries called files.
Finally, we use request.render() to render the specified template and pass the files list as a parameter. Make sure to replace 'your.model' with the actual model name and 'your_module' and 'template_name' with the appropriate module and template names in your code.
Once you've implemented this controller method, you can access the template by visiting the defined URL, such as http://your_domain/file/template. The template will receive the files list containing the download_url and image values, allowing you to display the file download links and image thumbnails on the front end.
Step 3: Display the Binary File on the Frontend:
Once you have the binary data available on the front end, you can use appropriate techniques to display the file in the desired format. Here, we will discuss two common scenarios: displaying an image and displaying a file download link.
Here's an example template that you can use to display the file download links and image thumbnails using the download_url and image values passed from the controller:
<template id="file_template" inherit_id="your_module.template_name" name="File Template">
<t t-foreach="files" t-as="file">
<div>
<a t-att-href="file['download_url']" t-att-download="file['file_name']">Download File</a>
<img t-att-src="file['image']" alt="File Thumbnail" />
</div>
</t>
</template>
In this template example, we iterate over the files list using the <t t-foreach="files" t-as="file"> directive. For each file, we display a <div> element containing an <a> tag for the download link and an <img> tag for the image thumbnail.
Inside the <a> and <img> tags, we use the t-att-href and t-att-src attributes to dynamically bind the download_url and image values from the file dictionary.
Make sure to replace 'your_module' and 'template_name' in the inherit_id attribute with the appropriate module and template names that you used in your Odoo module.
By incorporating this template into your Odoo module, you will be able to display the file download links and image thumbnails for each file record on the front end when accessing the controller route.
Displaying binary files uploaded in the backend on the front end in Odoo 16 involves retrieving the binary data, converting it to a suitable format, and using appropriate techniques to display the files or provide download links. By following the steps outlined in this blog post and using the provided examples, you can effectively showcase binary files in your Odoo application, whether it be images, documents, or any other type of file.