Simple AJAX call to upload a file.

The issue causing the 404 (Not Found) or 400 (Bad Request) errors in your AJAX request likely stems from two main areas:

1. Action Name Mismatch
2. Missing or Invalid Nonce Handling

Below, I’ll walk you through the problems, fixes, and improvements to ensure this works. Problem 1: Action Name Mismatch

In your AJAX handler, you have:

add_action('wp_ajax_process_csv_file', 'process_csv_file');
add_action('wp_ajax_nopriv_process_csv_file', 'process_csv_file');

But in the AJAX request, you append the action as 'process_csv':

formData.append('action', 'process_csv');

The action names must match.
The 'action' parameter you send via AJAX corresponds to the wp_ajax_{action} hook in WordPress. Fix: Align Action Names

Choose one consistent action name for both the request and the server hook. Update the JavaScript:

formData.append('action', 'process_csv_file'); // Match the action name

Keep the hooks as-is in PHP:

add_action('wp_ajax_process_csv_file', 'process_csv_file');
add_action('wp_ajax_nopriv_process_csv_file', 'process_csv_file');

This ensures the WordPress hook system recognizes the AJAX action. Problem 2: Nonce Validation Failure

In your PHP function, you validate a nonce:

if ( ! wp_verify_nonce( $_POST['nonce'], 'ajax-nonce' ) ) {
    die('You do not have permission to access this routine - nonce violation.');
}

However, you’re not actually sending the nonce in the FormData object:

const formData = new FormData();
formData.append('csv_file', fileInput);
formData.append('action', 'process_csv_file');

Fix: Pass the Nonce to Your AJAX Request

Since you localized the script to include a nonce (ajax_new_obj.nonce), append it to the form data:

formData.append('nonce', ajax_new_obj.nonce); // Add nonce to FormData

Corrected JavaScript (Full Code)

Here is the corrected AJAX call:

$('#upload-csv').on('click', function () {
    alert('Preparing to upload file...');
    const fileInput = $('#csv_file')[0].files[0];
    if (!fileInput) {
        alert('Please select a CSV file.');
        return;
    }

    var ajaxurl = ajax_new_obj.ajax_url; // Use localized AJAX URL
    const formData = new FormData();
    formData.append('csv_file', fileInput);
    formData.append('action', 'process_csv_file'); // Match the PHP hook action name
    formData.append('nonce', ajax_new_obj.nonce); // Pass the nonce

    $.ajax({
        url: ajaxurl,
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function (response) {
            if (response.success) {
                $('#csv-table').html(response.data);
            } else {
                alert('Error: ' + response.data);
            }
        },
        error: function (jqXHR, status, error) {
            console.log(jqXHR, status, error);
            alert('An error occurred. Check the console for details.');
        }
    });
});

Verifying the Script Localization

Ensure your script localization works as expected in PHP. Here’s the relevant function:

function load_admin_assets() {
    wp_enqueue_script('ajax-new', plugins_url('/js/ajax-new.js', __FILE__), array('jquery'), null, true);
    wp_localize_script('ajax-new', 'ajax_new_obj', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce'    => wp_create_nonce('ajax-nonce')
    ));
}
add_action('admin_enqueue_scripts', 'load_admin_assets');

Check the front-end source code of your page. You should see ajax_new_obj defined like this:

<script type="text/javascript">
var ajax_new_obj = {
    "ajax_url": "https://your-site.com/wp-admin/admin-ajax.php",
    "nonce": "random_nonce_value"
};
</script>

If the ajax_url or nonce is missing or incorrect, there’s likely an issue with your wp_localize_script function. Final PHP Handler

Ensure the PHP handler remains unchanged except for matching the action name. The nonce is now validated correctly:

add_action('wp_ajax_process_csv_file', 'process_csv_file');
add_action('wp_ajax_nopriv_process_csv_file', 'process_csv_file');

function process_csv_file() {
    // Verify nonce
    if ( ! isset($_POST['nonce']) || ! wp_verify_nonce($_POST['nonce'], 'ajax-nonce') ) {
        wp_send_json_error('Nonce validation failed.');
    }

    // Process CSV file
    if (!empty($_FILES['csv_file']['tmp_name'])) {
        $file = $_FILES['csv_file']['tmp_name'];
        $csv_data = array_map('str_getcsv', file($file));
        $html = '<table border="1"><tr><th>Customer Name</th><th>Date</th></tr>';

        foreach ($csv_data as $index => $row) {
            if ($index === 0) continue; // Skip header row
            $html .= '<tr><td>' . esc_html($row[0]) . '</td><td>' . esc_html($row[1]) . '</td></tr>';
        }

        $html .= '</table>';
        wp_send_json_success($html);
    } else {
        wp_send_json_error('No file uploaded.');
    }
}

Debugging Tips

1. Check Console Output:
   Open the browser’s developer tools (F12 or right-click > Inspect > Console) and see the exact request details.
2. Test Nonce Issues:
   Temporarily disable the nonce verification to confirm if it’s the root of the problem. If it works without nonce, the issue is nonce generation or passing.
3. Inspect Network Tab:
   Check the Network tab in developer tools for the actual AJAX request, the POST data sent, and the response.
4. Clear Cache:
   Clear browser, server, and plugin caches to ensure changes take effect.

By fixing the action name mismatch and ensuring the nonce is passed, your AJAX file upload should work smoothly. Let me know if you run into further issues! 😊