Django form image field mandatory error even when filled

Question

I have a form that works both for when creating a new instance or editing one, on django. The problem is that no matter what scenario, even when I fill the input file fields, it always returns error that fields are mandatory.

The models.py:

class Images(models.Model):
    background_image = models.ImageField(upload_to='images/')
    user_image = models.ImageField(upload_to='images/user/')
    other_model = models.OneToOneField(
        "OtherModel", on_delete=models.CASCADE
    )

forms.py file:

class ImagesForm(forms.ModelForm):
    background_image = forms.ImageField(
        widget=CustomImageInputWidget(attrs={"id": "background_input", "title": _("Background")})
    )
    user_image = forms.ImageField(
        widget=CustomImageInputWidget(attrs={"id": "logo_input", "title": _("Logo")})
    )
    class Meta:
        model = Images
        fields = "_all_"

views.py file:

if request.POST:
        images_form = ImagesForms(request.POST, request.FILES, instance=image_forms_instance)
    else:
        images_form = ImagesForms(initial={"other_model": other_model}, instance=customizable_instance)

template file:

<form method="POST" enctype="multipart/form-data" id="my-form">
    {{ csrf_input }}
    {{images_form.as_p()}}
                     
    {{images_form.errors}}
    <div class="tools-card-footer">
    <span class="tools-icon-share">
            <input type="submit" name="custom" value="Start">
    </span>
    </div>
</form>

custom widget file:

{% if widget.is_initial %}{{ widget.initial_text }}: <a href="{{ widget.value.url }}">{{ widget.value }}</a>{% if not widget.required %}
<input type="checkbox" name="{{ widget.checkbox_name }}" id="{{ widget.checkbox_id }}"{% if widget.attrs.disabled %} disabled{% endif %}>
<label for="{{ widget.checkbox_id }}">{{ widget.clear_checkbox_label }}</label>{% endif %}<br>
{{ widget.input_text }}:{% endif %}
<input type="{{ widget.type }}" name="{{ widget.name }}"{% include "django/forms/widgets/attrs.html" %}>


<div class="dropzone" id="{{widget.attrs.id}}-div">
  <input accept="image/png, image/gif, image/jpeg" type="file" name="file" id="{{widget.checkbox_id}}" {% for name, value in widget.attrs.items() %}{% if value is not sameas False %} {{ name }}{% if value is not sameas True %}="{{ value }}"{% endif %}{% endif %}{% endfor %} style="display:none;">


    <label for="{{widget.attrs.id}}" id="{{widget.attrs.id}}-label">

      <header>
        <div>{{widget.attrs.title}}</span><br>
          <span>Upload below</span>
        </div>
      </header>
    </label>
    <button class="btne" onClick="clickOnInput()">Search file</button>
</div>

<script>
let dropZoneElement{{widget.attrs.id}} = document.getElementById("{{widget.attrs.id}}-div");
let inputElement{{widget.attrs.id}} = document.getElementById("{{widget.checkbox_id}}");

function clickOnInput(){
  inputElement{{widget.attrs.id}}.click();
}

dropZoneElement{{widget.attrs.id}}.addEventListener("dragover", (event) => {
  event.preventDefault();
});


dropZoneElement{{widget.attrs.id}}.addEventListener("drop", (e) => {
  e.preventDefault();

  if (e.dataTransfer.files.length) {
    inputElement{{widget.attrs.id}}.files = e.dataTransfer.files;
  }
});
</script>

It works when I use the default widget, but when I try my custom one it stops working.