https://codepen.io/jpwade95/pen/WNdZOMQ?editors=1010
$(document).on('click', '.save', function (e) {
var teamNameImageList = [];
$('.teamInfo').each(function (index, value) {
var img = this.querySelector('.teamImage').files;
var imgFile = this.querySelector('.teamImage').files[0];
if (imgFile != null || imgFile != undefined) {
Promise.all(Array.prototype.map.call(img, ReadData))
.then(function (urls) {
teamNameImageList.push({
Image: urls[0],
TeamNameId: $(value).data("team-name-id")
});
console.log(teamNameImageList);
});
}
});
});
function ReadData(file){
return new Promise(function (resolve) {
let reader = new FileReader();
reader.onload = function () {
resolve(reader.result);
};
reader.readAsDataURL(file);
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='teamInfo' data-team-name-id='1'>
<input type='file' class='teamImage'/>
</div>
<div class='teamInfo' data-team-name-id='2'>
<input type='file' class='teamImage'/>
</div>
<button class='save'>Save</button>
Here is the link to my code. It's in the console. Not sure why but my arrays are different..Codepen is slightly different from my local 
Not sure what's going on. It seems like it adds the data to the array for the first one but when I try to retrieve that data (like array[0]) it says undefined. Any idea why? Hopefully this makes sense.
I'm ultimately trying to json.stringify this but (looking at the screenshot) it just stringifies the empty [] rather than any data inside of it. the array I want to use is stuck in the promise and I can't figure out how to get it out of there.