CODEWITHSUNDEEP
javascriptarrays
Echoing Throughout Tel Numara
Echoing Throughout Tel Numara

Reputation: 353

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

Upvotes: 1

Views: 12775

Answers (3)

Tobias S
Tobias S

Reputation: 1275

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">

Upvotes: 1

Nishanth Matha
Nishanth Matha

Reputation: 6081

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

Upvotes: 2

T.J. Crowder
T.J. Crowder

Reputation: 1074268

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.

Upvotes: 1

Related Questions