Drag and Drop File Input Require Validation

I have a file input from Django forms that renders to

<input type="file" name="file" required id="id_file" accept="application/pdf">
<label for="id_file" id="labelFile"><i class="fa fa-upload"></i> <span>Upload File...</span> </label>

I wanted to add a drag and drop to this file input so I did

    const dropHandler = function(ev){
        ev.preventDefault()

        if(ev.dataTransfer.items){
            for(const i of ev.dataTransfer.items){
                if(i.kind === 'file'){
                    const file = i.getAsFile()
                    console.log(file);
                    const fileIn = document.querySelector('#id_file')
                    fileIn.file = file
                    console.log(fileIn.file.name);
                    $('#labelFile span').html(fileIn.file.name)
                }
            }
        }
    }

The problem is it doesn't let me submit the form because the input file field is required. Is doing

fileIn.file = file

incorrect for setting the input file field so it satisfies the required?