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.
CodePudding user response:
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);