0

I'm having a little trouble regarding a blob upload through xhr.send(Blob). I have a website in which a user creates a video via getUserMedia() which is placed inside my website trough a blob, they can record multiple times until they feel satisfied with the video result. I want them to give the user the ability to upload the video to a server without them downloading the file and then using a form to upload the video. So I managed to make this through xhr.send

function sendXHR(){
var xhr = new XMLHttpRequest();
var video=$("#myexportingvideo");
xhr.open('GET', video.src , true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
  if (this.status == 200) {
    // Note: .response instead of .responseText
    var blob = new Blob([this.response], {type: 'video/webm'});
    console.log(blob.size/1024);
    console.log(blob.type);

    form = new FormData(),
    request = new XMLHttpRequest();
    form.append("myblob",blob,"Capture.webm");
    request.open(
                "POST",
                "../TryExtension/upload_file.php",
                true
            );
    //request.send(blob);
    request.send(form);
  }
};
xhr.send();
}

The problem is that when blobs are approx bigger than 1.8 MB in size the data sent is 0, so basically my question is, Is there a limit in the blob size or i have to send the blob in chunks to the server? An example of the issue is the following.

Console Log

   frames captured: 32 => 1.077s video vid.js:155
   XHR finished loading: "blob:http%3A//localhost/19d162ae-c22e-48af-a83d-2ddd579ffff9". vid.js:240
   1199.46484375 vid.js:225
   video/webm vid.js:226
   XHR finished loading: "http://localhost/TryExtension/upload_file.php". vid.js:237
   frames captured: 91 => 3.052s video vid.js:155
   XHR finished loading: "blob:http%3A//localhost/c7d4f3c6-88c8-43c5-9adb-b9060c93bfb3". vid.js:240
   3402.873046875 vid.js:225
   video/webm vid.js:226
   XHR finished loading: "http://localhost/TryExtension/upload_file.php".

The first video is uploaded correctly but the next one is uploaded with 0 bytes of information. Thanks in advance for all your help.

torresomar
  • 2,219
  • 2
  • 16
  • 28
  • 1
    I don't have an answer, but I would bet that 1.8 MB is way too low to be hitting a client-side upload limit. I've pushed 5 MB+ through the File class (which extends Blob) into a FormData object without issue. I wish you luck! –  Jul 28 '13 at 14:11
  • 1
    Thanks Nate, I figured what was the problem, PHP had a limit via the file_get_content function which ruined the whole server upload. I managed to succeed using Servlets which allows me to upload files setting the MAX Size of the request :D thanks! – torresomar Aug 06 '13 at 19:56

0 Answers0