jQuery - post single files with loop from input multiple - php

Question

I need to post with jQuery files from a multiform form.
The problem is I don't know how to send each file individually with a foreach loop, so I can get upload success from each file separately.
Here's my function to send each file to PHP:
var fileInput = document.getElementById ("images_upload_new_album");
if ('files' in fileInput) {
//console.log(fileInput.files);
$.each(fileInput.files, function(index, val) {
/* iterate through array or object */
console.log(fileInput.files[index]);
$.ajax({
url: config.site + "admin/photos/upload_test",
type: 'POST',
data: {file: fileInput.files[index].name},
dataType: 'json',
mimeType:"multipart/form-data",
contentType: false,
cache: false,
processData:false,
beforeSend: function (data) {
console.log("Before send.");
//console.log(data);
}, // AJAX request is about to be sent
complete: function (data) {
console.log("Complete.");
//console.log(data);
}, // AJAX request has completed
success: function(data, textStatus, jqXHR) // AJAX request has completed successfully
{
console.log("success.");
console.log(data);
},
error: function(jqXHR, textStatus, errorThrown) // AJAX request has completed with errors
{
console.log("error.");
}
});
});
};
And my PHP test function.
public function upload_test()
{
$received = $_FILES;
echo json_encode($received);
}
What I get from console:
File {webkitRelativePath: "", lastModified: 1418160606000, lastModifiedDate: Tue Dec 09 2014 20:30:06 GMT-0100 (Hora padrão dos Açores), name: "100371.jpg", type: "image/jpeg"…}
Before send.
Modal it's opened
success.
[]
Complete.
This is my multiform:
<form action="http://xxxxxxx.dev/admin/photos/upload" id="upload_form" enctype="multipart/form-data" method="post" accept-charset="utf-8">
<input type="file" name="images_upload_new_album[]" value="" id="images_upload_new_album" class="hidden_images_upload" style="visibility: hidden; width: 0px; height: 0px" multiple="multiple" accept=".jpg" />
</form>

Answer 1

I solved the problem by recreating the POST loop:
$('#new-album-modal').on('show.bs.modal', function (e) {
// Runs after show modal event is fired
var fileInput = document.getElementById ("images_upload_new_album");
if ('files' in fileInput) {
jQuery.each($('#images_upload_new_album')[0].files, function(i, file) {
var data = new FormData();
data.append('fileinput', file);
$.ajax({
url: config.site + "admin/photos/upload_test",
type: 'POST',
data: data,
dataType: 'json',
mimeType:"multipart/form-data",
contentType: false,
cache: false,
processData:false,
beforeSend: function (data) {
console.log("Before send.");
//console.log(data);
}, // AJAX request is about to be sent
complete: function (data) {
console.log("Complete.");
//console.log(data);
}, // AJAX request has completed
success: function(data, textStatus, jqXHR) // AJAX request has completed successfully
{
console.log("success.");
console.log(data);
},
error: function(jqXHR, textStatus, errorThrown) // AJAX request has completed with errors
{
console.log("error.");
}
});
});
};
});
This problem was solved based on this post: http://stackoverflow.com/questions/5392344/sending-multipart-formdata-with-jquery-ajax