I know I have done this before, with a frontend post form anyways that used Ajax to send the form data to a php script that used wp_insert_post() then redirected to that post after a success message displayed, but I can't figure out how to do it with attachments.

What I am trying to do is a bit hard to explain. Let me try. I have a metabox, that you can add/remove attachments using jquery to add another set of inputs, or remove them, and inturn delete that file from your site. That stuff works. What I would like to do is, when you add a new set of inputs, fill in the info, select the image file to upload, then click Save for that set of inputs (each set has it's own save button) the save button has an Ajax script that sends the data to post.php or whatever happens when you click the Publish button.

If i fill in a couple attachments fields and click Publish, my action for 'save_post' is used to save that data. I want to create a function that uses admin-ajax.php and a custom hook. Currently i have a delete function that uses admin-ajax.php to delete the attachment file from the post and the media library.

How can I create a function that adds the file. I'm so confused lol.

  • I know this is hard because file uploads aren't really supported straight out with Ajax. Workarounds for this would either have to use a separate iframe that handles the upload or hidden Flash. Feb 9, 2011 at 2:26
  • I think you misunderstood what i was trying to explain. Not your fault, like i said, hard to explain it. I found a solution for what I was trying to do though.
    – jaredwilli
    Feb 9, 2011 at 3:34

1 Answer 1


Here's my solution for creating an attachment ID with a temporary title and the post_parent which it is attached to.

My jQuery psuedo code, without the needless stuff:

    jQuery('.addImage').live('click', function() {
            type: 'post',
            url: ajaxurl,
            data: {
                action: 'save_attachment',
                _ajax_nonce: jQuery('#nonce_add').val(),
                post_parent: jQuery('#post_ID').val(),
                attach_title: 'Attachment ' + size
            success: function( res ) {
                var attID = res.replace(/0$/i, '');
                alert('Success: ' + attID);
        return false;

My admin-ajax.php function and custom hook:

function save_attachment() {
    if ( $_POST['action'] == 'save_attachment' ) {

        $post_title = $_POST['attach_title'];
        $post_parent = $_POST['post_parent'];

        $attach = array(
            'post_title'    => $post_title,
            'post_parent'   => $post_parent,
            'post_type'     => 'attachment',
            'guid'          => '',
            'post_mime_type'=> 'image'
        $attachID = wp_insert_attachment( $attach, false );
        if( $attachID ) {
            print_r( $attachID );
add_action( 'wp_ajax_save_attachment', 'save_attachment' );

See what I have here is, there's a link with class .addImage, you click that, and it runs the ajax/php save_attachment() function returns the ID which i use in the chunk of code I prepend to my metabox (a group of inputs for new file) and the attachment ID returned is used as the value in the hidden input field within that chunk of code. There's also a save button in that chunk.

Now, given that ID, i can use my already complete and working function for saving (or updating) the attachments with admin-ajax.php saving the data entered and file selected for each one. The remove button for each is also able to make use of the ID to remove the blank attachments if you have no use for them.

This will soon be a sick ass plugin, once i get this working as a-jacksed up custom metabox.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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