send big blob file to PHP server

Javascript coding ..

Moderators: egami, macek, gesf

Post Reply
nitiphone2021
php-forum Active User
php-forum Active User
Posts: 33
Joined: Fri Jan 08, 2021 8:10 pm

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>';
Post Reply