send big blob file to PHP server

nitiphone2021

New member
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>';
 
Back
Top