Upload multiple files at once to server with Summernote File - php

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.