Javascript Blob save to variable

Question

I am using https://github.com/cwilso/AudioRecorder and everything works fine except getting the blob and sending it to the server. I have the following that sends the form data to the server. Basically, a wav file is generated on the client side, then it is stored in a blob and I want to figure out a way to get the contents of that blob.

$('#submit').click(function(){
var formData = new FormData($('#add_slide').get(0));
var jContent = $( "#main_container" );
//console.log(formData);
if($('#audio_file').val().length==0)
{
 var blob_url = $('#blob_url').val();
 if($('#blob_url').val().length==0)
 {
 alert('Recording Could not be found. Please try again');
 return false;
 }else{
 console.log(formData);
 }
 //return false;
}else{
 var ext = $('#audio_file').val().split('.').pop().toLowerCase();
 if(ext!== 'wav') {
 alert('Invalid File. Please use a file with extension WAV!');
 return false;
 }
}
$.ajax({
 url: 'lec_add_slide.php', //server script to process data
 type: 'POST',
 xhr: function() { // custom xhr
 myXhr = $.ajaxSettings.xhr();
 if(myXhr.upload){ // check if upload property exists
 myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // for handling the progress of the upload
 //console.log('OK');
 }else{
 //console.log('NOT');
 }
 return myXhr;
 },
 //Ajax events
 beforeSend: function (){
 $('#loadingModal').modal('show');
 },
 success: function (data) {
 jContent.html( data );
 $('#loadingModal').modal('hide');
 },
 error: function (){
 console.log('error');
 },
 // Form data
 data: formData,
 //Options to tell JQuery not to process data or worry about content-type
 cache: false,
 contentType: false,
 processData: false
});
});
function progressHandlingFunction(e){
 if(e.lengthComputable){
 $('#bar-progress-mp3').css('width',((e.loaded/e.total)*100)+'%');
}
}

If I send a regular file using a regular file input, everything works perfectly. I have put the blob url in a hidden input field and I also tried blob.slice() but what reaches the server is just object Blob. Does anyone know how to get the contents of the blob URL and send it to the server?

Any help appreciated.

Answer 1

You can add a blob to FormData, like formData.append('thename', theblob);

• Nic: I must be an idiot. I have been at this all day. I tried what you suggested earlier but I thought it did not work. So after seeing your comment, I run wireshark, captured the traffic and saw that the file was indeed going to the server. PHP receives it in the $_FILES and I had the wrong var name as well. Thanks