python - Django Rest Framework + Angular 2 - uploading multiple files -

i'm using django rest framework backend , angular 2 frontend. i've got page in angular, create form:

createresourcesform() {   this.resourcesform = this.formbuilder.group({     resources: this.formbuilder.array([       this.formbuilder.group({         title: ['', validators.compose([validators.required])],         file: ['', validators.compose([])],       })     ])   }) } 

as can see, form consists of formarray, every element has 2 inputs: title , file - text input , file input respectively. on submitting form i'm trying send data django error missing filename. request should include content-disposition header filename parameter.. set i'm expecting receive list of {title, file}, how set multiple file names? other idea how this?

the error in django rest framework comes parse method in fileuploadparser.

i'm not pasting python code here because it's standard listcreateapiview, nothing special it. here serializer:

class resourcecreateserializer2(serializers.serializer):     author_pk = serializers.integerfield(required=false)     author_first_name = serializers.charfield(max_length=50, required=false)     author_last_name = serializers.charfield(max_length=50, required=false)     resources = resourcewithoutauthorserializer(many=true)  class resourcewithoutauthorserializer(serializers.modelserializer):     instruments = instrumentserializer(many=true)      class meta:         model = musicresource         fields = ['title', 'file', 'instruments'] 

don't mind other fields, being sent fine (as file does). 1 more thing - i'm adding content-type header in angular before sending data.

update 1 here method uploading files (angular 2):

get value() {   let formdata = new formdata();    (let = 0; < this.resources.length; i++) {     let resource = this.resources.value[i];     let filename = resource.file;     let fileinputs = $('input[type="file"]').filter(function () {       return this.value == filename;     });      if (fileinputs.length == 0) {       return null;     }      let fileinput = <htmlinputelement>fileinputs[0];      formdata.append('resources-' + + '-title', resource.title);     formdata.append('resources-' + + '-file', fileinput.files[0], fileinput.files[0].name);      (let j = 0; j < this.instrumentsselect.value.length; j++) {       formdata.append('resources-' + + '-instruments', this.instrumentsselect.value[j]);     }   }    return formdata; } 

then

this.musicresourcesservice.addmusicresource(tosend).subscribe(   data => console.log('successfuly added resources'),   err => console.log('musicresourcesaddcomponent', 'onmusicresourceformsubmit', err) );  addmusicresource(data) {   let headers = new headers({});   headers.append('content-type', 'multipart/form-data');   headers.append('accept', 'application/json');   let options = new requestoptions({headers});    return this.api.post('resources/resources/list_create/', data, true, options); }  public post(url: any, payload: any, notoken?, options?: any): observable<any> {   const provider = notoken ? this.http : this.authhttp;   const fullurl = this.conf.getapiurl() + url;   return provider.post(fullurl, payload, options)     .delay(100)     .map(this.extractdata)     .catch(this.handleerror).share(); } 

you cannot http post method,that can use xhr request

 public upload(form_data) {   //the form_data should commes **get value()** method   let url = 'your url'   return new promise((resolve, reject) => {             xhr.open('post', url, true);     xhr.setrequestheader('authorization', 'jwt ' + localstorage.getitem('id_token'));     xhr.send(form_data);     xhr.onreadystatechange = function () {         if (xhr.readystate == xmlhttprequest.done) {             resolve(json.parse(xhr.responsetext));         }     }   });  } 

in django rest framework,override create method , files request.files method

   request.files['your_file_key']    # think need iterate files dont file keys