Trying to use admin-ajax.php to upload image from front-end form. I'm keep getting 0 with below code I have and not sure how to debug this or where it goes wrong.

I have HTML input file

<input type="file" name="wh_image_upload" id="wh_image_upload" multiple="false" />

and localized script for AJAX request

$img_nonce = wp_create_nonce('image_upload_nonce');
wp_localize_script( 'ajax-script', 'ajax_image', array( 'ajax_url' => admin_url( 'admin-ajax.php' )) );

and PHP function

function write_here_featured_image_upload() {
    var_dump($_FILES);
    die();
}

add_action( 'wp_ajax_write_here_img_upload', 'write_here_featured_image_upload' );
add_action( 'wp_ajax_nopriv_write_here_img_upload', 'write_here_featured_image_upload' );

JS

// Featured image upload AJAX
    $("#wh_image_upload").change(function(){
        var userFile    =   new FormData();  
        var fileInput   =   $( "#wh_image_upload" )[0].files[0];
        //console.log(fileInput);

        userFile.append("file", fileInput);
        userFile.append("action", "write_here_img_upload");

        $.ajax({
            type: "POST",
            url: ajax_object.ajax_url,
            data: userFile,
            processData: false,
            contentType: false,
            error: function(jqXHR, textStatus, errorMessage) {
                console.log(errorMessage);
            },
            success: function(data) {
                console.log("Image Uploaded! " + data);
            }
        });
    });

I get a AJAX success message with response 0. Image Uploaded! 0

Update I updated my working code.

Trying to use admin-ajax.php to upload image from front-end form. I'm keep getting 0 with below code I have and not sure how to debug this or where it goes wrong.

I have HTML input file

<input type="file" name="wh_image_upload" id="wh_image_upload" multiple="false" />

and localized script for AJAX request

$img_nonce = wp_create_nonce('image_upload_nonce');
wp_localize_script( 'ajax-script', 'ajax_image', array( 'ajax_url' => admin_url( 'admin-ajax.php' )) );

and PHP function

function write_here_featured_image_upload() {
    var_dump($_FILES);
    die();
}

add_action( 'wp_ajax_write_here_img_upload', 'write_here_featured_image_upload' );
add_action( 'wp_ajax_nopriv_write_here_img_upload', 'write_here_featured_image_upload' );

JS

// Featured image upload AJAX
    $("#wh_image_upload").change(function(){
        var userFile    =   new FormData();  
        var fileInput   =   $( "#wh_image_upload" )[0].files[0];
        //console.log(fileInput);

        userFile.append("file", fileInput);
        userFile.append("action", "write_here_img_upload");

        $.ajax({
            type: "POST",
            url: ajax_object.ajax_url,
            data: userFile,
            processData: false,
            contentType: false,
            error: function(jqXHR, textStatus, errorMessage) {
                console.log(errorMessage);
            },
            success: function(data) {
                console.log("Image Uploaded! " + data);
            }
        });
    });

I get a AJAX success message with response 0. Image Uploaded! 0

Update I updated my working code.

• ajax
• uploads
• post-thumbnails

• If you only want to run ajax on the admin side of things remove the nopriv hook - The Codex says: This hook is functionally the same as wp_ajax_(action), however it is used to handle AJAX requests on the front-end – Howdy_McGee ♦ Commented Nov 24, 2015 at 19:12
• 1 Updated working code on question. – Ohsik Commented Nov 24, 2015 at 22:14

2 Answers 2

Enable Debugging

WordPress has constants defined in wp-config.php where you can print errors to the screen and log them in a separate file located /wp-content/debug.log. It looks like this:

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_DISPLAY', true );
define( 'WP_DEBUG_LOG', true );

You can then print your own information to the debug log at specific point and find out exactly where ( or if the function is even getting hit at all ) the function is erroring out:

function write_here_featured_image_upload() {
    error_log( 'Made it into the Ajax function safe and sound!' );
    /** ... Rest of your code ... **/
}

Check Dev Tools Console

Almost all browsers in this modern day have Developer Tools and a Console where Javascrpit errors are output to. If you see an error in your Dev Tools console you'll need to fix that first and foremost.

As for a possible solution, you have this conditional which is preventing you from running ajax on the front-end of the website:

if ( is_admin() ) {
    add_action( 'wp_ajax_write_here_img_upload', 'write_here_featured_image_upload' );
    add_action( 'wp_ajax_nopriv_write_here_img_upload', 'write_here_featured_image_upload' );
}

The function is_admin() tells WordPress to only run those actions whenever in the Admin Panel / Dashboard so you would never see anything happen on the front-end of your website. Try removing the conditional and just adding the action as is:

add_action( 'wp_ajax_write_here_img_upload', 'write_here_featured_image_upload' );
add_action( 'wp_ajax_nopriv_write_here_img_upload', 'write_here_featured_image_upload' );

Add this inside admin-ajax.php

ini_set('display_errors', 1); 
ini_set('display_startup_errors', 1); 
error_reporting(E_ALL);