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.

Musa · Accepted Answer · 2013-03-28 22:30:48Z

3

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

answered Mar 28, 2013 at 22:30

Musa

97.9k17 gold badges123 silver badges144 bronze badges

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

1 Comment

Nic Over a year ago

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

Collectives™ on Stack Overflow

Javascript Blob save to variable

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related