Odoo AJAX attachment or images creation into client-side (frontend)

Question

What i know

In a modal creation object i know how add an attachment or image because all <input> are inside a form and when user click the submit button the form action trigger the controller that manage inputs data.

For Example:

<form id="formId" t-attf-action="/my/object/#{slug(object)}/create" method="post" enctype="multipart/form-data">
    <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
    <input type="hidden" name="object" t-att-value="object"/>
    <input type="text" name="text" class="o_website_form_input form-control"/>
    <input type="file" name="image" class="o_website_form_input form-control" accept="image/*"/>
    <input type="submit" class="btn btn-success" value="Create/"/>
</form>

Will trigger the following controller:

@route(['/my/object/<model("object.model"):object>/create'],
       type='http', auth="user", methods=['POST'], website=True)
def object_create(self, object, **post):
    if not object:
        return request.render("website.404")

    attachment = post.get('image')
    text = post.get('text')
    values = {
        'text': text,
    }
    # If present get image data from input file
    if attachment:
        data_image = base64.b64encode(attachment.read())
        values['image'] = data_image

    request.env['object.model'].create(values)
    # Redirect to the details page with new value
    string_url = '/my/object/view/' + slug(object)
    return werkzeug.utils.redirect(string_url)

So, now we have a sync POST that create object with text and image with a redirect to the create object.

Now, the question is:

How manage records with images or attachments update?

For simple record update i use this methods:

1) a modify button that show hidden <input> or <textarea> that will take new values

2) an on.('change', '.class-to-monitorate') that populate an object like point 3)

3) dataToSend = {} It become something like: dataToSend = {object_id: {values from input}} --> This is Good for write() inside controller

4)An ajax.jsonRpc("/my/path/for/update/value", "call", dataToSend)

The problem is that with controller type JSON and <input type="file"> i don't know how pass files.

It's possible to use a controller type="http" and send data like a <form>? So i can receive all the changed <input type="file"/> and store them without refreshing the entire page every time.

EDIT

Here the JS that populate dataToSend object

   // onChange bind that manage confirmity line values save
    $(document).on("change", ".conformity-line-value", function () {
        let value = $(this).val();
        let name = $(this).attr('name');
        let type = $(this).attr('type');
        let non_conformity_line_id = Number($(this)
            .closest('div.non-conformities-line')
            .find("input[name='non_conformity_line_id']").val());

        //If the dict for this line does not exist create it
        if (!dataToSaveConformities[non_conformity_line_id]) {
            dataToSaveConformities[non_conformity_line_id] = {}
        }
        //Add changed elements into dic to corresponding line
        switch (name) {
            case 'name':
                dataToSaveConformities[non_conformity_line_id]['name'] = value;
                if (value === '') {
                    $(this).addClass('error_input');
                } else {
                    $(this).removeClass('error_input');
                }
                break;
            case 'non_conformity_note':
                dataToSaveConformities[non_conformity_line_id]['non_conformity_note'] = value;
                break;
            default:
                break;
        }
    });

The class .conformity-line-value is set to all input,textarea,select,checkbox that i need to monitorate if the user change them.

Here the JS function that call controller that save data:

   function save_changed_values() {
        if (!isEmpty(dataToSaveConformities)) {
            ajax.jsonRpc("/my/sale_worksheet_line/non_conformity/update/value", "call", dataToSaveConformities)
                .then(function (data) {
                    //Clear data to send
                    for (var member in dataToSaveConformities) delete dataToSaveConformities[member];
                    if (data.error) {
                        //FIXME: check that case or manage it
                        $('.non-conformities-div').load(window.location + " .non-conformities-div>*", function () {
                            $('select.js-conformities-read-multiple').select2();
                        });
                    } else {
                        $('.non-conformities-div').load(window.location + " .non-conformities-div>*", function () {
                            $('select.js-conformities-read-multiple').select2();
                        });
                    }
                });
        }
    }

I try to take the base64 of image from <input type="file"> and put it inside sended object (parsed as JSON) But in the controller i receive an empty value inside **post