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"

<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 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 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 class="fix"></div>
<div id="pu_message"></div>

This is My javascript file


$('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    

                // APPEND NRE ITEMS AND FADE IN 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">
            <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>

$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_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);

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:

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.

  • Are you getting any error message? Mar 8, 2013 at 4:17
  • No error.. i just dont know how to upload a file (and set it as thumbnail) using ajax... there is some process that needs to be done which i dont know / havent been able to duplicate. the file name is being transfered but not the file itself... i need some informtaion / example that works... tried some solutions offered in other answeres but havent been able to get it working.
    – Sagive
    Mar 9, 2013 at 15:02

1 Answer 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'),

  wp_localize_script('ajax-upload-pattern', 'ajax_object', 
       '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):


  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.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){   

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


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(){


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

  • thank @onetrickpony - this only half works... 1st. i guess i dont know how to combine my js file with the script you present here. that results in 2 ajax calls which make it imposibble to attach the image to a post (no coherent post id). - can you show me how to mix my jquery code with the one you offered here plz?
    – Sagive
    Mar 10, 2013 at 22:21
  • You don't need two Ajax queries. PlUpload will fire the ajax request on which you can attach your other fields. Add them in the BeforeUpload event, just like I added the action field Mar 10, 2013 at 22:53
  • i am sorry to be a "nudnik"... (Trust me - i am not lazy) i need some help with that - i tried that i am messing it up time after time. my knowledge using ajax is growing but i still cant see in my head what you mean... could you help me integrate your solution into my javascript code? - thats why i stated in my bounty that: "i need a complete answer using my code as an example." - again... sorry for the hassle. i just need to see it once to understand.
    – Sagive
    Mar 10, 2013 at 23:50
  • Like this. The php should be obvious. Better ask what exactly you don't understand... Mar 11, 2013 at 1:41
  • Worls like a charm mate! (fyi: i completly messed up the code so thanks for the extra effort) - would award you the bounty as soon as possible and thank you very much :)
    – Sagive
    Mar 11, 2013 at 2:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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