Save JSON object attributes to custom metabox

Question

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);
            }
        }
    }

Answer 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');
    });

});