Upload base64 image with Ajax
<p>My client is offering the user to pick a picture, crop and resize it and then display it (in a <code>&lt;img&gt;</code> DOM element).<br>
If the picture is fine, the user can upload it to the server so it can be saved.</p>

<p>I would like to do the upload thanks to an Ajax request.</p>

<p>I found tons of examples on the internet to upload <strong>the original image</strong> retrieved from the client PC. For instance:</p>

<pre><code>$( '#my-form' )
  .submit( function( e ) {
    $.ajax( {
      url: 'http://host.com/action/',
      type: 'POST',
      data: new FormData( this ),
      processData: false,
      contentType: false
    } );
    e.preventDefault();
  } );
</code></pre>

<p>This works properly if I decide to upload the picture retrieved through the form input.</p>

<p>In my case I want to <strong>upload the modified picture</strong> (saved in a <code>&lt;img&gt;</code> element) instead of the original one.<br>
This picture is stored as a base64 picture (For information: I used the croppie.js library to generate the image).</p>

<p>I don't know how to upload this picture with Ajax.</p>

<p>I tried to upload it as a regular parameter but on the server side the img is an empty string:</p>

<pre><code>var url = 'http://host.com/action/';
var data = {};
data.img = $('img#generated-image').attr('src');

$.ajax({url: url, type: "POST", data: data})
  .done(function(e){
    // Do something
  });
// RESULTS in a empty data.img on the server side.
</code></pre>

<p>My problem being the server having an empty string when retrieving the "img" parameter. I suspect the image is maybe too big to be passed to the server or some other issues that I don't understand... .</p>

<p>So I'm wondering what is the <strong>proper way to send a base64 image to the server</strong> using an Ajax request <strong>WITHOUT</strong> using a form.</p>

<p>Thanks for your help.</p>

<p><strong>EDIT</strong></p>

<p>Seems to be an xmlHTTP POST parameter size issue. I tried to reduce the number of characters of the string representation of the image and the server is now able to retrieve it.</p>

<p>EDIT2</p>

<p>post_max_size is set to 8M in the php.ini file wheras the picture size is only 24K. So the problem is not there.<br>
I'm using PHP with the Symfony2 framework.<br>
Maybe a limitation from Symfony2.</p>