Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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,

Marvellous

share|improve this question

1 Answer 1

up vote 14 down vote accepted

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:

add_action('wp_print_scripts','include_jquery_form_plugin');
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">
<form>
<div id="output1"></div>
<script>
$(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' 
    $('#thumbnail_upload').ajaxForm(options); 
});
function showRequest(formData, jqForm, options) {
//do extra stuff before submit like disable the submit button
$('#output1').html('Sending...');
$('#submit-ajax').attr("disabled", "disabled");
}
function showResponse(responseText, statusText, xhr, $form)  {
//do extra stuff after submit
}
</script>

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
    check_ajax_referer('upload_thumb');

//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'];
                die();
            }
            $attach_id = media_handle_upload( $file, $post_id );
        }   
    }
//and if you want to set that image as Post  then use:
  update_post_meta($post_id,'_thumbnail_id',$attach_id);
  echo "uploaded the new Thumbnail";
  die();
} 

hope this helps

share|improve this answer
    
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. –  Robin I Knight Mar 9 '11 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 '11 at 11:58
    
Marvellous . Thanks –  Robin I Knight Mar 12 '11 at 11:21
    
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. –  Pollux Khafra Nov 29 '12 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 '12 at 18:05

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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