Javascript: How to push multiple image files into array -

i have multiple input files

<input type="file" name="file_name[]" id="file_id_0"> <input type="file" name="file_name[]" id="file_id_1"> <input type="file" name="file_name[]" id="file_id_2"> 

i want each of store in array did, working me

var imagecontainer = []; var file_name = document.getelementsbyname('file_name[]'); for(var = 0; i< file_name.length; i++){     alert(i);     var fileupload = document.getelementbyid('file_id_'+i);     imagecontainer.push(fileupload.files[0]); }  var data = new formdata(); for(var b=0; b<imagecontainer.length; b++){     data.append('file_name[]', imagecontainer[b]); } 

but if 1 of input file empty got error cannot read property 'files' of null.

so trying push files in other way not working

var file_namearr = []; $('input[name="file_name[]"]').each(function(k,v){     file_namearr.push($(v).val()); //how push each files array? }); 

but if 1 of input file empty got error cannot read property 'files' of null.

that doesn't mean input empty, means getelementbyid call didn't return element @ all.

there's no reason getelementbyid call, already have elements in collection referenced file_name variable. use it, , check length make sure have @ least 1 file in it:

var imagecontainer = []; var file_name = document.getelementsbyname('file_name[]'); for(var = 0; i< file_name.length; i++){     alert(i);     var fileupload = file_name[i];                    // ***     if (fileupload.files.length) {                    // ***         imagecontainer.push(fileupload.files[0]);     }                                                 // *** } 

note filenames have fake paths on them.