How To Send Blob Appended In Formdata To Php

Issue : While uploading large image files i recognized that while uploading on my AWS server having 1gb memory uses it's full capacity, it goes upto 932 mb usage which causes crash

Solution 1:

Add the following three properties on your jQuery Ajax call , they are required for blobs :

cache:false,
contentType:false,
processData:false

Then do not use formData in the data property of your Ajax Call , you simply need to add your created blob. Also add a small rendering callback (apart from the console.log you already use) to print the Image. Your AJAX call gets like this :

    $.ajax({
        type: 'POST',
        url: 'check.php',
        data: blob,
        cache: false,
        contentType: false,
        processData: false
    }).done(function(data) {
        document.write("<img src='"+data+"'></img>");
    })

Change your PHP code to the following :

<?php$res = file_get_contents("php://input");
  echo"data:image/jpg;base64,".base64_encode($res);
?>

As far as the "php://input" use is concerned. It returns all the raw data that come after the headers of your request and it does not care what type they are which is pretty handy in most cases. Whereas $_POST will only wrap the data that have been passed with the following Content-Types :

• application/x-www-form-urlencoded
• multipart/form-data

If you really want to use FormData then you can change the request to the following :

$.ajax({
    type: 'POST',
    url: 'check.php',
    data: formData,
    cache: false,
    contentType: false,
    processData: false
}).done(function(data) {
    console.log(data);
})

And you should also change your PHP file to get the $_FILE. Sending data this way , the Content-Type of the Request will be "multipart/form-data" which will have blobs , images and generally files on the $_FILES and the rest on the $_POST so the "php://input" will not be helpful.

<?php
  var_dump($_FILES);
?>

Also keep in mind that when uploading blobs this way , they will get a random name , if you are not going to be generating filenames on the Server-Side (which you probably should in most cases) and want a specific name designated by the uploader , then you can pass it along with the FormData like :

formData.append('blobImage',blob, "MyBloBName");

Solution 2:

If you set contentType: false in your jQuery Ajax call , you can still use the same code with formData and then access the file on the server through $_FILES['blobImage']

Solution 3:

The problem is that $_REQUEST, and therefore $_GET and $_POST objects have a limitation to the number of characters available to them.

post_max_size

in PHP.ini controls the maximum size of post.

Browsers and their implementations of $_GET control the limit of a $_GET request. As it appears in their URL bar. For example IE9's limit is 2000 characters so if your blob ends up as anything more than 2000 characters in the $_GET Request. The general consensus is that $_GET requests should be much less than 255 bytes. And if you approach this limit be careful because older browsers and protocols are completely unprepared for this.