How to Upload Files from Web Form in Odoo 13

On the Odoo website, we have different forms like contact forms, contact details forms, etc. These forms are used to collect information from the end-user. End users can enter the data based on the fields defined in a web form.

We know that there are different types of input fields like text, submit, checkbox, date, button, etc. Basically, in the Odoo field types in the web forms like text, text area, checkbox, submit, etc are used. But if we want to upload some files with these fields we have to add an input field with type as a file. So in this blog, I am going to explain how to upload files through web forms.

First of all, we want to define a field to store attachments in our model as below,

attachment = fields.Many2many('ir.attachment', 'attach_rel', 'doc_id','attach_id3',               				
                                        string="Attachment",                                           				
                        help='You can attach the copy of your document', copy=False)

And there must be a related field in the model ‘ir.attachment’.

class Attachment(models.Model):
    _inherit = 'ir.attachment'
        attach_rel = fields.Many2many('res.partner', 'attachment', 'attachment_id3', 'document_id',string="Attachment", invisible=1 )

Now let’s create a web form on our website. In the below code it shows only the form tag with the input field for the attachment. You can define this field inside a form where ever you want. But there must be an important thing to note. That is, you can see the form tag has a number of attributes like action, method, enctype, etc, but the attribute named enctype has an important role in transferring attachment data.

enctype="multipart/form-data": It means no characters in the files will be encoded. So it is used when a web form requires binary data (like contents of a file to be uploaded) and it is also used for uploading files to the database.

.xml :

<form action="/my/account" method="post" enctype="multipart/form-data">
	<------ your code ------->
	<div class="form-group">
    	  <div class="col-lg-3 col-md-4 text-right">
          <label class="col-form-label" for="attachment">Attachment(s)</label>
    	  </div>
    	  <div class="col-lg-7 col-md-8">
           <input type="file" name="attachment" multiple="true"
               accept="image/*,application/pdf,video/*"/>
    	  </div>
	</div>
	<------ your code ------->
</form>

The above code helps us to make a field like as shown below,

When the form action occurs, the action goes to the controller file. This is from where we can convert our data and store it into the database.

main.py :

@route(['/my/account'], type='http', auth='user', website=True)
def account(self, redirect=None, **post):
    		<------ your code ------->
	partner = request.env.user.partner_id
        Attachments = request.env['ir.attachment']
        name = post.get('attachment').filename
        file = post.get('attachment')
        attachment_id = Attachments.create({
            'name': name,
            'type': 'binary',
            'datas': base64.b64encode(file.read()),
            'res_model': partner._name,
    	     'res_id': partner.id
        })
        partner.update({
            'attachment': [(4, attachment_id.id)],
        })
    		<------ your code ------->

The above code creates an attachment with name, rec_model, etc. You can see your uploaded files in the rec_model because we already define an attachment field in our rec_model.

This is how we add a file upload field in a web form and so it helps the end-users to upload their document from the website. I hope this blog is helpful for you.