Upload multiple file using codeignter with ajax jquery

I want to upload multiple files at a time in Codeigniter using jquery ajax, single upload is working but am trying to upload multiple files but getting this error:

You did not select a file to upload

for single selection this code was working but i have only added array type to file field not it is throwing the above error, Any suggestion to solve this issue.

Controller Code:-

 public function do_upload()
    {
        if (($_SERVER['REQUEST_METHOD']) == "POST") {
            for($i=0; $i<count($_FILES['attach_file']['name']); $i++){
            $filename = $_FILES['attach_file']['name'][$i];
            $filename = strstr($filename, '.', true);
            $email    = $this->session->userdata('email');
            $filename = strstr($email, '@', true)."_".$filename;
            $filename = strtolower($filename);

            $config['upload_path']   = FCPATH .'./assets/attachments/';
            $config['allowed_types'] = 'pdf|doc|docx|bmp|gif|jpg|jpeg|jpe|png';
            $config['max_size']      = 0;
            $config['max_width']     = 0;
            $config['max_height']    = 0;
   
            $this->load->library('upload', $config);

            $name = 'attach_file[]';
            if ( ! $this->upload->do_upload($name) ) {
                $data['exception'] = $this->upload->display_errors();
                $data['status'] = false;
                echo json_encode($data);
            } else {
                $upload =  $this->upload->data();
                $data['message'] = 'Uploaded successfully';
                $data['filepath'] = './assets/attachments/'.$upload['file_name'];
                $data['status'] = true;
                echo json_encode($data);
            }
        }  
        }
    }

View:-

 <?php echo form_open_multipart('form','class="form-inner" id="userForm" ') ?>
  <input type="file" name="attach_file[]" id="attach_file"
  multiple="true">

Jquery:

<script type="text/javascript">
$(function(){
    var browseFile = $('#attach_file');
    var form       = $('#userForm');
    var progress   = $("#upload-progress");
    browseFile.on('change',function(e)
    {
        e.preventDefault(); 
        uploadData = new FormData(form[0]);

        $.ajax({
            url      : '<?php echo base_url('do_upload') ?>',
            type     : form.attr('method'),
            dataType : 'json',
            cache    : false,
            contentType : false,
            processData : false,
            data     : uploadData, 
            beforeSend  : function() 
            {
              
            },
            success  : function(data) 
            { 
              
            }, 
            error    : function() 
            {
            }   
        });
    });
});

Solution

View Code:-

<body>
        <p id="msg"></p>
        <input type="file" id="multiFiles" name="files[]" multiple="multiple"/>
        <button id="upload">Upload</button>
</body>

Ajax / jQuery Code:-

<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function (e) {
                $('#upload').on('click', function () {
                    var form_data = new FormData();
                    var ins = document.getElementById('multiFiles').files.length;
                    for (var x = 0; x < ins; x++) {
                        form_data.append("files[]", document.getElementById('multiFiles').files[x]);
                    }
                    $.ajax({
                        url: 'ajaxmultiplefileupload/upload_files', // point to server-side controller method
                        dataType: 'text', // what to expect back from the server
                        cache: false,
                        contentType: false,
                        processData: false,
                        data: form_data,
                        type: 'post',
                        success: function (response) {
                            $('#msg').html(response); // display success response from the server
                        },
                        error: function (response) {
                            $('#msg').html(response); // display error response from the server
                        }
                    });
                });
            });
</script>

Controller:-

class AjaxMultipleFileUpload extends CI_Controller {

    function __construct() {
        parent::__construct();
    }

       
    function upload_files() {
        if (isset($_FILES['files']) && !empty($_FILES['files'])) {
            $no_files = count($_FILES["files"]['name']);
            for ($i = 0; $i < $no_files; $i++) {
                if ($_FILES["files"]["error"][$i] > 0) {
                    echo "Error: " . $_FILES["files"]["error"][$i] . "<br>";
                } else {
                    if (file_exists('uploads/' . $_FILES["files"]["name"][$i])) {
                        echo 'File already exists : uploads/' . $_FILES["files"]["name"][$i];
                    } else {
                        move_uploaded_file($_FILES["files"]["tmp_name"][$i], 'uploads/' . $_FILES["files"]["name"][$i]);
                        echo 'File successfully uploaded : uploads/' . $_FILES['files']['name'][$i] . ' ';
                    }
                }
            }
        } else {
            echo 'Please choose at least one file';
        }
    }

}