WordPress Advanced Media Upload Usage

Hi,

currently I am building a WordPress theme for an online business directory, and I need to have users profile page that can be edited in the front end of the site.

According to this situation, I have start using the Media Uploader, in order to allow the end user to enter a profile picture.

I know, currently there are many web sites that showing the way to use the new Media Uploader 3.5, but only in one place I found the way to pre-select the image used by the user until now.

This is the full code:

HTML

<a href="javascript:void(0);" id="profile_picture" data-picture="350">
    <img src="http://www.image.to/display.jpg" />
</a>

JavaScript

var $profile_picture    =   $('#profile_picture');
var $media_dialog       =   null;

if($profile_picture.length > 0)
{
    $media_dialog   =   wp.media.frames.file_frame  =   wp.media(
        {
            title    : 'Choose a picture',
            button   : {
                text : 'Insert picture'
            },
            multiple : false
        }
    );

    $media_dialog.on(
        'open',
        function()
        {
            var selection   =   $media_dialog.state().get('selection');
            var image_id    =   $profile_picture.attr('data-picture');

            attachment  =   wp.media.attachment(image_id);
            attachment.fetch();
            selection.add(attachment ? [attachment] : []);
        }
    );

    $media_dialog.on(
        'select',
        function()
        {
            attachment  =   $media_dialog.state().get('selection').first().toJSON();
            $('#upload_image').val(attachment.url);
            $profile_picture.attr('data-picture', attachment.id).find('img').attr('scr', attachment.url);
        }
    );

    $profile_picture.on(
        'click',
        function(e)
        {
            // This is our link - make sure the browser doesn't handle it
            e.preventDefault();

            // Ignore right-clicks
            if(e.button == 2)
            {
                return;
            }

            if($media_dialog)
            {
                $media_dialog.open();
                return;
            }
        }
    );
}

Also note, that if you have more than one pictures to select, then modify the following code:

$media_dialog.on(
    'open',
    function()
    {
        var selection   =   $media_dialog.state().get('selection');
        var image_id    =   $profile_picture.attr('data-picture');

        attachment  =   wp.media.attachment(image_id);
        attachment.fetch();
        selection.add(attachment ? [attachment] : []);
    }
);

With this:

$media_dialog.on(
    'open',
    function()
    {
        var selection   =   $media_dialog.state().get('selection');
        var ids  = '1,3,14,325,613,36';

        ids = ids.split(',');

        ids.forEach(
            function(id)
            {
                attachment  =   wp.media.attachment(id);
                attachment.fetch();
                selection.add(attachment ? [attachment] : []);
            }
        );
    }
);

NOTE: The solution for this problem I was faced with found here.

Ofcourse, you can modify the code in order to meet your needs. Here I have place only the code for demonstration purposes.