Upload post thumbnail from the front end

1 comment

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:

   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

   Log in to Reply