send big blob file to PHP server

[nitiphone2021]

Dear friends.
As I create a website and javascript to record voice and send it to server side(PHP). it's work on small file size but if it's large the sending will be fail.

Could you please kindly help me check my code? why I can't see the file on the server?

Existing code
Javscript
var fd = new FormData();
fd.append('to_user_id', to_user_id);
fd.append('audio_data', blob, filename);
$.ajax({
url: "../func/upload.php",
method: "POST",
processData: false,
contentType: false,
data: fd,
enctype: 'multipart/form-data',
success: function(data) {},
error: function(err) {}
});
PHP

/* Check If the guest send file to admin */ if (isset($_FILES)) { //this will print out the received name, temp name, type, size, etc. $input = $_FILES['audio_data']['tmp_name']; //get the temporary name that PHP gave to the uploaded file $output = $originalsFolder . $FileName; //letting the client control the filename is a rather bad idea //move the file from temp name to local folder using $output name $result = move_uploaded_file($input, $output); $txt_msg = '<audio controls controlsList="nodownload"> <source src="' . $originalsFolderDB . $FileName . '" type="audio/wav"> Audio. </audio>'; }

MY NEW CODE FOR SLICE BLOB FILE
Javascript

var chunks = chunksAmount(blob.size); var blobChunksArray = sliceFile(blob,chunks,blob.type); var slice_chunk = blobChunksArray.shift(); var fd = new FormData(); fd.append('to_user_id', to_user_id); fd.append('chunksupload',true); fd.append('filename', filename); fd.append('data', slice_chunk); if(chunksArray.length){ fd.append('chunksend',false); }else{ fd.append('chunksend',true); } $.ajax({ url: "../func/upload.php", method: "POST", processData: false, contentType: false, data: fd, enctype: 'multipart/form-data', success: function(data) {}, error: function(err) {} }).done(function(data) { if(chunksArray.length){ sendChunkFile2(chunksArray,filename) }else{ console.log(JSON.stringify(data)); } }); function slice(file, start, end) { var slice = file.mozSlice ? file.mozSlice : file.webkitSlice ? file.webkitSlice : file.slice; return slice.bind(file)(start, end); } function sliceFile(file, chunksAmount, mimetype) { var byteIndex = 0; var chunks = []; for (var i = 0; i < chunksAmount; i += 1) { var byteEnd = Math.ceil((file.size / chunksAmount) * (i + 1)); chunks.push( new Blob([slice(file, byteIndex, byteEnd)], { type: mimetype })); byteIndex += (byteEnd - byteIndex); } return chunks; } function chunksAmount(size){ const BYTES_PER_CHUNK = ((1024 * 1024)*5); //5MB chunk sizes. return Math.ceil(size / BYTES_PER_CHUNK); }

FOR PHP

if (isset($_POST['chunksupload'])) { file_put_contents($_POST['filename'], file_get_contents($_FILES['data']['tmp_name']), FILE_APPEND | LOCK_EX); if($_POST['chunksend']){ echo json_encode(["url"=>$originalsFolderDB . $_POST['filename'],"size"=>filesize($_POST['filename']) . " bytes"]); } //this will print out the received name, temp name, type, size, etc. // $input = $_FILES['audio_data']['tmp_name']; //get the temporary name that PHP gave to the uploaded file // $output = $originalsFolder . $FileName; //letting the client control the filename is a rather bad idea //move the file from temp name to local folder using $output name // $result = move_uploaded_file($input, $output); $txt_msg = '<audio controls controlsList="nodownload"> <source src="' . $originalsFolderDB . $FileName . '" type="audio/wav"> Audio. </audio>';

[gizmola]

Please use the <> button in the future, and paste your code into the code window, and set the language appropriately.

If your code works, as you stated, then most likely the problem is the configuration of the server.  There are a number of php settings that control the size of the data that you can submit.

For example, in the php.ini you could set a max filesize to (about) 20mb.  

post_max_size=20M
upload_max_filesize=20M

Any changes will require you to restart the webserver, or possibly php-fpm.  The details are specific to your web server installation.