Auto-update owner's picture using a code

Hi there guys!

Is there any code wherein it can auto-update the owner’s picture which is located in one of my pages? Well, for other pages, I just connected it directly to a dataset. But for this one, I need to use a code because whenever the a person post something then afterwards change his/her picture, his/her picture (owner’s picture), should automatically be updated in that page. So I need to grab the owner’s picture from database1 and use it to update owner’s saved pictures in database2. (Of course, the code should find all of the same _owner in database2 to place/update the owner’s picture). This means that the two database - database1 and database2 - are connected with each other through owner’s id and profile picture.

Note: The page that I’m referring to have contents from different owner with their profile picture.

Thank you in advance!

This is my current code by the way… but it didn’t work

$w.onReady(function () {
 let userId = wixUsers.currentUser.id
 wixData.query("MemberPage")
    .eq('profilePicture', userId)
    .find()
    .then( (results) => {
    let membersData = results.items[0];
    let ownerId = membersData._id;

    wixData.query("Messages")
    .eq('profilePicture', ownerId)
    .find()
    .then(()=>{
    })
    .catch( (err) => {
 let errorMsg = err;
        });
    })
})

Hello again,

i have played a little bit with your code and have created a little example for you.
I think this is some kind of what you want to do…

https://russian-dima.wixsite.com/meinewebsite/autoupdate-picture

import wixData from 'wix-data';
import wixUsers from 'wix-users';

var picData
var ownerId
var membersData

$w.onReady(function () {
    $w("#dataset1").onReady( () => {    
 let userId = wixUsers.currentUser.id
        console.log(userId)
        wixData.query("Member-Data")
        .eq('_owner', userId)
        .find()
        .then( (results) => {
            membersData = results.items[0];
            console.log(membersData)
            ownerId = membersData._owner;
            console.log(ownerId)
            picData = results.items[0].profilePic
            console.log(picData)

            $w('#input1').value=userId
            $w('#input2').value=userId
            $w('#image1').src=picData
        })
        .catch( (err) => {
 let errorMsg = err;
        });

        $w('#dataset2').onBeforeSave(()=>{console.log("Prepare-Data")
            $w("#dataset2").setFieldValues( {
 "title":    $w('#input1').value,
 "comment":  $w('#textBox1').value,
 "userPic":  picData
            }); 
            console.log(picData)
        })

        $w('#button1').onClick(()=>{console.log("Save-Data")       
            $w("#dataset2").save()
        })
    })
})

As you can see, it also works in front-end-mode (only if using own Member-Database) !!!

Of course you have to optimize this CODE.
-Giving the code a REFRESH-FUNCTION.
-Optimize DATE & TIME
-Optimize the OUTPUT-DATA (Name / First-Name and so on)
-and doing some more optimizations, till you have a good working comment-function.

Good luck & happy coding.

Hi again! :sweat_smile:

I’ve tried your code, but unfortunately, my new uploaded picture didn’t replace my old pictures which is posted in my page. I was hoping that when I change my picture in my own account there, it could also change all of my old pictures stored in another database.

@aeroengineerz7
Hello, yes of course it will not update the pic automatically. You will have to code it (because you are working with your own Member-Database). You could create a “refresh-button” or something like that, which would start a function. These function would for example look into the PMD looking for the new pic, getting the source of the new pic and pulling this data to your own “Member-Database” to refresh the new pic (of course by user/owner-ID).

@russian-dima , I am interested too. If you or @aeroengineerz7 or me find a solution, could you show me too?

@arthurvalatin

An advanced and more automatic-way would be to update all of the user-pics in your own Member-Database with one click. :grin: (in this case you will need the back-door) :sweat_smile:

Hi @russian-dima ! :blush:

When I tried the code that you have posted, at first, it didn’t work in my end because I didn’t notice that I need to put this code . :sweat_smile:

$w('#image1').src=picData

And now it changed all of the pictures in my page and replaced it with all of the currentuser’s picture, and that is now the problem. I actually wanted a code that could change only the owner’s profile pictures stored in my database (Messages).

Note: In my Messages database, there are a lot of profile pictures from the owner, and of course with the owner’s id in “_owner”.

So I’m thinking that, if there’s a code that could make a query in MemberPage database (my own database - the source of owner’s profile picture)… find and grab owner’s profile picture, then make a query in another database which is Messages database, to find ALL of the owner’s id (more than 1 of course), then the profile picture (with the owner’s id only) will be changed when the owner updated His profile picture in MemberPage database.

Do you get what I mean?

THANK YOU VERY MUCH FOR YOUR HELP! I REALLY APPRECIATE IT! :grin:

@russian-dima

Hi again! You may look at my existing code below and see what can be added there which can find ALL of the _owner with its _id (ids) not just one _owner with one _id in one row. So the code should find all of the rows which have the same _owner but different _id (ids) so that it can change all of the owner’s picture and username from different rows in the database.


@arthurvalatin

Hi there! I already figured out the code. It can auto-update the owner’s picture and username without pushing any button, but just by loading the page. Whenever a user visit the page, he/she will see the owner’s updated picture together with the owner’s updated username.

However, for now, it can only find and update one row in a database. I don’t know yet the right code to auto-update all of the pictures from different owners.

$w.onReady(function () {
wixData.query("DatabaseName")
.eq('_owner', wixUsers.currentUser.id)
.find()
.then( (result) => {
 let data = result.items[0];
 let dataID = data._id;
    wixData.query("MemberData")
    .eq('_id', wixUsers.currentUser.id)
    .find()
    .then((results)=>{
 let mData = results.items[0];
 let items = results.items;
 let username = mData.username;
 let profPic = mData.profilePicture;
 
        wixData.get("DatabaseName", dataID)
        .then((toUpdate)=>{
            toUpdate.username = username;
            toUpdate.profilePicture = profPic;
            wixData.update("DatabaseName", toUpdate)
            .then(()=>{
                $w('#dataset1').refresh();
            })
            .catch((err) => {
 let errorMsg = err;
            });
        })
        .catch((err) => {
 let errorMsg = err;
        })
    });
});
})

@aeroengineerz7
Good job, if it works for you.:grin:
I think it is a little another way, but if it works for you, why not.

@russian-dima I came to help and found that you already did, so I decided to just say hi :raised_hand_with_fingers_splayed:

@russian-dima and @ahmadnasriya I still need help guys!

My code can only just auto-update one picture and username of the owner (which is of course stored in one row), but it didn’t include “all” of the pictures and username of the owner stored in different rows in a database.

As you can see in the picture below, there are so many values of 535f5845-8087-416e-b032… from the _owner , beside it is the corresponding _id . So, I wanted a code that should find all of the rows which have the same _owner value but different _id (value of ids) so that it could change all of the owner’s picture and username from different rows in the database.

Actually, all of pictures stored in 535f5845-8087-416e-b032… are not the same because I updated my picture. They will all be the same only by using a code.

@ahmadnasriya
Hey Ahmad, can you take it over, i will not have the time at moment to help.
Thanks!

Already found your END-SOLUTION?

Not yet… :frowning:

@aeroengineerz7
Hello again :grin: i did not forget you.

I have prepared an example for you, which could help you out of your problem-situation.

Try to understand the following CODE… (it could be the key to your SOLUTION)

import wixData from 'wix-data';
import wixUsers from 'wix-users';


$w.onReady(async function () {console.log("START")
 let userID = wixUsers.currentUser.id
    console.log(await get_Owner(userID))
 let DATA = await get_Owner(userID)
    console.log("User-ID: ----> " + DATA._id)
    console.log("Owner-ID: ---> " + DATA._owner)
})


async function get_Owner (userID) {
 return wixData.query("Comments2")
    .eq("_owner", userID)
    .find()
    .then((results) => {
 let dataLength = results.items.length
        console.log(dataLength)
 if(results.items.length > 0) {
 let firstItem = results.items[0]; 
 let userComments = []
 let userPics = []

 for (var i = 0; i < dataLength; i++) {
                userComments.push(results.items[i].comment) 
                userPics.push(results.items[i].userPic) 
            }
 
 return [firstItem, userComments, userPics]
 
        }
 else {      }
        console.log("END")
    } )
    .catch( (err) => {
 let errorMsg = err;
    } );
}

What does this code do ?

It searches for all commets and pics of the current logged-in-user.

You will get results like this when you take a look into console…


And when you open the results…


You probably will recognize, that it is the chat-history :grin:


This little CODE should give you the idea, how to solve your problem!

For better understanding, here the related 2x DATABASES (“Comments2” & “Member-Data”)

Good luck and happy CODING.

And do not forget to like it if you really liked it :wink:

@russian-dima Wow! I’ll look into it. Thank you very much, friend!

@russian-dima I’ve tried your code but then it didn’t work.
I tried the code below, but then again, it didn’t work… :thinking:
In your code, I noticed that you haven’t put a query in your Member-Data database.

Anyway, thanks for your help! Good job! :blush:

$w.onReady(function () {
    wixData.query("Messages")
    .eq("_owner", wixUsers.currentUser.id)
    .find()
    .then((results) => {
 let dataLength = results.items.length;
        console.log(dataLength)
 if(dataLength > 0) {
 let msg = results.items;
 let profilePic = msg.profilePicture;
 
            wixData.query("MemberPage")
            .eq('_id', wixUsers.currentUser.id)
            .find()
            .then((result)=>{
 
 for (var i = 0; i < dataLength; i++) {
                profilePic.push(result.items[i].profilePicture)
                }
 return [msg, profilePic]
            })
        } else {
 //
        }
        console.log("END")
    })
    .catch( (err) => {
 let errorMsg = err;
    });
})

@aeroengineerz7 :sunglasses: You know that this could be even better! :wink:
-Using “PMD” (“PrivateMembersData”).
-Then your “PIC-auto-update” would working also better!

Work on it, there is so much more, what you can do of it.
Just take a look at my (yet still not finished) Comment-Box on my site.:wink:

To find here, on the very bottom of the site…
https://russian-dima.wixsite.com/meinewebsite

I believe the orange color code below came from the source of the profile pictures which is in my MembersPage database, and this orange color code will be added to the blue color code below. This blue color code is connected to my Messages database. Am I correct?

If the orange color code below is connected in my MembersPage (the source of my profile picture), why is it there’s a need for “[i]”? I know that it is the number of of results that should be connected to the “Messages” database.

I’m confused…

profilePic.push(result.items[i].profilePicture)