Jump to content

send big blob file to PHP server


nitiphone2021
 Share

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old. Are you sure you have something important to add to it?

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.