javascript Multiple Ajax requests to Flask-python - Only! one received

Question

i'm trying to loop through multiple forms with input file type and Ajax them to Flask

javascript look like this :-

I've a list of forms under variable var upFC = document.getElementsByClassName('uploadImage');

each form look like this :-

<form method=​"post" action=​"/​upload" enctype=​"multipart/​form-data" id=​"f_x" class=​"uploadImage">
   <input type=​"file" id=​"u_x">​
   <input type=​"submit" value=​"Submit" id=​"s_x">​
</form>​`

where x = [ 0 - 100 ]

then to Ajax the files i used this method

for (i = 0; i < upFC.length; i++) {

   var cFile = upFC[i].elements[0].files;
   var fileName = upFC[i].elements[0].value;

   const fd = new FormData();
   fd.append('file', cFile[i], rightName);
   const fdx = new XMLHttpRequest();
   fdx.open('post' , "/uploadIds" , true);
   fdx.send(fd);
   }

Flask code look like this :-

@app.route('/uploadIds', methods=['POST' , 'GET'])
def handle_uploadIds():
   d = os.path.join(root,'uploads/')
   allImages = request.files.to_dict();
   print("\n\n activated - ids \n\n ")
   print("\n\n all images \n\n  == > ", allImages  )



   for file in allImages:
       print(f"----\n\n {allImages[file]} \n\n")
       fileName = allImages[file].filename
       dest = "/".join([d, fileName ])
       print(f"\n\n upload 1 is active :{fileName}\n\n")
       allImages[file].save(dest)

return '', 204

no matter what method i try on flask I always get the first file correctly and the rest of the loops are just empty .. no errors

I've also added logs on Javascript side to see if the formData is sending the right file every time it loops and yes it does.

for some reason flask receives the first file and never the rest.

after applying this code to trace the formData before sending.

for (var pair of fd.entries()) {
console.log(pair[0]+ ', ' + pair[1]);}
}

on chrome console i get this

file, [object File]
2 file, 

Printed output from flask according to my code

     all images

  == >  {'file': <FileStorage: 'PHNZIH1062_id.png' ('image/png')>}
---- 
 <FileStorage: 'PHNZIH1062_id.png' ('image/png')> 
 activated - ids 
 all images
  == > 
 upload 1 is active :PHNZIH1062_id.png
 {}

 activated - ids   
 all images
  == >  {}
127.0.0.1 - - [13/Dec/2018 21:06:15] "POST /uploadIds HTTP/1.1" 204 -
127.0.0.1 - - [13/Dec/2018 21:06:15] "POST /uploadIds HTTP/1.1" 204 -
127.0.0.1 - - [13/Dec/2018 21:06:15] "POST /uploadIds HTTP/1.1" 204 -

methods I've tried :

• request.files.getlist('file'):
• request.files.to_dict():
• request.files.items():

some of the highlighted methods I've tried : all 3 methods in this link

I'm not sure if the problem is within flask or ajax but probably it lies within flask's code

Answer 1

turned out to be pretty simple , it was client side after all , all i had to do is to change this

var cFile = upFC[i].elements[0].files;

to

var cFile = upFC[0].elements[0].files;

because that was the [file object] location.