How can I use wp_ajax_response for front-end error reporting?

Question

I already have the wp hook code in place, and now I want to send error messages back to the front end to be placed in alert box or html element.

//my plugin  
add_action('wp_ajax_track_upload', 'track_upload');

function track_upload() {
  (!is_uploaded_file($_FILES['file']['tmp_name'])) {
    //report error to front end
    // i.e. send ajax response
  }
}

// my front end form
<form method="post" action="
<?php echo admin_url( 'admin-ajax.php?action=musistic_track_upload' )?>"
enctype="multipart/form-data">
  <input type="file" name="file" accept="audio/*">
  <input type="submit" value="upload audio" name="submit"
  id="submit_to_your_elders">
</form>

What's missing now? Do I need a js file to do some ajax handling? I read the codex article https://codex.wordpress.org/Class_Reference/WP_Ajax_Response, but it does not explicitly demonstrate how to tie in the wp_ajax_resonse in. How do I send a retrieve such a response? A code example relevant to my specific circumstance would greatly help a visual learner such as myself.

Answer 1

Personally, I like to do something like this as Error Reporting. When something goes wrong - in the PHP function - set an Error Header that will return back to your JQuery along with a string message:

header( 'HTTP/1.1 400 Empty Attachment' );
echo 'Could Not Upload File.';
exit;

To classify this as an error header you need HTTP/1.1 400 but after that you may put any kind of text. Here's a list of response codes. Then on your $.ajax().fail() function you can display those errors in a meaningful way:

$.ajax( {
    url: '/wp-admin/admin-ajax.php',
    type: 'POST',
    data: {
        action      : 'your_function_hook_thing',
        some_data   : some_kind_of_data
    },
    dataType: 'text'
} )
.success( function( data ) {
    /* You win! */
} )
.fail( function( data ) {
    /* You lose, show error */
    console.log( data.responseText );
    console.log( 'Request failed: ' + data.statusText );
} );

The data.responseText is what you echo and the data.StatusText is going to be what you decided to add into the header() function in PHP.