Pass Blob through ajax to generate a file

Question

I'm trying to capture audiorecorder (https://github.com/cwilso/AudioRecorder) and send the blob through Ajax a php file, which will receive the blob content and create the file(the wave file in this case).

Ajax call:

audioRecorder.exportWAV(function(blob) {       var url = (window.URL || window.webkitURL).createObjectURL(blob);       console.log(url);       var filename = <?php echo $filename;?>;       $.ajaxFileUpload({         url :  "lib/vocal_render.php",         secureuri      :false,         dataType : blob.type,         data: blob,         success: function(data, status) {           if(data.status != 'error')             alert("boa!");         }       });     });  

and my php file (vocal_render.php):

<?php   if(!empty($_POST)){     $data = implode($_POST); //transforms the char array with the blob url to a string     $fname = "11" . ".wav";      $file = fopen("../ext/wav/testes/" .$fname, 'w');     fwrite($file, $data);     fclose($file); }?> 

P.S:I'm newbie with blobs and ajax. Thanks in advance.

Answer 1

Try uploading the file as form data

audioRecorder.exportWAV(function(blob) {        var url = (window.URL || window.webkitURL).createObjectURL(blob);       console.log(url);        var filename = <?php echo $filename;?>;       var data = new FormData();       data.append('file', blob);        $.ajax({         url :  "lib/vocal_render.php",         type: 'POST',         data: data,         contentType: false,         processData: false,         success: function(data) {           alert("boa!");         },             error: function() {           alert("not so boa!");         }       }); });  

.

<?php   if(isset($_FILES['file']) and !$_FILES['file']['error']){     $fname = "11" . ".wav";      move_uploaded_file($_FILES['file']['tmp_name'], "../ext/wav/testes/" . $fname); } ?> 

Answer 2

According to the documentation, by using XMLHttpRequest.send() you can use the Blob object directly.

var blob = new Blob(chunks, { 'type' : 'audio/webm' }); var xhr = new XMLHttpRequest(); xhr.open('POST', '/speech', true); xhr.onload = function(e) {   console.log('Sent'); }; xhr.send(blob); 

I've tried this and it works like a charm.