Multiple File Upload in codeigniter using HTML5 and XHR - html

Question

I'm working on multifile upload using html5 and xhr, as you can see I'm sending requests in loop which is a bad
concept but I'm not able to upload files when I send it outside the loop and only the last file gets upoaded.
Where am I going wrong?
$('#uploadimg').on('click', function(e) {
var files = document.getElementById('files').files;
var formData = new FormData();
for (var i = 0; i < files.length; i++) {
formData.append('file', files[i]);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://localhost/ajaxuploader/upload/uploadimg');
xhr.onload = function() {
if (xhr.status === 200) {
console.log('all done: ' + xhr.status);
} else {
console.log('Something went terribly wrong...');
}
};
xhr.send(formData);
}
// now post a new XHR request
});
Codeigniter
public function uploadimg (){
$config['upload_path'] = FCPATH . 'uploads/' ;
$config['allowed_types'] = 'gif|jpg|png|jpeg|pdf|doc';
$config['remove_spaces'] = 'TRUE';
$this -> load -> library('upload', $config);
//$this->upload->initialize($config);
foreach ($_FILES as $k => $f) :
$this -> upload -> do_upload($k);
endforeach;
//$this->index();
}

Answer 1

Its seems the first thing you should look at is your js for loop. ID's should be unique so I would rule that approach out.
I would maybe loop each input field, check to see if the attr type == file, then append that to your formData object.
var inpts = document.getElementsByTagName('input');
for(var i=0; i < inpts.length; i++)
{
if(inpts[i].getAttribute('type') == 'file')
{
formData.append('myFiles[]', inpts[i].files[0]);
}
}
On the server side I would look at your foreach loop, maybe a for loop might suffice.
for($i=0; $i < count($_FILES); $i++){
$this->upload->initialize(); //new initialization for each file
$this->upload->do_upload($_FILES[$i]);
continue;
};

Answer 2

Hi guys i figured out the problem codeigniter is working fine, the problem is in the jquery. this is the line causing the problem. "formData.append(files[i].name, files[i]);" Thanks for all for takign efforts to solve my issue
$('#uploadimg').on('click', function(e) {
//console.log(files);
// files = document.getElementById('files').files;
var formData = new FormData();
$(files).each(function(i) {
formData.append(files[i].name, files[i]);
})
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://localhost/ajaxuploader/upload/uploadimg');
xhr.onload = function(data) {
console.log(xhr.responseText);
};
xhr.send(formData);
});