plugin development – Why my admin-ajax url returns 0 even after adding echo and die() at the end of function?

Question

I have read about more than 10 answers that recommends using action in data and adding echo and die at the end of function. But still I am getting error of bad request. If I directly open the URL “http://localhost/wpdemo/wp-admin/admin-ajax.php” in browser it returns 0.

Here is my ajax code:

jQuery(document).ready(function($) {
    $('#submit').on('click', function(e){
        e.preventDefault();
        let title = $('#title').val();
        let content = $('#content').val();
        var formData = new FormData();
        var formData = {
            image: document.getElementById('image-input').files[0],
            var1: title,
            var2: content
        };

        $.ajax({
            url: "/wpdemo/wp-admin/admin-ajax.php",
            type: 'POST',
            data: { action : 'my_ajax_handler', chosen : formData },
            processData: false,
            contentType: false,
            success: function(response) {
                console.log(response);
            }
          });
    })
});

I have added a php file to handle ajax request. Here is my PHP code.

<?php

function my_ajax_handler() {
    if (isset($_FILES['image'])){

        $post_title = $_POST['var1'];
        $image = $_FILES['image'];
        $post_content = $_POST['var2'];
    
        $new_post = array(
        'post_title' => $post_title,
        'post_content' => $post_content,
        'post_status' => 'publish',
        'post_name' => 'pending',
        );
    
        $pid = wp_insert_post($new_post);
        add_post_meta($pid, 'meta_key', true);
    
        if (!function_exists('wp_generate_attachment_metadata'))
        {
        require_once(ABSPATH . "wp-admin" . '/includes/image.php');
        require_once(ABSPATH . "wp-admin" . '/includes/file.php');
        require_once(ABSPATH . "wp-admin" . '/includes/media.php');
        }
        if ($_FILES)
        {
        foreach ($_FILES as $file => $array)
        {
            if ($_FILES[$file]['error'] !== UPLOAD_ERR_OK)
            {
            return "upload error : " . $_FILES[$file]['error'];
            }
            $attach_id = media_handle_upload( $file, $pid );
        }
        }
        if ($attach_id > 0)
        {
        //and if you want to set that image as Post then use:
        update_post_meta($pid, '_thumbnail_id', $attach_id);
        }
    }
    echo json_encode('success');
    die();
  }
  add_action("wp_ajax_my_ajax_handler", "my_ajax_handler");
  add_action("wp_ajax_nopriv_my_ajax_handler", "my_ajax_handler");
?>

My form comes from a short code I am creating in my main plugin file.
My plugin file code is here.

<?php
/*
Plugin Name:  Notification Plugin Beta Version
Plugin URI:   https://www.amirsandila.com/ 
Description:  My first ever plugin n history of technology. You will love this plugin. 
Version:      1.0
Author:       Amir Sandila  
Author URI:   https://www.amirsandila.com
License:      GPL2
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  amirsandila
Domain Path:  /languages
*/

define("version", strtotime(date("Ymd")));

function my_theme_enqueue_scripts() {
  wp_enqueue_script( 'custom-jquery', 'https://code.jquery.com/jquery-3.5.1.min.js', array(), version, true );
  wp_enqueue_script('ajax-script', '/wp-content/plugins/wp-plugin-demo/js/script.js',array(), version, true );
  wp_localize_script( 'ajax-script','ajaxurl', admin_url( 'admin-ajax.php' ) ) ;
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );



function form_shortcode_func() {
    $output="<style>
                .form-container {
                    width: 70%;
                    margin: 0 auto;
                    border: 1px solid #ccc;
                    padding: 20px;
                }
                .form-container input[type="text"], .form-container textarea {
                    width: 100%;
                    border: 1px solid #ccc;
                    padding: 10px;
                    margin-bottom: 10px;
                }
                .form-container input[type="submit"] {
                    background-color: #333;
                    color: #fff;
                    border: 0;
                    padding: 10px 20px;
                    cursor: pointer;
                }
                </style>
                <h2> Sumit Your Article! </h2>
                <div class="form-container">
                <form method="POST" enctype="multipart/form-data">
                    <input type="text" id="title" name="title" placeholder="Post Title">
                    <textarea name="message" id="content" rows="20" cols="30" placeholder="Post Body"></textarea>
                    <input type="file" id="image-input" name="image">
                    <button id="submit"> submit </button>
                </form>
                </div>";
    return $output;
}

add_shortcode('form', 'form_shortcode_func');

0
Amir Sandila 1 month 2022-12-27T01:58:13-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse