title: Ajax send & Save Base64 encoded image to server
body: <p>I am passing a base64 url through jquery ajax and want to save onto the server. But the code below is giving me a empty file. I have tried writing the decoded string and createimage from string but with both variables, 0 bites have been written. When i test the value being worked on it outputs [object FileReader]......i think either i am missing a step or making a mistake some where.</p>
  
  <p>Also is there a way to convert the image to a $_FILE type object? reason being id like to using a wordpress function to save the file if possible. </p>
  
  <p>Php code:</p>
  
  <pre><code>function uploadimg() {
  
  $error = false;
  //if ( ! function_exists( 'wp_handle_upload' ) ) require_once( ABSPATH . 'wp-admin/includes/file.php' );
  //$upload_overrides = array( 'test_form' =&gt; false );
  $images=array();
  
  $a=0;
  unset ($_POST['action']);
  
  foreach($_POST as $basefile){
  
  
      $upload_dir       = wp_upload_dir();
      $upload_path      = str_replace( '/', DIRECTORY_SEPARATOR, $upload_dir['path'] ) . DIRECTORY_SEPARATOR;
      $base64_string = $basefile; 
      echo $basefile;
      $base64_string = preg_replace( '/data:image\/.*;base64,/', '', $base64_string ); 
      $decoded_string= base64_decode($base64_string); // 0 bytes written in fwrite
      $source = imagecreatefromstring($decoded_string); // 0 bytes written in fwrite
      $output_file = $upload_path.'myfilef'.$a.'.jpg'; 
      $images[]=$output_file;
      $a++;       
      $image = fopen( $output_file, 'wb' ); 
  
      $bytes=fwrite( $image, $source); 
      echo $bytes;
      fclose( $image ); 
  }
   echo json_encode($images);
   exit;
  
   }
  
  add_action('wp_ajax_uploadimg', 'uploadimg');
  add_action('wp_ajax_nopriv_uploadimg', 'uploadimg');
  </code></pre>
  
  <p>jQuery sample code</p>
  
  <pre><code>jQuery(document).on('change', '.imageup', function(event){
      errors= [];
      errnum=0;
      numberofimages=jQuery("#selectedimages &gt; div").length; //get number of images
  
      if(numberofimages&lt;10){
  
          var id= jQuery(this).attr('id');
          var length= this.files.length;
  
          if(length&gt;1) {// if a multiple file upload
  
          var images = new FormData();
          images.append('action', 'uploadimg'); //wordpress specific
  
              jQuery.each(event.target.files, function(key, value ){
  
  
                  var size= value.size;
  
                  var extension= value.name.substring(value.name.lastIndexOf('.') + 1).toLowerCase();
                  var allowedExtensions = ['png', 'jpg', 'jpeg', 'gif'];
                  if( allowedExtensions.indexOf(extension) !== -1 ) {
  
                  if(numberofimages&lt;10){
  
                  var file=value;
                  console.log(file);
                  var fileReader = new FileReader();
  
  
                      fileReader.onload = function (e) {
                          var img = new Image();
  
  
                          img.onload = function () {
                              var MAX_WIDTH = 100;
                              var MAX_HEIGHT = 100;
                              var width = img.width;
                              var height = img.height;
  
                              if (width &gt; height) {
                              if (width &gt; MAX_WIDTH) {
                              height *= MAX_WIDTH / width;
                              width = MAX_WIDTH;
                              }
                          } else {
                      if (height &gt; MAX_HEIGHT) {
                          width *= MAX_HEIGHT / height;
                      height = MAX_HEIGHT;
                      }
          }
  
          var canvas = document.createElement("canvas");
          canvas.width = width;
          canvas.height = height;
          canvas.getContext("2d").drawImage(this, 0, 0, width, height);
  
          this.src = canvas.toDataURL('image/png');
  
      } // end on load function
  
      img.src = e.target.result;
  
  } //end filereader function
  
  fileReader.readAsDataURL(file);
  console.log(fileReader);
  
                      images.append(key, fileReader);
                          numberofimages++;
  
  
                  } else {
                          errnum++;
                          errors[errnum]= value=' is a illegal file type';
                      }
                  }           
  
  
              });
  
          //image holder finished, remove
          jQuery('#'+id).remove();
  
  
          jQuery.ajax({
              url: '/wp-admin/admin-ajax.php',
              type: 'POST',
              data: images, 
              cache: false,
              processData: false, 
              contentType: false, 
                  success: function(data) {
                      console.log(data);
              }//end of success function
          });
  </code></pre>