Building A Social Network in Wix | Changing Profile Pictures | Part 19

What's going on Wix Nation MPS here from Wix Training Academy. And in today's video, you're never going to believe it. We are back to building a social network in Wix. That is right. Let's get a thumbs up for going back to the series I promised you I would and I'm back

In today's video by the end, you're going to understand how to allow users to go into their profile and edit their profile image to upload a new one. So maybe they want to change their profile picture, and they'll be able to do that now once you get through this video. But before we do number one, let's get a thumbs up for a brand new webcam. If you couldn't tell I'm shooting on a brand new webcam here, and I'm super excited about that. So upgraded content and number two, if you're brand new to this channel, I want to welcome you. Thank you for coming. If you haven't already make sure you click that subscribe button in the bottom, right of this video and turn those bell notifications on. So you never miss any content and you get to instantly plug into a community of 29,000 plus other like-minded Wix entrepreneurs here, which is pretty darn exciting if you ask me. In fact, we have a goal here on the channel to hit 50,000 new subscribers in our community by March 1st, and I need your help to do it.

Lastly, I already know you're going to head over here and do this, but head over to wixmywebsite.com. You can access our Wix Training Academy, no strings attached, literally an email password, and you get access to tons of free Wix content, nothing more to it than that. So head over there, link in the description below.

But without further ado, let's jump into today's video, which is showing you how to edit the profile picture and upload a new profile picture in your social network.

Changing Profile Pictures

So here we are on our profile page. I know it's been a little while, but we're here. If you don't remember, we added a button way early on in the series and guys, this was an entire series of, if you want to check out the entire series and this is brand new, you probably want to watch it from the start, the links in the description below where I'll throw a card up as well. So we added this edit profile button, right? So that is already there and it's going to stay there.

Now, what we have to do is we've got our profile picture right here, right? This is already connected to the database, but what we need to allow the user to do is be able to upload a new profile picture for that to happen. We need an upload button here to make it.

So what we're going to do is we're first going to make sure our Corvid tools are turned on. You can see mine already are because it says Exit Corvid, which means they're already on. And you're going to go over here to add, and then you're going to go to user input. You're going to go to upload button, and then you're going to choose one of these upload buttons. You can customize this style of these. I'm not going off of style in these videos. I'm going off of functionality. So I'm just going to choose to change file one.

I'm now going to go ahead and drag it and hover it over the profile. If you guys have been on a social network before chances are pretty good and here, I'm going to bring this in front. We want this in front. We want, Wix just wants to be funny with us. All right. We want this right here and right there. So I'm going to go ahead and put this upload button over the profile picture.

If you've been on a social network before, you know, when you click edit profile, you can see an option when you get onto your profile picture to upload a new one, right? To change your profile picture. So we want this on the profile picture to indicate that they're changing the file for their profile picture.

So now once we've got this on here, what we don't want is we don't want this change file to show on the live profile page, right? So in order to make sure that it doesn't, what we're going to do is we're going to utilize this edit profile button. And I'm going to explain the functionality to you quick before I show you.

So what's going to happen is when a user comes on here, if they decide they want to change their profile picture, they're going to click edit profile. And then this change file button is going to appear on their profile picture. But it's only going to appear when they click that edit profile. Otherwise it'll just show the profile picture they've already got on there. So what we're going to do is now that we've got this on here, we're going to go to our Properties Panel and I'm going to change the ID name to Profile Picture Upload. For those of you that forget. Remember when you're doing this, it starts lowercase capital capital. That's just how the code works.

So I'm going to change the ID number one. And then what I'm going to do is I'm going to click hidden on load what this means. And I'm going to uncheck enabled by default. What this means is when the page loads, this button does not show, it will only show if there is a direct action in the code that takes place, that causes it to show. And that action is going to be from this edit profile button show.

What we have to do now is we have to click our edit profile button and we have to go ahead. I'm going to get rid of that because I was messing with it earlier and we have to create an enclave function. So you're going to press that little plus button next to on click. And then you're going to see a function appear. And you'll see down here in your page code manager, we're just going to backtrack that you're going to see down here and your page code manager, a function appears.

Now what's going to happen is I've already got the code here. I'm just going to copy and paste it, but I will throw this code in probably the description below, because this is a pretty small line of code. So if YouTube will permit me to put this code in the description, I will, if not, I'll put it on the Wix Training Academy. So yes, you will have to go register for the Wix Training Academy to get this code.

So essentially what this code says is when this button is clicked, we want profile picture, upload this right here to show ".show" And ".show" means this will then appear. It will show. So this code right here will enable this button to show when this edit profile button is clicked and that's the only thing we currently need in the code, then obviously make sure it's saved.

What has to happen next is obviously this upload button needs to be connected to your user profile database because when the person actually uploads their new profile picture, they obviously need to make sure that it's connected to their profile in the database. So we have to go ahead and click connect to data. We're going to choose our dataset in this case, it's going to be the user profile data and then file connects to profile picture image. So then we go ahead and connect it to the data. And then we actually need to add a submit button or a save changes button. Why? Well, because once that picture is actually in the upload file, they need to be able to save it to the database.

So what we're going to do is we're just going to go ahead and I'm going to make this easy. I'm just going to copy this edit profile button and I'm going to put it right here and I'm going to rename it, save profile edits. And then what I'm going to do is I'm going to connect this because we need to connect it to the database. This save button is going to submit the information to the proper database. So we're going to choose a dataset, the user profile data click action connects to,submit and looks like we've got a little bit. We need to add an additional data set here. Why do we have to add an additional data set?

You get to work through the debugging here because this data set right here if I go to the settings is read-only we are making an active edit, which means data is being submitted to the database, which means we need a right-only as well. So one way to go about that is changes to read and write. So if we change that to read and write and we save it, we should be good. We should be able to change that. Save profile edits now.

So connect to data. We're going to connect it to the user profile. Click action connects to there we go. See how that works. So if you want people to be able to edit information on a page, it needs to be read and write. If there's information being displayed and edited. If there's only information being edited or uploaded, it can only be right. And if it's only information, that's static, that's staying on the page and nothing's being altered. It can only be read and you'll be fine. But in this case, it's a profile page. There's edits and just read-only on it.

So now we're going to click submit. And when successful, we're just going to choose to stay on the page because they're just making an edit to their profile picture. So now we've got the edit profile button. If clicked, the change profile is going to show, and if that change profile shows, they can add a new file and once they add a new file, they need to save their profile edits. And when they save their profile edits, it should be submitted to the database.

So if we go ahead now and click Preview, what you're going to see happen is we're going to go ahead and we're going to enter into the profile page. Now what should happen is when we click this edit profile button, our button should appear over here. So we would then click Edit Profile and voila! It appeared over here, but it's grayed out. Why is it grayed out? Well, it's grayed out because if you remember correctly, the way we set up this social network is the database permission say the user has to be logged in and it's gotta be the site member author that gets to edit the data.

Well, if you look up at the top here I'm logged in, but I'm logged into a different account than I originally was. So because of this, the database permissions are not allowing us to change the file. So what would happen here is you just have to make sure you're logged in with your user in the same applies to your actual visitor. That's on their profile page. As long as they're logged in with their user account, what would happen is they change their file. They select a file and then they click save profile edits and it submits it back to the database. And that's exactly how this works.

Conclusion

So if you guys have any questions whatsoever, make sure you drop a question down in the comments, let me know how your progress is coming with your social network. Drop a like if this video helped you out and last but not least guys, make sure you click that subscribe button, enjoying our awesome Wix Nation community and turn those bell notifications on so you never miss any content because it's exciting being over here, you make an amazing community. And again, we are trying to reach a 50,000 subscriber goal, adding new community members, and I need your help to do it. So if you can do it and start by helping out and clicking that subscribe button, that'd be awesome.

Like I said, I'm going to try to add this code in the description below. But if YouTube doesn't let me head over to Wix Training Academy, wixmywebsite.com link in the description below no strings attached. Your just email password. You get instant access to all my Wix training content. So make sure you go do that. Other than that, thank you guys very much for watching today's video. Can't wait to catch you on our next one.