How to Upload Files from Web Form in Odoo 13

In the Odoo website, we have different forms like contact form, contact details form, 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 different types of input fields are there like text, submit, checkbox, date, button, etc. Basically, in Odoo we can see field types in the web forms are like text, text area, checkbox, submit, etc are used. But if we want to upload some files with these fields we want 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 like 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 in our website. In the below code it shows only the form tag with 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. 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 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 can upload their document from the website. I hope this blog is helpful.