We would like users to be able to upload the post thumbnail when editing posts. How would this be done. I would imagine it would make use of the ajax functions of wordpress.

Any ideas,


1 Answer 1


Uploading files in ajax is a bit tricky because it is not possible to upload files using the browser's XMLHttpRequest object so you need to use some kind of Ajax upload plugin and the easiest one would be the the JQuery Form Plugin which makes things much easier and it's included in WordPress. So to use it you need to enqueue it:

function include_jquery_form_plugin(){
    if (is_page('12')){ // only add this on the page that allows the upload
        wp_enqueue_script( 'jquery' );
        wp_enqueue_script( 'jquery-form',array('jquery'),false,true ); 

on that page add your upload form and the JQuery to call the JQuery Form plugin for example:

<form id="thumbnail_upload" method="post" action="#" enctype="multipart/form-data" >
  <input type="file" name="thumbnail" id="thumbnail">
  <input type='hidden' value='<?php wp_create_nonce( 'upload_thumb' ); ?>' name='_nonce' />
  <input type="hidden" name="post_id" id="post_id" value="POSTID">
  <input type="hidden" name="action" id="action" value="my_upload_action">
  <input id="submit-ajax" name="submit-ajax" type="submit" value="upload">
<div id="output1"></div>
$(document).ready(function() { 
    var options = { 
        target:        '#output1',      // target element(s) to be updated with server response 
        beforeSubmit:  showRequest,     // pre-submit callback 
        success:       showResponse,    // post-submit callback 
        url:    ajaxurl                 // since 2.8 ajaxurl is always defined in the admin header and points to admin-ajax.php     

    // bind form using 'ajaxForm' 
function showRequest(formData, jqForm, options) {
//do extra stuff before submit like disable the submit button
$('#submit-ajax').attr("disabled", "disabled");
function showResponse(responseText, statusText, xhr, $form)  {
//do extra stuff after submit

you must update POSTID with the actual post ID. then create the Ajax function to accept the file upload and update the post thumbnail

//hook the Ajax call
//for logged-in users
add_action('wp_ajax_my_upload_action', 'my_ajax_upload');
//for none logged-in users
add_action('wp_ajax_nopriv_my_upload_action', 'my_ajax_upload');

function my_ajax_upload(){
//simple Security check

//get POST data
    $post_id = $_POST['post_id'];

//require the needed files
    require_once(ABSPATH . "wp-admin" . '/includes/image.php');
    require_once(ABSPATH . "wp-admin" . '/includes/file.php');
    require_once(ABSPATH . "wp-admin" . '/includes/media.php');
//then loop over the files that were sent and store them using  media_handle_upload();
    if ($_FILES) {
        foreach ($_FILES as $file => $array) {
            if ($_FILES[$file]['error'] !== UPLOAD_ERR_OK) {
                echo "upload error : " . $_FILES[$file]['error'];
            $attach_id = media_handle_upload( $file, $post_id );
//and if you want to set that image as Post  then use:
  echo "uploaded the new Thumbnail";

hope this helps

  • This is brilliant. Just a couple of queries. That is, where does everything need to go. Obviously the form goes on the page in question and that will be the post id with which to use. The first add action is that for the HEAD area or for the functions.php . and the final ajax block starting with //hook the ajax call. Where does that bit go. Many thanks. Mar 9, 2011 at 11:50
  • the first and last snippets of code can be placed anywhere in your functions.php and the second snippet needs to be place on the page you wish to display your upload form on, you cal also turn the second snippet to a shortcode to make things easier.
    – Bainternet
    Mar 9, 2011 at 11:58
  • What I don't get about this is how does the form know to use my_ajax_upload()? Shouldn't that be included in the ajax call? I ask this because I have a loop of posts that I'm allowing to be edited and they need different functions for processing certain posts. Nov 29, 2012 at 13:31
  • The form knows to use my_ajax_upload because its action value is hooked (add_action(...) to my_ajax_upload function.
    – Bainternet
    Nov 29, 2012 at 18:05
  • Has anything changed recently in WP that would affect this functionality? For some reason I have no $_POST data by the time I get to my_ajax_upload, even though in the JS callback showRequest the formData param contains everything I expect.
    – drzaus
    Jan 4, 2013 at 9:23

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.