0

Case: I use a imagepicker.js script to create a image picker for my custom meta box. But this doesn't work for WP 3.6 anymore, So i'm trying to create a image picker metabox with the new media uploader.

I got it to work with a JSON object, but how can I save these attributes from the JSON object to the metabox?

jQuery image picker:

jQuery(function(jQuery) {

    // Uploading files
    var file_frame;
    var wp_media_post_id = wp.media.model.settings.post.id; // Store the old id
    var set_to_post_id = 5; // Set this

    formfield = jQuery(this).siblings('.custom_upload_image');
    preview = jQuery(this).siblings('.custom_preview_image');

    jQuery('.custom_upload_image_button').live('click', function( event ){

        event.preventDefault();

        // If the media frame already exists, reopen it.
        if ( file_frame ) {
            // Set the post ID to what we want
            file_frame.uploader.uploader.param( 'post_id', set_to_post_id );
            // Open frame
            file_frame.open();
            return;
        } else {
            // Set the wp.media post id so the uploader grabs the ID we want when initialised
            wp.media.model.settings.post.id = set_to_post_id;
        }

        // Create the media frame.
        file_frame = wp.media.frames.file_frame = wp.media({
            title: jQuery( this ).data( 'uploader_title' ),
            button: {
                text: jQuery( this ).data( 'uploader_button_text' ),
            },
            multiple: false  // Set to true to allow multiple files to be selected
        });

        // When an image is selected, run a callback.
        file_frame.on( 'select', function() {
            // We set multiple to false so only get one image from the uploader
            attachment = file_frame.state().get('selection').first().toJSON();

                // Do something with attachment.id and/or attachment.url here
                console.log(attachment.url);
                console.log(attachment.id);

                imgurl = attachment.url;
                id = attachment.id;
                formfield.val(id);
                preview.attr('src', imgurl);

                // Restore the main post ID
            wp.media.model.settings.post.id = wp_media_post_id;
        });

        // Finally, open the modal
        file_frame.open();
    });

    // Restore the main ID when the add media button is pressed
    jQuery('a.add_media').on('click', function() {
        wp.media.model.settings.post.id = wp_media_post_id;
    });

});

And my guess is that there has to be something added to this:

// Save data from meta box
    function save($post_id) {
        // verify nonce
        if (!wp_verify_nonce($_POST['mytheme_meta_box_nonce'], basename(__FILE__))) {
            return $post_id;
        }

        // check autosave
        if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
            return $post_id;
        }

        // check permissions
        if ('page' == $_POST['post_type']) {
            if (!current_user_can('edit_page', $post_id)) {
                return $post_id;
            }
        } elseif (!current_user_can('edit_post', $post_id)) {
            return $post_id;
        }

        foreach ($this->_meta_box['fields'] as $field) {
            $old = get_post_meta($post_id, $field['id'], true);
            $new = $_POST[$field['id']];

            if ($new && $new != $old) {
                update_post_meta($post_id, $field['id'], $new);
            } elseif ('' == $new && $old) {
                delete_post_meta($post_id, $field['id'], $old);
            }
            elseif ($new == '') {
                delete_post_meta($post_id, $field['id'], $old);
            }
        }
    }

1 Answer 1

1

I've found a possible solution. Not sure if it is safe though

jQuery(function(jQuery) {

    // Uploading files
    var file_frame;
    var wp_media_post_id = wp.media.model.settings.post.id; // Store the old id
    var set_to_post_id = 5; // Set this

    formfield = jQuery(this).siblings('.custom_upload_image');
    preview = jQuery(this).siblings('.custom_preview_image');

    // Create the media frame.
    file_frame = wp.media.frames.file_frame = wp.media({
        multiple: false  // Set to true to allow multiple files to be selected
    });

    // When an image is selected, run a callback.
    file_frame.on( 'select', function() {
        // We set multiple to false so only get one image from the uploader
        attachment = file_frame.state().get('selection').first().toJSON();

        imgurl = attachment.url;
        id = attachment.id;

        console.log(attachment);

        var inputfield =  wp.media.model.settings.post.id;

        jQuery('input.custom_upload_image[name=' + inputfield + ']').val(id);
        jQuery('input.custom_upload_image[name=' + inputfield + ']').parents('td').find('.custom_preview_image').attr('src', imgurl);


        // Restore the main post ID
        wp.media.model.settings.post.id = wp_media_post_id;
    });

    jQuery('.custom_upload_image_button').click(function( e ){

        e.preventDefault();

        var set_to_post_id = jQuery(this).parents('td').find('.custom_upload_image').attr('name');

        wp.media.model.settings.post.id = set_to_post_id;

        // Open frame
        file_frame.open();

        // Finally, open the modal
        file_frame.open();
    });

    // Restore the main ID when the add media button is pressed
    jQuery('a.add_media').on('click', function() {
        wp.media.model.settings.post.id = wp_media_post_id;
    });

    jQuery('.custom_clear_image_button').click(function(e){
        e.preventDefault();
        jQuery(this).parents('td').find('.custom_upload_image').val('');
        jQuery(this).parents('td').find('.custom_preview_image').attr('src', '/wp-content/themes/YESpeopleandprojects/images/image.png');
    });

});

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.