2

I've used Ajax with WordPress before and got it working. However this particular case (file upload) has proven difficult. The problem seems to be that the action is not calling the php function even though I've set the action in AJAX formData.append( 'action', 'uc_user_image' ); the same as my function name in PHP function uc_user_image()

I know that Ajax is working, as I had some checks (that I didn't include here) within success: function(data) {} and I'm not getting any errors in the console.

My end goal is to allow users to change their profile images dynamically through their account page. I've read through a lot of tutorials and SE questions but can't seem to figure it out. I appreciate any feedback.

functions.php

<?php

// includes
include( get_theme_file_path( '/includes/enqueue.php' ) );
include( get_theme_file_path( '/includes/process/profile-picture.php' ) );

// hooks
add_action( 'wp_enqueue_scripts', 'include_scripts' );
add_action( 'wp_ajax_uc_user_image', 'uc_user_image' );

update: I'm not including the nopriv action as this should only work for logged in users. I've also been testing only while logged in.

enqueue.php

<?php

function include_scripts() {

  $uri              =     get_theme_file_uri();
  $ver              =     UC_DEV_MODE ? time() : false;

wp_register_script( 'ajax-account', $uri . '/assets/js/account/userimg-ajax.js', array('jquery'), $ver, true);
wp_localize_script( 'ajax-account', 'userimg', array( 'ajaxurl' => admin_url( 'admin-ajax.php', 'relataive' )));
wp_enqueue_script( 'ajax-account' );

}

profile-picture.php

<?php

function uc_user_image() {
// I know (assume) this isn't firing because I've done some checks like below.
// I'm omitting the file upload code to focus on calling the function.

  $output = ['status'  => 'func_fired'];
  wp_send_json($output);

}

userimg-ajax.js

jQuery(document).ready(function( $ ) {

  $('#user-image-form').submit(function(e) {
    e.preventDefault();

    var formData = new FormData()
    var file = $('#user-image-file')[0].files[0];
    formData.append( 'action', 'uc_user_image' );
    formData.append( 'file', file );

    $.ajax({
        url: userimg.ajax_url,
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(data) {
              if ( data.status == 'func_fired' ) {
                $(".dev-updates").html('Function Fired');
              } else {
                $(".dev-updates").html('Function NOT Fired');
              }
        }

    });

  });

});

form html

            <form id="user-image-form">

              <label id="user-image-upload">
                 <input type="file" name="user-image-file" id="user-image-file" accept="image/*" />
                 + Upload Picture
              </label>
              <button type="submit" id="user-image-save"/>Save</button>

            </form>

If you're questioning why I've wrapped the input in the label, it's for styling purposes.

4
  • Are you only testing while logged out? You need to also hook wp_ajax_nopriv_uc_user_image for it to work for logged out users. This is covered in the docs: developer.wordpress.org/plugins/javascript/enqueuing/… Nov 10, 2021 at 5:51
  • I should of mentioned that I'm aware of nopriv, but since this should only work for logged in users I didn't include it. I've been testing while logged in.
    – Shelaine
    Nov 10, 2021 at 5:59
  • So how are you verifying that it's not fired? Are you seeing "Function NOT Fired"? What response is returned in the Network tab of dev tools? Nov 10, 2021 at 6:01
  • Yes, I'm getting the Function NOT Fired response. I'm not as familiar with the Network tab and probably don't check it enough. But I just ran it again and the network tab reads: Status Code: 200 OK / Form Data - action: uc_user_image, file: (binary) Let me know if there is something else I should be looking for here!
    – Shelaine
    Nov 10, 2021 at 6:11

1 Answer 1

1

The problem is with the AJAX endpoint URL, i.e. url: userimg.ajax_url, which is not actually defined in your JS/PHP code.

More specifically, you did define the correct URL, but in the JS object, the property name is ajaxurl and not ajax_url:

// wrapped for brevity
wp_localize_script( 'ajax-account', 'userimg', array(
  'ajaxurl' => admin_url( 'admin-ajax.php', 'relataive' )
));

So in your $.ajax() args, just make sure you use the correct property name — ajaxurl. Or change the one in your PHP to ajax_url.

And then the problem would be gone.

2
  • PS: You misspelled "relative" as "relataive", so you should also correct that..
    – Sally CJ
    Nov 10, 2021 at 6:46
  • 1
    Oh wow, what a silly error. Thank you for catching those. I've fixed both things and am pleased to say I've gotten my file upload function working too. Thank you for the help!
    – Shelaine
    Nov 10, 2021 at 8:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.