0

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
  • 1
    `console.log()` [can be misleading](https://stackoverflow.com/questions/23429203/weird-behavior-with-objects-console-log). At the moment you log it, it is in fact an empty array. The `data2.push(f)` in your `createB64` function happens after it is logged. – Ivar Aug 23 '23 at 08:35

0 Answers0