javascript - How do I send an array of files using xhr2 and FormData? (Java + Spring) -

i'm using <input type="file" multiple /> upload list of files. works fine is, want ability remove individual files before upload, i'm storing filelist in separate object , routing through xhr. however, doesn't work.

the form looks this:

<form:form commandname="documentsbean" enctype="multipart/form-data">     <input type="hidden" name="submittedformaction" value="attachdocumentsave"/>     <input type="file" name="files" id="attachfiles" multiple/>     <button type="submit" id="attachbutton" onclick="return buildform(this.form);">attach</button> </form:form> 

here's function handles (working version):

function buildform(form){     var formdata = new formdata(form);     formdata.append('teststring', "foobar");      var xhr = new xmlhttprequest();     xhr.open('post', form.action, true);     xhr.send(formdata);      return false; } 

and non-working version, try stick files formdata manually:

function buildform(form){     var files = document.getelementbyid('attachfiles').files;      // var tempfiles = [];     // for(var i=0; i<files.length; i++){     //     tempfiles[i]=files[i];     // }      var formdata = new formdata();     formdata.append('submittedformaction', "attachdocumentsave");     formdata.append('files', files);  // still broken formdata.append('files', tempfiles);     formdata.append('teststring', "foobar");      var xhr = new xmlhttprequest();     xhr.open('post', form.action, true);     xhr.send(formdata);      return false; } 

the bean:

public class documentsbean {     private list<multipartfile> files = arrays.aslist();     private string teststring = "";      public list<multipartfile> getfiles(){         return files;     }     public void setfiles(list<multipartfile> files){         this.files = files;     }     public string getteststring(){         return teststring;     }     public void setteststring(string teststring){         this.teststring = teststring;     } } 

and controller:

@requestmapping( method = requestmethod.post, params = { "submittedformaction=attachdocumentsave" }) public modelandview attachdocumentsave(httpservletrequest request, @modelattribute("documentsbean") documentsbean documentsbean, bindingresult errors) throws exception {     // drilling documentsbean here working version shows:     //     //     files= linkedlist<e>  (id=78)     //         first= linkedlist$node<e>  (id=94)     //         last= linkedlist$node<e>  (id=96)     //         modcount= 3     //         size= 3     //     teststring= "foobar" (id=84)     //     // , uploads 3 files.      // drilling documentsbean here non-working version shows:     //     //     files= arrays$arraylist<e>  (id=116)     //         a= multipartfile[0]  (id=121)     //         modcount= 0     //     teststring= "foobar" (id=119)     //     // , not upload files. } 

how can make files correctly append formdata?

in order spring map items in request list, need provide same name (in formdata.append calls) each item when appending form data. allows spring see request name=value1&name=value2&name=value3 (but in form of form data). when spring sees same key ("name") multiple times, can map values collection. going example, name "files" needed because documentsbean has named way. means javascript code should change this:

function buildform(form) {     var files, formdata, i, j, xhr;      files = document.getelementbyid('attachfiles').files;     formdata = new formdata();      formdata.append('submittedformaction', "attachdocumentsave");     (i = 0, j = files.length; < j; i++) {         formdata.append('files', files[i]);     }     formdata.append('teststring', "foobar");      xhr = new xmlhttprequest();     xhr.open('post', form.action, true);     xhr.send(formdata);      return false; }