title: Crop the image and upload using ajax php and simpleCropper.js
body: <p>Using simpleCropper.js to crop the image and using ajax upload the image in PHP
  in simpleCropper the image file is converted to base64. But try to upload the large image file, it shows errors like
  <strong>Image corrupt or truncated. URI in this note truncated due to length.</strong></p>
  <p>In ajax response it shows error like <strong>Request Entity Too Large</strong></p>
  <p>The small cropped image is not uploaded properly and it is stored in a 10-byte size.</p>
  <p>in the ajax upload file it returns the null value.</p>
  <pre><code>if (file.type.match(imageType)) {
                  var reader = new FileReader();
                  image_filename = file.name;                    
                  reader.onload = function (e) {
                  var base64data = reader.result;
                      $.ajax({
                          url: &quot;upload.php&quot;,
                          method: &quot;POST&quot;,
                          data: {imagefile: base64data},
                          dataType:&quot;text&quot;,
                          success: function(data){
                              console.log(data);                          
                          }
                      });
                   
  Upload.php 
  
  if(isset($_POST[&quot;imagefile&quot;]))
  {
      $data = $_POST[&quot;imagefile&quot;];
      
      $image_array_1 = explode(&quot;;&quot;, $data);
  
      $image_array_2 = explode(&quot;,&quot;, $image_array_1[1]);
  
      $data = base64_decode($image_array_2[1]); 
      
      $filename = time() . '.png';
      if(stripos($data, 'image/png') !== false) {
          $filename = time() . '.png';
      } elseif(stripos($data, 'image/jpg') !== false || stripos($data, 'image/jpeg') !== false) {
          $filename = time() . '.jpg';
      }
      
      $imageName = 'assets/uploads/' . $filename;
  
      file_put_contents($imageName, $data);
  
      echo $filename;
  
  }
  </code></pre>