Upload multiple files at once to server with Summernote File

Question

What changes, please, can I make to the code below, so that my upload.php file can receive multiple files which I would them loop through to process? I have been trying to upload multiple files at once to server using Summernote. Although, I select multiple files from my laptop for the upload, only one file gets uploaded. I feel certain that the PHP file which handles the upload is not the problem because it receives only one file even if I select multiple files for upload. Below is how the JQuery code looks like

$('.summernote-mini').summernote({
    height: 200,
    tabsize: 2,
    callbacks: {
        onFileUpload: function(files) {
            callBack(files[0]);
        },
    }
});

Callback Function

function callBack(files) {
    
    let data = new FormData();
    data.append('media_upload[]', files);
    $.ajax({
        data: data,
        type: "POST",
        url: "upload.php",
        cache: false,
        contentType: false,
        processData: false,
        xhr: function() { //Handle progress upload
            let myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) myXhr.upload.addEventListener('progress', progressHandlingFunction, false);
            return myXhr;
        }
        
    }).done(function(reponse){
        
        //I handle the response here
        
    });
}

Regardless of the number of files I select to upload, count($_FILES['media_upload']['name']) gives me 1 in my e.g upload.php file which handles the server side file upload. What could be the solution to this problem?

Answer 1

After receiving assistance from @Fravadona I got the solution to the problem. I replaced callBack(files[0]); with callBack(files);as @Fravadona suggested.

Then, in the call back function, I replaced data.append('media_upload[]', files); with the code below:

var iLength = files.length;

var i;
for(i = 0; i < iLength; i++){
    data.append("media_upload[]", files[i]);
}

So the correct code has become this:

$('.summernote-mini').summernote({
    height: 200,
    tabsize: 2,
    callbacks: {
        onFileUpload: function(files) {
        callBack(files);
        },
    }
});

And the call back function has become this:

function callBack(files) {

    let data = new FormData();
    var iLength = files.length;

    var i;
    for(i = 0; i < iLength; i++){
        data.append("media_upload[]", files[i]);
    }
    $.ajax({
        data: data,
        type: "POST",
        url: "upload.php",
        cache: false,
        contentType: false,
        processData: false,
        xhr: function() { //Handle progress upload
            let myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) myXhr.upload.addEventListener('progress', progressHandlingFunction, false);
            return myXhr;
        }
    
    }).done(function(reponse){
    
        //I handle the response here
    
    });
}

So now, I am able to successfully upload multiple files at once using Summmernote.