How to upload profile picture from frontend of wordpress site

May it’s a silly question but i can not solve this, So i need some help.
I have made a fully custom profile page for my site, which works fine in backend,
Now when i just call the function from frontend page everything works fine but can not start mediauploader

Here is my js code

$('document') .ready( function(){
    /*snippet for media uploader */
    var mediaUploader;
    $('#upload-button').click(function(e) {
        if (mediaUploader) {
        mediaUploader = ={
            title: 'Choose Image',
            button: {
                text: 'Choose Image'
            }, multiple: false });
        mediaUploader.on('select', function() {
            var attachment = mediaUploader.state().get('selection').first().toJSON();
            console.log( attachment.url);
            $("#propic").attr('src', $('#image_url').val());
    /*snippet for media uploader */

and the php code is

      global $wpdb;
<span class="profile-picture text-center">
          <img class="img-responsive" id="propic" src="<?php echo (get_the_author_meta('image_url', $user->ID)) ? esc_attr(get_the_author_meta('image_url', $user->ID)) : get_template_directory_uri() . '/img/avatar.png' ?>"
               style="max-width: 200px; max-height: 200px; margin: auto;">

and when i click to upload a photo the error comes

Uncaught TypeError: Cannot read property 'frames' of undefined

if it was post then maybe just

 wp_enqueue_media( array('post'=> $post->ID) ); 

will solved this problem , but what can i do for the profile picture ??

Please help, thanks.

Read more here: How to upload profile picture from frontend of wordpress site

Leave a Reply

Your email address will not be published. Required fields are marked *