0

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?

1
  • 2
    Can you see it in Django in request.FILES? Commented Aug 15, 2016 at 12:58

1 Answer 1

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.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.