Upload Files without the site reloading

Question

So i have a form, with which id like to upload files to a server and afterwards make an entry into my database. My first try was with mainly ajax, but that didnt work out and started falling appart as soon as the file was over 1 or 2mb. Now a have a solution that does work fairly well, but always reloads the page if i use action or doesnt work if i submit the form via ajax (need ajax for the entry). What i want is for the page to not reload when i submit the form.

My HTML:

 <form id="file_form" action="<?php echo base_url();?>index.php?/cfb_terminal/Cfb_terminal/insert_file_name" enctype="multipart/form-data" method="POST" name="fileinfo">
   <label class="form-label" for="customFile"></label>
   <input type="file" class="form-control" name="myfile" id="customFile"/>
   <input type="hidden" id="file_upload" data-id=""/>

   <p class="shake_modal"><small><em class="" id="max_file">Max filesize 10 mb!</em></small></p>
</div>
<div class="modal-footer">
   <div class="loader" id="loader" style="width:20px;height:20px"></div>
   <i class="fas fa-check-square" id="checkmark" style="height: 25px; color: mediumseagreen;"></i>
   <button type="submit" name="submit" id="file_upload_button" class="btn btn-success submit_upload">Save</button>
   <button type="button" class="btn btn-secondary close" data-bs-dismiss="modal">Close</button>
 </form>
</div>

(this is not the full modal, only the part that is related to the form/upload process.

My Jquery/Ajax:

  $('body').on('click', '.submit_upload', function(e) {

                    var inputdata = {
                      'id' : $('#file_upload').attr('data-id'),
                      'line_id' : $('#line_name_nav').val(),
                    }

                            $.ajax({
                                url:baseUrl + '/webapps/index.php?/cfb_terminal/Cfb_terminal/insert_file_name',
                                type:'POST',
                                dataType: 'json',
                                data: inputdata,
                                async: true
                            })
                            .done(function(incoming) {
                                counter=0;
                                Cfb_terminal.get_doc(incoming);
                            })
                            .fail(function(xhr) {

                                counter=0;

                                if(xhr.statusText !== 'ajaxAlive') {


                                }
                            });

                            e.preventDefault();

                  });

My PHP:

Controller:

    public function insert_file_name(){
        $id = $this->input->post('id');
        $line_id = $this->input->post('line_id');
        $this->Cfb_terminal_model->insert_file_name($id);
        $return = $this->Cfb_terminal_model->doc_name($line_id);
        $this->output->set_content_type('application/json', 'utf-8')->set_output(json_encode($return));

    }

Model:

    public function upload_file($file = 'myfile')
    {
            $target_dir = './files/cfb_terminal/';
            $target_file = $target_dir.basename($_FILES[$file]['name']);
            $file_type = pathinfo($target_file,PATHINFO_EXTENSION);
            $allowes_extension = array('pdf');
            if (empty($_FILES[$file]['size'])) {
                return "test.pdf";
            }
            elseif(!in_array($file_type,$allowes_extension)){
                return "File not supported";
            }
            elseif ($_FILES[$file]['size'] > 5000000) {
                return "Size not supported";
            }
            else{
                move_uploaded_file($_FILES[$file]['tmp_name'],$target_file);
                return($_FILES[$file]['name']);
            }
    }

    public function insert_file_name($id){
        $aa =   $this->Cfb_terminal_model->upload_file('myfile');