AJAX Frontend Upload Image in WordPress

AJAX Frontend Upload Image in WordPress

In a previous post I’ve showed how to upload images from frontend in WordPress. As requested by many of my readers, today I am going to put it further to show you how to make it with AJAX.

Before moving on, I recommend you to read that post because we’ll use many concepts mentioned there and I won’t repeat them again here.

Now let’s get to the dirty part.

First we’ll create the form elements.

You’ll only pay attention to L10-L20. The other parts are the same codes as you see for any WordPress file. Here I just create a sample page template named “Image Upload” for this excise only.

  • L11 is the file select input and ‘multiple‘ attribute means you can select multiple images at one time. I also gave it an ID “images” so I can query it easily later.
  • L12 is the nonce field generated by WordPress for security reason. Read the codex here if you don’t know what it means.
  • L15 will indicate the upload process status information. Initially there is nothing there.
  • L17-L19 will contain any image we have uploaded.

Then we’ll need the key function I’ve mentioned in that post.

upload_user_file

Also, since we’ll upload multiple images, we should convert the original files array to a better structure in order to match the upload_user_file function. Here I write it into a function. This is best practice for future use.

Now we define the ajax handler callback.

You see we have defined 2 functions: wp_ajax_upload_images and wp_ajax_nopriv_upload_images. This is how we implement ajax in WordPress way. Check the codex here.

  • L10: we check the nonce is verified before executing forward.
  • L12 and L15 is to check the $_FILES data is passed and the first image file size is less than 5M (Strictly speaking you should check file size for all images. I am lazy to do this check, leave it to you).
  • L20-L37 is the codes for the output of the upload result. If the image is uploaded successfully, return the thumbnail HTML tags.

Finally Javascript part

I am not going into details of it, one thing should get your attention is L33. If you copy and paste the codes, you may not probably get the upload function work. ‘localizedScript.ajaxurl‘ is the variable I localized with wp_localize_script. You should change it to your own variable.

wp_localize_script( 'ajax', 'localizedScript', array(
    'ajaxurl'  => admin_url( 'admin-ajax.php' ),
) );

CSS part

This is up to you my friend!

END

*******************************
Further reading:
https://developer.wordpress.org/reference/functions/media_handle_upload/
https://codex.wordpress.org/Function_Reference/wp_handle_upload
https://codex.wordpress.org/Function_Reference/media_handle_sideload
http://carlofontanos.com/ajax-multi-file-upload-in-wordpress-front-end/

Save

Author: Leo

My name is Leo who's behind this blog. I've been working with wordpress since 2010. I'll write about themes, plugins, tutorials and all about wordpress here. Hope you find it useful!

2 thoughts on “AJAX Frontend Upload Image in WordPress”

Leave a Reply

Your email address will not be published. Required fields are marked *