django发布请求未在终端中显示javascript blob对象

Question

I've been banging my head on the wall for hours with this. I am trying to use recorder.js using the source from this example https://webaudiodemos.appspot.com/AudioRecorder/

Now I want to modify it so that the user will hear the audio played back to them and then the y will have the chance to upload it to the server if they like it. I got the audio to playback by adding the return of the method createObjectURL(blob) to an audio element. GREAT

Now I just have to write a post request and send it to my django instance to handle it in a view...which is where it gets weird.

I used jquery to post an ajax request like this...

$(document).ready(function () {
  $("#submit_audio_file").click(function () {
    var data = new FormData();
    data.append("csrfmiddlewaretoken", $("[name=csrfmiddlewaretoken]").val());
    data.append("audio_file", blob, "test");
    // Display the key/value pairs
    for(var pair of data.entries()) {
       console.log(pair[0]+ ', '+ pair[1]); 
    }
    $.ajax({
      type: "POST",
      url: $("#post_url").val(),
      data: data,
      processData: false,  // prevent jQuery from converting the data
      contentType: false,  // prevent jquery from changing something else as well 
      success: function(response) {
        alert(response);
      }
    });
  })
});

when I make this request go through I see this in the console...

csrfmiddlewaretoken, 3YBQrdOUkquRDD5dN0hTJcUXYVFiNpSe
audio_file, [object File]

and then in my django CBV I put a print request.POST.items() in the first line so I could see what was coming in. In my terminal I see this...

 [(u'csrfmiddlewaretoken', u'mymiddlewaretokenvalue')]

there is no audio_file key in the post request at all. Wy would it show in the javascript console and then disappear in the django request?

I also see a potential problem in the future because I think that the javascript console is just printing a string of [object File] which will obviously not do what I want it to.

Any ideas of where to go next?

Answer 1

As Daniel Roseman wrote, uploaded files end up in request.FILES . One more thing - from jQuery documentation:

As of jQuery 1.6 you can pass false to tell jQuery to not set any content type header.

and Django documentation states:

Note that request.FILES will only contain data if the request method was POST and the form that posted the request has the attribute enctype="multipart/form-data". Otherwise, request.FILES will be empty.