400 Bad Request and illegal invocation in wp_ajax based on processData set to false or true


As Salamu Alaikum,
I am working wp_ajax and try to upload a file through ajax. When I processData: true it returns error illegal invocation on file upload. But when I set processData: false it returns error 400 bad request. But, I have double-checked that everything is fine in PHP. But if I do not upload file all data get saved successfully.

Here is my form…

 <form action="" method="POST" enctype="multipart/form-data">
            <div class="form-group">
            <input id="f-title" name="f-title" placeholder="Flyer Title" class="form-control" required="" type="text">
            <div class="form-group">
            <input id="f-validity" name="f-validity" placeholder="Valid Till" class="form-control" required="" type="date">
            <div class="form-group">
            <input id="f-ID" name="f-ID" placeholder="Flyer ID" class="form-control" required="" type="text">
            <div class="form-group">
            <input id="f-thumbnail" name="f-thumbnail" class="form-control" required="" type="file">
            <div class="form-group">
            <input id="f-company" name="f-company" class="form-control" placeholder="Company ID" required="" type="text">
            <div class="form-group">
            <div class="row">
            <div class="col-md-6">
            <select id="f-category" name="f-category" class="form-control" required="">
                $limit = 50;
                $terms = apply_filters( 
                        'taxonomy' => 'flyer-cat',
                foreach ($terms as $term) {
                  $term_link = get_term_link( $term );

            <?php foreach($terms as $term) { ?>
                <?php $term_link = get_term_link( $term ); $limit++; ?>
                <option><?php _e($term->name); ?></option>
            <?php } ?>
            <div class="col-md-6">
            <button class="form-control" name="f-submit" id="f-submit" type="button">Save Flyer</button>

Here is my javascript

jQuery(document).ready(function(e) {
    jQuery('#f-submit').on('click', function(e) {
      var f_title = jQuery('#f-title').val();
      var f_validity = jQuery('#f-validity').val();
      var f_ID = jQuery('#f-ID').val();
      var f_company = jQuery('#f-company').val();
      var f_category = jQuery('#f-category').val();
      var f_thumbnail = jQuery('#f-thumbnail').prop('files')[0];
      //SaveFlyer(f_title, f_validity, f_ID, f_company, f_category, f_thumbnail);

    function SaveFlyer(f_title, f_validity, f_ID, f_company, f_category, f_thumbnail) {
            type: "POST",
            url: '<?php echo admin_url( 'admin-ajax.php' ); ?>',
            cache: false,
            contentType: 'json',
            dataType: false,
            data: { 'action':'save_flyer', 'f_title':f_title, 'f_validity':f_validity, 'f_ID':f_ID, 'f_company':f_company, 'f_category':f_category, 'f_thumbnail':f_thumbnail }, 
            beforeSend: onLoading,
            success: onSuccesPing,

    function onLoading() {
    function onSuccesPing(data, status) {

And in my functions.php, I have…

function save_flyer()
    $f_title        = $_POST['f_title'];
    $f_validity   = $_POST['f_validity'];
    $f_ID         = $_POST['f_ID'];
    $f_company    = $_POST['f_company'];
    $f_category   = $_POST['f_category'];
    $f_thumbnail  = $_POST['f_thumbnail'];

    $new_post = array(
        'post_title'    => $f_title,
        'tags_input'    => $f_category,
        'post_status'   => 'publish',       
        'post_type'     => 'soldy-flyer'

    $post_id = wp_insert_post($new_post);

    add_post_meta($post_id, 'sf_flyer-id', $f_ID);
    add_post_meta($post_id, 'sf_flyer-company', $f_company);
    add_post_meta($post_id, 'sf_flyer-valid', $f_validity);

    require_once(ABSPATH . "wp-admin" . '/includes/image.php');
    require_once(ABSPATH . "wp-admin" . '/includes/file.php');
    require_once(ABSPATH . "wp-admin" . '/includes/media.php');

    $attahment_id = media_handle_upload( 'f_thumbnail', $post_id );

    set_post_thumbnail($post_id, $attahment_id);
add_action('wp_ajax_save_flyer', 'save_flyer');
add_action('wp_ajax_nopriv_save_flyer', 'save_flyer');
, , , Allen Titan 2 years 2020-01-02T08:38:36-05:00 0 Answers 115 views 0

Leave an answer