javascript - Flask AJAX POST File upload not working -

seems pretty common question , think i've searched every last 1 can't quite code work.

trying upload file server via ajax. can see browser make post request i'm getting usual flask 400 (hey, can't find key) error.

html

echo "<form id=\"pcapupload\" class=\"form-horizontal\" method=\"post\" enctype=\"multipart/form-data\">"; echo "<div class=\"form-group\">"; echo "<label for=\"pcapinput\" class=\"control-label col-xs-2\">select pcap file</label>"; echo "<div class=\"col-xs-3\">"; echo "<div class=\"input-group\">";                         echo "<input type=\"file\" id=\"uploadpcapfile\" name=\"uploadpcapfile\"></input>"; echo "</div>"; echo "</div>";    echo "</div>";  echo "<br>"; echo "<div class=\"form-group\">"; echo "<div class=\"col-xs-offset-2 col-xs-3\">"; echo "<input type=\"submit\" value=\"sumbmit\">"; echo "</div>"; echo "</div>"; echo "</form>";  

javascript:

    $("#pcapupload").submit(function(event) {          event.preventdefault();         event.stoppropagation();          var form = $(this);         var file = document.getelementbyid("uploadpcapfile");         var data = new formdata();          var onerror = function(event) {             alert("an error occoured!");         }         var onprogressupdate = function(event) {              if(event.lengthcomputable) {                  var percent = event.loaded / event.total * 100;                  $("#progress").html(percent+"%");              }          }         var onreadystatechange = function(event) {              if(request.status == 200 && request.readystate == 4) {                  alert("uploaded!");                  $("#progress").hide();                 $("#progress").html("");              }             else {                 alert("alternative state and/or status");                 console.log("state: " + request.state);                  console.log("readystate: " + request.readystate);             }          }          for(var = 0; < file.files.length; i++)             data.append('uploadpcapfile[]', file.files[i]);          $("#progress").show();         $("#progress").html("uploading files...");          var request = new xmlhttprequest();          request.upload.addeventlistener("error", onerror);         request.upload.addeventlistener("progress", onprogressupdate);         request.upload.addeventlistener("readystatechange", onreadystatechange);          request.open("post", "/url/goes/here/");         request.setrequestheader("content-type", "multipart/form-data");         request.send(data);      }); 

flask code:

@app.route('/url/goes/here/', methods=['post']) def uploadpcap():     try:         #get name of uploaded pcap         uploadedfile = request.files['uploadpcapfile[]']         #do stuff here     except exception, e:         return jsonify({'error': str(e)}) 

and every time below response.

"error": "400: bad request" 

headers:

**general** remote address: request url: request method:post status code:200 ok  **response headers** connection:keep-alive content-length:33 content-type:application/json date:wed, 03 jun 2015 02:16:57 gmt keep-alive:timeout=5, max=100 server:werkzeug/0.10.4 python/2.7.6  **request headers** view source accept:*/* accept-encoding:gzip, deflate accept-language:en-us,en;q=0.8 connection:keep-alive content-length:259711 content-type:multipart/form-data cookie:phpsessid=esgdrqomu3cmnt71jqpaidgjv4 host: origin: referer: user-agent:mozilla/5.0 (macintosh; intel mac os x 10_10_2) applewebkit/537.36 (khtml, gecko) chrome/43.0.2357.81 safari/537.36  **request payload** ------webkitformboundary7xbzfnt0orl9bape content-disposition: form-data; name="uploadpcapfile[]"; filename="something.pdf" content-type: application/pdf   ------webkitformboundary7xbzfnt0orl9bape--