Store Audio from Blob url to server in Laravel

Question

I've a portal in which I'm recording user audio and I am getting a blob URL and now I want to store this blob url as a file in my database. Can anyone help me with this. This is my js code

 $('#upload-read-aloud').on('submit',function(e){
        e.preventDefault();
        $.ajax({
            type : 'GET',
            cache : false,
            data : {audioUrl:audioUrl},
            url : '../upload-read-aloud-test',
            success:function(response){
                alert(response)
            }
        })  
     })

And this is my controller code

 $url = $req->audioUrl;
    $upload_dir = public_path()."/assets/";
    $audio= $url;
    $audio= str_replace('data:audio/wav;base64,', '', $audio);
    $audio = str_replace(' ', '+', $audio);
    $data = base64_decode($audio);
    $file = $upload_dir . time() . ".wav";
    $success = file_put_contents($file, $data);
    echo $success ? $file : 'Unable to save the file.';

audioUrl is the Blob url which I'm passing in my route. The file is saving into the database but the file is empty.

Answer 1

As I see you use jQuery.
So, first of all DO NOT use GET request to upload data to server, use POST request instead. And send your blob as a file. Look at - https://stackoverflow.com/a/34340245/2585154

var s = 'some string data';
var filename = 'foobar.txt';

var formData = new FormData();
formData.append('file', new File([new Blob([s])], filename));
formData.append('another-form-field', 'some value');

$.ajax({
    url: '/upload',
    data: formData,
    processData: false,
    contentType: false,
    type: 'POST',
    success: function () {
        console.log('ok');
    },
    error: function () {
        console.log('err'); // replace with proper error handling
    } 
});

Replace /upload with path to your API method, e.g.: ../upload-read-aloud-test, replace var s = 'some string data'; with your blob data and replace var filename = 'foobar.txt'; with any meaningful filename.

Or if you want to upload file from input, look at - jQuery AJAX file upload PHP

$('#upload').on('click', function() {
    var file_data = $('#sortpicture').prop('files')[0];   
    var form_data = new FormData();                  
    form_data.append('file', file_data);
    alert(form_data);                             
    $.ajax({
        url: 'upload.php', // <-- point to server-side PHP script 
        dataType: 'text',  // <-- what to expect back from the PHP script, if anything
        cache: false,
        contentType: false,
        processData: false,
        data: form_data,                         
        type: 'post',
        success: function(php_script_response){
            alert(php_script_response); // <-- display response from the PHP script, if any
        }
     });
});

Replace upload.php with path to your API method, e.g.: ../upload-read-aloud-test, replace #sortpicture with your input id.

And then access your uploaded file in Laravel:

$file = $req->file('file');
dump($file);