I am trying to submit a form that contains a file input (multiple).
addDeduction=async ()=>{
v=validate()
if (v) {
data={
ddate:ddate.value,
ddepartment:ddepartment.value,
damount:damount.value,
ddetails:ddetails.value,
dfiles:null
}
if (dfiles.value.length > 0) {
f=await createB64()
data.dfiles=f
}
console.log(data.dfiles)
console.log(data.dfiles.length)
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
//code
}
};
xmlhttp.open("post", "accounting/deductions/addDeductionAjax.php", true);
xmlhttp.send(JSON.stringify(data));
}
}
createB64=()=>{
data2=[]
for (i=0;i < dfiles.files.length; i++) {
var reader = new FileReader();
reader.onload=(e)=>{
f=e.target.result
data2.push(f)
};
reader.readAsDataURL(dfiles.files[i])
}
return data2;
}
issue is the first console.log(data.dfiles) return an array containing the base64 string of each of the 2 images, even in the console it states "length=2". While to following line in which I try to output the length of the array "console.log(data.dfiles.length)" it gives me a length of 0.
Another problem which I thinnk is related is that when I try to JSON.stringify(data) ... the array of base64 strings is empty in the JSON !
here is the console output:
Array []
0: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2NjIpLCBxdWFsaXR5ID0gOTAK/9sAQwADAgIDAgIDAwMDBAMDBAUIBQUEBAUKBwcGCAwKDAwLCgsLDQ4SEA0OEQ4LCxAWEBETFBUVFQwPFxgWFBgSFBUUusLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A6xVVmwO9aUMOyPNZmkQSsgeUYPvWjcSMo2qK4b6HZa70I2BeTmrLThYsDk4qFZVjjy3Ws83imY7hx61m5cptCm5/IhfzpLgiMleea0w7QQgOc+9Mt4t583FMkzNLsJxSimtSqslJ2XQtwOjLvPB9Kcsis/HQVB5fRQeam8kxJ8taq5z6EklyuNq9abhgOKZburMS/B96mZgTxVbk2sNY4TLVQdEeTeOtWZmeU7VqNYtlJ....
1: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2ODApLCBxdWFsaXR5ID0gNzIK/9sAQwAJBgcIBwYJCAcICgoJCw0WDw0MDA0bFBUQFiAdIiIgHR8fJCg0LCQmMScfHy09LTE1Nzo6OiMrP0Q/OEM0OTo3/9sAQwEKCgoNDA0aDw8aNyUfJTc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3/8AAEQgCmwPoAwEiAAIRAQMRAf....
length: 2
<prototype>: Array []
ـــــــــــــــــــــــــــــ
0