title: Javascript: How to push multiple image files into array
body: <p>I have multiple input files</p>
  
  <pre><code>&lt;input type="file" name="file_name[]" id="file_id_0"&gt;
  &lt;input type="file" name="file_name[]" id="file_id_1"&gt;
  &lt;input type="file" name="file_name[]" id="file_id_2"&gt;
  </code></pre>
  
  <p>I want each of it store in array so i did, this is working to me</p>
  
  <pre><code>var imageContainer = [];
  var file_name = document.getElementsByName('file_name[]');
  for(var i = 0; i&lt; 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&lt;imageContainer.length; b++){
      data.append('file_name[]', imageContainer[b]);
  }
  </code></pre>
  
  <p>But if one of the input file is empty is I got an error Cannot read property 'files' of null.</p>
  
  <p>So I am trying to push the files in other way but not working</p>
  
  <pre><code>var file_nameArr = [];
  $('input[name="file_name[]"]').each(function(k,v){
      file_nameArr.push($(v).val()); //How do i push each files into my array?
  });
  </code></pre>