title: Upload base64 image with Ajax
body: <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>