CODEWITHSUNDEEP
javascriptfile-uploadblob
Nic
Nic

Reputation: 703

Javascript Blob save to variable

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.

Upvotes: 2

Views: 3554

Answers (1)

Musa
Musa

Reputation: 97672

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

Upvotes: 3

Related Questions