Is it possible to read object from AJAX request on server side?

Question

Actually, I'm trying to send video file in base64 but it the file is large (small files works fine) that's why ajax process not completed and I got 400 error.

So, I thought to send a file object like below so, I can read this object from the server-side. But I don't know if it is possible? OR is there any way through which I can handle large video file upload?

[object FileReader]

And here is my AJAX Code

var reader = new FileReader();
// this function is triggered once a call to readAsDataURL returns
reader.onload = async function(event){
   var fileData = new FormData();
    var fileType;
    fileType = ".avi";
    // console.log(my_script_vars.postID);
    // fileData.append("file", event.target);
    fileData.append("file", event.target.result);
    fileData.append("action", "myaction");
    fileData.append("filetype", fileType);
    fileData.append("post_id", my_script_vars.postID);
    
    jQuery.ajax({
        url: 'https://www.reelme.app/sign-up/wp-admin/admin-ajax.php',
        processData: false,
        contentType: false,
        cache: false,
        data: fileData,  
        type: 'POST',
        .......
        .......
        .......
    });
}

Please help. Thanks in advance.

You can send a javascript object to a server as a JSON object. Have you tried using JSON.stringify(object)? — Hef, Aug 22 '21 at 13:34
Yes, I tried JSON.stringify(object) but no luck. Actually, this way works if we pass javascript array JSON.stringify(array) but that why I faced same large file 400 error — Muhammad Kashif, Aug 22 '21 at 13:44
maybe [increasing maximum post size](https://stackoverflow.com/questions/6135427/increasing-the-maximum-post-size) might help. — Hef, Aug 22 '21 at 13:48
See https://stackoverflow.com/questions/16102809/how-to-upload-large-files-above-500mb-in-php and https://stackoverflow.com/questions/1700207/upload-large-files-using-php-apache — AaronJ, Aug 22 '21 at 14:42
Yes, URL is correct in AJAX call as I have mentioned in my problem is that small files uploading fine. — Muhammad Kashif, Aug 22 '21 at 14:55
I want to confirm more here that, when video is large then AJAX request can't reach to server end it breaks between and error occurred 400. — Muhammad Kashif, Aug 22 '21 at 14:58
Also, I got another idea to upload video is to use BLOB url like blob:https://www.reelme.app/ede8b30e-7d70-4e30-a05e-557b7260f796 but when I tried to read its content using file_get_contents it returns nothing. Do you guys have any idea how to get content from BLOB URL on server side? — Muhammad Kashif, Aug 22 '21 at 15:04

score 0 · Answer 1 · answered Aug 23 '21 at 21:32

You shouldn't read the file into base64 and store everything in memory. screw that FileReader you have.

you are doing the right thing by using FormData, but a FormData can also append blob & files

// Simulate a file you would normally get from a file input or drag n drop
const file = new File(['abc'], 'sample.txt', { type: 'text/plain' })

const fd = new FormData()
fd.append('file', file)

then to upload it i would suggest that you use fetch instead of jQuery that requires all those processData & other config

const url = 'https://www.reelme.app/sign-up/wp-admin/admin-ajax.php'
fetch(url, { method: 'POST', body: fd })
  .then(console.log, console.error)

JSON isn't meant to handle large binary data... b/c it's no good streaming format.

Thanks brother. I already did this like you described. I used below code. — Muhammad Kashif, Aug 23 '21 at 22:23
function dataURLtoFile(dataurl, filename) { var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while(n--){ u8arr[n] = bstr.charCodeAt(n); } return new File([u8arr], filename, {type:mime}); } — Muhammad Kashif, Aug 23 '21 at 22:23

Is it possible to read object from AJAX request on server side?

1 Answers1