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.

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

share|improve this question
    
Are you getting any error message? –  Vinod Dalvi Mar 8 '13 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 SEO Mar 9 '13 at 15:02

1 Answer 1

up vote 3 down vote accepted
+100

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;
});
share|improve this answer
    
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 SEO Mar 10 '13 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 –  onetrickpony Mar 10 '13 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 SEO Mar 10 '13 at 23:50
    
Like this. The php should be obvious. Better ask what exactly you don't understand... –  onetrickpony Mar 11 '13 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 SEO Mar 11 '13 at 2:12

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.