Upload a file on choosing file through ajax and jq

Question

i have a mail feature in wordpress admin plugin and i want the ability to attach a file dynamically and send it through mail as an attachment. i using ajax method but i did not know how to send input file through ajax This is html code

<div class="kids-top-right-view">
  <ul class="kids-list kids-list-inline kids-nav-item">
        <li>
          <a>
              <i class="fa fa-envelope-o"></i> Email</a>
      </li>

    </ul>
    <div class="note_container">
      <form method="post" id="mail_parent_form" enctype="multipart/form-data">
        <input type="hidden" name="action" value="attach_file_parent">
        <p class="email-from">
            <label>From</label>
            <span class="sep">:</span>
            <span class="value">Casting Kids([e-mail])</span>
        </p>
        <p class="email-to">
            <label>To</label>
            <span class="sep">:</span>
            <span class="value"><?=$child[0]->fname.' '.$child[0]->lname?></span>
            <input type="hidden" class="email_address" value="<?=$child[0]->email?>">
        </p>
        <p class="email-subject">
            <label>Subject</label>
            <span class="sep">:</span>
            <span class="value">
                <input type="text" name="email_subject" placeholder="Subject...">
            </span>
        </p>
        <div id="parent_mail">
          <trix-editor placeholder="Type your email body ....."></trix-editor>

          <div class="client-action">
      <input type="submit" class="button button-primary" id="email_P" name="email_parent" value="Send Mail" >
      <input type="file" name="file[]" id="email_file" multiple>
      <label for="email_file">Attach File</label>
      <input type="reset" class="button button-default" value="Discard">
      <p style="display: none;" class="error_message"></p>
      <p style="display: none;" class="success_message"></p>
  </div>
        </div>
    </form>
  </div>
</div>

Jquery Code

$("#email_file").on('change',function(){
  var input = document.getElementById('email_file');
  var files = input.files;
  data = {'action':'attach_file_parent','files':files};
  jQuery.post(ajaxurl, data, function(response) {

  })
})

But it gives me this error: Illegal Invocation beacause i dont know where to add this line processData: false to tackle this error and i have to use this method for ajax. i cant be able to use this

$.ajax({
    url  : ajaxurl,
    type : 'POST',
    data : formData,
    contentType: false,
    processData: false
}) 

as it gives me ajax not found error Please suggest me with this, thank you

Answer 1

Please check the code below to upload form image through Ajax

JS CODE

var form  = new FormData();
var image = jQuery('#img_avatar')[0].files[0]; //We have only one file and this is how we get it.

        //Now we add all the data to the form instance in a key value pair. 
        //Notice that we called it image here. if you change it then change it in the
        //media_handle_upload('image', 0); function as well. 
        form.append('image', image);
        form.append('current_user_id', current_user_id);
        form.append('action', 'cvf_upload_files');  
        //Using localize script to pass "site_url" and "nonce"
        jQuery.ajax({
            url: ajax_url,
            type: 'POST',
            data: form,
            contentType: false,
            processData: false
        }).done(function(data){
            // console.log("data is: ", data);
        }).fail(function(data){
            // console.log("errors are: ", error);
        });

You need to add File type filed with ID img_avatar

WordPress Code (PHP)

add_action('wp_ajax_cvf_upload_files', 'cvf_upload_files');
add_action('wp_ajax_nopriv_cvf_upload_files', 'cvf_upload_files'); // Allow front-end submission

function cvf_upload_files(){

$parent_post_id = isset( $_POST['post_id'] ) ? $_POST['post_id'] : 0;  // The parent ID of our attachments
$valid_formats = array("jpg", "png", "gif", "bmp", "jpeg"); // Supported file types
$max_file_size = 1024 * 500; // in kb
$max_image_upload = 10; // Define how many images can be uploaded to the current post
$wp_upload_dir = wp_upload_dir();
$path = $wp_upload_dir['path'] . '/';
$count = 0;
$photoattach_id = '';

$attachments = get_posts( array(
    'post_type'         => 'attachment',
    'posts_per_page'    => -1,
    'post_parent'       => $parent_post_id,
    'exclude'           => get_post_thumbnail_id() // Exclude post thumbnail to the attachment count
) );

// Image upload handler
if( $_SERVER['REQUEST_METHOD'] == "POST" ){

    // Check if user is trying to upload more than the allowed number of images for the current post

        $upload_img = $_FILES['image'];

        if($upload_img['size']!=0){
            $photoattach_id = '';
            $uploadedfile = $upload_img;
            $upload_overrides = array( 'test_form' => FALSE );
            $movefile = wp_handle_upload( $uploadedfile, $upload_overrides );
            if ( $movefile ) {
            } else {
            //echo "Possible file upload attack!\n";
            } 
            if ( $movefile) {

                $wp_filetype = $movefile['type'];
                $filename = $movefile['file'];
                $wp_upload_dir = wp_upload_dir();
                $attachment = array(
                    'guid' => $wp_upload_dir['url'] . '/' . basename( $filename ),
                    'post_mime_type' => $wp_filetype,
                    'post_title' => preg_replace('/\.[^.]+$/', '', basename($filename)),
                    'post_content' => '',
                    'post_status' => 'inherit'
                );
                if($uploadedfile['error']== 0){
                    $photoattach_id = wp_insert_attachment( $attachment, $filename);
                    require_once(ABSPATH . 'wp-admin/includes/image.php');
                    $attach_data = wp_generate_attachment_metadata( $photoattach_id, $filename );
                    $res1= wp_update_attachment_metadata( $photoattach_id, $attach_data );
                }
            }

        }

        if(!empty($photoattach_id)){
             $current_user_id = $_POST['current_user_id'];

            if(get_user_meta($current_user_id, 'user_avatar', FALSE)) { 
                update_user_meta($current_user_id, 'user_avatar', $photoattach_id);
            } else { // If the custom field doesn't have a value
                add_user_meta($current_user_id, 'user_avatar', $photoattach_id);
            }

        }
}

exit();
}