insert post & Upload post thumbnail from the front end using ajax

4 Views

i have searched & searched for an explenation and have found some answers
that seem to be working for other people on this topics but i havent been able to get working.

This is my “form”

Read More
<div id="uploadPatternForm">
<div class="rightCol fleft w30 ml2">
    <h4><?php _e('Your Info', 'sagive'); ?></h4>
    <input type="text" name="senderName" id="senderName" placeholder="Your Name" />
    <input type="text" name="senderEmail" id="senderEmail" placeholder="Your Email" />
    <input type="text" name="senderWebsite" id="senderWebsite" placeholder="Your Website" />
    <input type="text" name="senderCountry" id="senderCountry" placeholder="Your Country" />
</div>
<div class="midCol fleft w30 ml2">
    <h4><?php _e('Pattern Info', 'sagive'); ?></h4>
    <input type="text" name="patternName" id="patternName" placeholder="Pattern Name" />
    <input type="file" name="patternImage" id="patternImage" size="14" placeholder="Upload Pattern" style="margin-bottom: 8px" />
    <textarea name="patternDesc" id="patternDesc" class="patternDesc" placeholder="Short Description"></textarea>
</div>
<div class="leftCol fleft w30 ml2">
    <h4><?php _e('Pattern Usage', 'sagive'); ?></h4>
    <input type="checkbox" name="personalProjects" id="personalProjects" checked disabled /><span class="fs13 c99">Free in personal projects</span><br />
    <input type="checkbox" name="commercialProjects" id="commercialProjects" checked /><span class="fs13 c99">Free in commercial projects</span> <br />
    <input type="checkbox" name="templatesYouSell" id="templatesYouSell" checked /><span class="fs13 c99">Free in templates you sell</span> <br />
    <div id="submitPattern" class="submitPattern"><?php _e('Upload Pattern', 'sagive'); ?></div>

    <input type="hidden" id="returnedId" value="" />
</div>
<div class="fix"></div>
<div id="pu_message"></div>

.
This is My javascript file 

jQuery(function($){ 

// CALL FOR NEXT 3 FEATURED BUSINESS
$('div#submitPattern').click(function() {
        $.post(ajax_object.ajaxurl, {
            action: 'action_upload_pattern',
            sender_name: $('div#uploadPatternForm').find('input#senderName').attr('value'),
            sender_email: $('div#uploadPatternForm').find('input#senderEmail').attr('value'),
            sender_website: $('div#uploadPatternForm').find('input#senderWebsite').attr('value'),
            sender_country: $('div#uploadPatternForm').find('input#senderCountry').attr('value'),
            pattern_name: $('div#uploadPatternForm').find('input#patternName').attr('value'),
            pattern_image: $('div#uploadPatternForm').find('input#patternImage').attr('value'),
            pattern_desc: $('div#uploadPatternForm').find('#patternDesc').attr('value'),
            pattern_terms_personal: $('div#uploadPatternForm').find('#personalProjects').attr('value'),
            pattern_terms_commercial: $('div#uploadPatternForm').find('#commercialProjects').attr('value'),
            pattern_terms_templates: $('div#uploadPatternForm').find('#templatesYouSell').attr('value')
        }, function(data) {
            var $response=$(data);
            var postid      = $response.filter('#postid').html();
            var success     = $response.filter('#success').html();
            var error       = $response.filter('#error').html();


            if(success) {
                // APPEND NRE ITEMS AND FADE IN SLOW    
                $('input#returnedId').val(postid);

                // APPEND NRE ITEMS AND FADE IN SLOW                
                setTimeout(function(){
                    $('div#pu_message').fadeOut('fast');
                    $('div#pu_message').empty();
                    $('div#pu_message').append(success);                    
                    $('div#pu_message').fadeIn('slow');
                }, 500);
            }

        });

});

});

.
This is my ajax php listener 

    wp_enqueue_script( 'ajax-upload-pattern', get_stylesheet_directory_uri().'/ajaxLoops/ajax-upload_pattern.js', array('jquery'), 1.0 ); // jQuery will be included automatically
wp_localize_script( 'ajax-upload-pattern', 'ajax_object', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) ); // setting ajaxurl

add_action( 'wp_ajax_action_upload_pattern', 'ajax_action_upload_pattern' ); // ajax for logged in users
//add_action( 'wp_ajax_nopriv_upload_pattern', 'ajax_action_upload_pattern' ); // ajax for unlogged in users

function ajax_action_upload_pattern() {

$sender_name                =   $_POST['sender_name'];
$sender_email               =   $_POST['sender_email'];
$sender_website             =   $_POST['sender_website'];
$sender_country             =   $_POST['sender_country'];
$pattern_name               =   $_POST['pattern_name'];
$pattern_image              =   $_POST['pattern_image'];
$pattern_desc               =   $_POST['pattern_desc'];
$pattern_terms_personal     =   $_POST['pattern_terms_personal'];
$pattern_terms_commercial   =   $_POST['pattern_terms_commercial'];
$pattern_terms_templates    =   $_POST['pattern_terms_templates'];

/*** TESTING **
echo '
    <div id="success">
        <ul>
            <li>sender_name: '.$sender_name.'</li>
            <li>sender_email: '.$sender_email.'</li>
            <li>sender_website: '.$sender_website.'</li>
            <li>sender_country: '.$sender_country.'</li>
            <li>pattern_name: '.$pattern_name.'</li>
            <li>pattern_image: '.$pattern_image.'</li>
            <li>pattern_desc: '.$pattern_desc.'</li>
            <li>pattern_terms_personal: '.$pattern_terms_personal.'</li>
            <li>pattern_terms_commercial: '.$pattern_terms_commercial.'</li>
            <li>pattern_terms_templates: '.$pattern_terms_templates.'</li>
        </ul>
    </div>
    ';
*/


/****************************************
** INSER NEW POST
****************************************/
$title          =   $pattern_name;
$description    =   $pattern_desc;

$post = array(
    'post_title'    => $title,
    'post_content'  => stripslashes($description),
    'post_status'   => 'pending',
    'post_type'     => 'post',
    'post_category' => array( 3 )
);

$postid     =   wp_insert_post($post, 10, 1);
do_action('wp_insert_post', 'wp_insert_post', 10, 1); 


/****************************************
** UPDATE POST META FIELDS
****************************************/   

// SENDER DATA META FIELDS
update_metadata('post', $postid, '_cmb_pattern_author_name', $sender_name);

if($sender_website) {
    $noLinkAuthor = 'false'; 
    update_metadata('post', $postid, '_cmb_no_link_author', $sender_website);
}   

if($sender_website) {
    $noLinkAuthor = 'false'; 
    update_metadata('post', $postid, '_cmb_pattern_author_url', $sender_website);
}

// TERMS OF USE
update_metadata('post', $postid, '_cmb_terms_personal_projects', 'on');
if($pattern_terms_commercial == 'on') {update_metadata('post', $postid, '_cmb_terms_commercial_projects', 'on');}
if($pattern_terms_templates == 'on') {update_metadata('post', $postid, '_cmb_terms_resell_intemplates', 'on');}


        if (!function_exists('wp_generate_attachment_metadata')){
            require_once(ABSPATH . "wp-admin" . '/includes/image.php');
            require_once(ABSPATH . "wp-admin" . '/includes/file.php');
            require_once(ABSPATH . "wp-admin" . '/includes/media.php');
        }
         if ($pattern_image) {
                $attach_id = media_handle_upload( $pattern_image, $postid );
        }
        if ($attach_id > 0){
            //and if you want to set that image as Post  then use:
            update_post_meta($postid,'_thumbnail_id',$attach_id);
        }   


echo '<div id="success">'.__('Pattern Uploaded!', 'sagive').'</div>';
echo '<div id="postid">'.$postid.'</div>';

die(); // stop executing script
}

.
I am trying to grab all the data… create a new post and then upload & attach the image uploaded as the post thumbnail.

Post Views: 4

Related posts

Leave a Reply

1 comment

  1. You get just the file names because you are not uploading the files. Uploading files using AJAX is currently not that easy. Newer browsers implement the FormData interface, but for older browsers you’re stuck with some kind of flash uploader, like PlUpload for example.

    I suggest you use PlUpload because it’s bundled with WP, and send all your data together with the uploaded file. Also use the wp_enqueue_scripts action to add javascript:

    add_action('wp_enqueue_scripts', function(){

  wp_enqueue_script( 'ajax-upload-pattern', 
     get_stylesheet_directory_uri() . '/ajaxLoops/ajax-upload_pattern.js',
     array('plupload-all', 'jquery'),
     1.0
  );

  wp_localize_script('ajax-upload-pattern', 'ajax_object', 
     array(
       'ajaxurl' => admin_url('admin-ajax.php'),
     ));
});

    In your HTML change the file input with:

    <a id="browse_file" href="#"> Upload pattern </a>

    Then your script would look something like this (I assume this is ajax-upload_pattern.js):

    jQuery(function($){ 

  var myUploader = new plupload.Uploader({
    browse_button: 'browse_file', // id of the browser button
    multipart: true,              // <- this is important because you want
                                  //    to pass other data as well
    url: ajax_object.ajaxurl 
  });

  myUploader.init();

  myUploader.bind('FilesAdded', function(up, files){
    $('#browse_file').text('Selected: ' + files[0].name); 
    // do a console.log(files) to see what file was selected...
  });

  // before upload starts, get the value of the other fields
  // and send them with the file
  myUploader.bind('BeforeUpload', function(up) {
    myUploader.settings.multipart_params = {
      action: 'action_upload_pattern',
      // add your other fields here...    
    };
  });

  // equivalent of the your "success" callback
  myUploader.bind('FileUploaded', function(up, file, ret){   
    console.log(ret.response);  
  });

  // trigger submission when this button is clicked
  $('#submitPattern').on('click', function(e) {
    myUploader.start();
    e.preventDefault();      
  });

});

    In your AJAX request handler function the sent data is available as usual in the $_POST and $_FILES superglobals:

    add_action('wp_ajax_action_upload_pattern', function(){

  print_r($_POST);
  print_r($_FILES);

  // insert your post and link your file here...

  exit;
});