How can I filter by image format on the dialog window when I upload an image in Odoo?

Question

I have a model with an image attribute:

image = fields.Binary(
    string="Imagen",
    required=True
)

Inside the view a show it with:

<field name="image" widget="image" />

This open an operating system dialog window that allows me to select an image file. The problem is that I need to take only *.jpg files and I don't know how to open this dialog windows filtered with this kind of file.

Answer 1

I will decribe you all the procedure I had to do to find out what you should do. This could be useful for the next time you want to modify anything else:

Inspection

If you inspect the html of the widget you can find the hidden input file:

<input accept="image/*" class="oe_form_binary_file" name="ufile" type="file">

So if you go to this w3schools page you can check what accept="image/*" means. We must override it with .jpg or any other extension that you need.

Find the Primary Source Code

Then you should look for the template on the original Odoo source code. As you can see in the web module the used template is the following:

<t t-name="HiddenInputFile">
    <div t-attf-class="oe_hidden_input_file #{fileupload_class or ''}" t-att-style="fileupload_style">
        <form class="oe_form_binary_form" t-att-target="fileupload_id"
            method="post" enctype="multipart/form-data" t-att-action="fileupload_action || '/web/binary/upload'">
            <input type="hidden" name="session_id" value="" t-if="widget.session.override_session"/>
            <input type="hidden" name="callback" t-att-value="fileupload_id"/>
            <t t-raw="0"/>
            <input type="file" class="oe_form_binary_file" name="ufile" t-if="widget.widget!='image'"/>
            <input type="file" class="oe_form_binary_file" name="ufile" accept="image/*" t-if="widget.widget=='image'"/>
        </form>
        <iframe t-att-id="fileupload_id" t-att-name="fileupload_id" style="display: none"/>
    </div>
</t>

Extend and Modify the Original Code

Finally you only need to override the input field with Qweb Template Inheritance

<templates id="image_widget_jpg_template" xml:space="preserve">
    <t t-extend="HiddenInputFile">
        <t t-jquery="[accept='image/*']" t-operation="replace">
            <input type="file" class="oe_form_binary_file" name="ufile" accept=".jpg" t-if="widget.widget=='image'"/>
        </t>
    </t>
</templates>