Javascript: How to push multiple image files into array

Question

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 it store in array so i did, this is working to me

var imageContainer = [];
var file_name = document.getElementsByName('file_name[]');
for(var i = 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 one of the input file is empty is I got an error Cannot read property 'files' of null.

So I am trying to push the files in other way but not working

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?
});

Nishanth Matha · Accepted Answer · 2016-08-29 06:48:34Z

2

Just check if fileUpload is not null..to do that add a condition in your for loop as pointed below:

var file_name = document.getElementsByName('file_name[]');
for(var i = 0; i< file_name.length; i++){
    alert(i);
    var fileUpload = document.getElementById('file_id_'+i);
  if(fileUpload )
    imageContainer.push(fileUpload.files[0]);
}

answered Aug 29, 2016 at 6:48

Nishanth Matha

6,0892 gold badges22 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

T.J. Crowder · Accepted Answer · 2016-08-29 06:48:18Z

But if one of the input file is empty is I got an error Cannot read property 'files' of null.

That doesn't mean the input is empty, it means your getElementById call didn't return an element at all.

There's no reason for that getElementById call, you already have the elements in the collection referenced by your file_name variable. Just use it, and check its length to make sure it does have at least one file in it:

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

Note that the filenames will have fake paths on them.

Tobias S · Accepted Answer · 2016-08-29 06:48:35Z

1

v is your element, so $(v) is nonse, please have a look at the example.

var file_nameArr = [];
$('input[name="file_name[]"]').each(function(k,v){
  if (v.value.length > 0)
    file_nameArr.push(v.value); //How do i push the files into my array?
  else
    console.log('input is empty')
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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">
<input type="file" name="file_name[]" id="file_id_3">
<input type="file" name="file_name[]" id="file_id_4">
<input type="file" name="file_name[]" id="file_id_5">

answered Aug 29, 2016 at 6:48

Tobias S

1,2758 silver badges23 bronze badges

Collectives™ on Stack Overflow

Javascript: How to push multiple image files into array

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related