Building A Social Network in Wix | Part 7 | Uploading Images in Wix Code - Non-Coding Founder's

What is up guys? You guessed it. We are at our next episode, which is part seven of Building a Social Network in Wix. I'm Michael Strauch. And we don't have coffee today, but we have a pumpkin coffee smoothie from Smoothie King, just a shameless plug, go check them out. That's what we're fueled on today.

So guys, in our previous video, I showed you how to build out the actual status page that the user status is, would be posted to today. What I decided to do because I'm kind of in between period, and I don't want to jump into a father topic without covering this is show you how to upload a picture as well into the statuses. So that way you can both accept images and text. I will show you one how to accept it in the form when people post a status and two how to accept it on the user status, his page together with the other text and for that is what we will do in today's video.

Uploading Images in Wix Code

Now, moving on I've got a couple of different requests for definitely high item things such as logging in and how people have to log in and post and all that good stuff. I'm going to start moving that direction next week. For next week's part to discuss how we start getting people to log in and some more in depth features rather than just the starting stuff. But you need to know the foundational items to be able to move forward to the next part of your social network. So with that being said, let's move right into it.

So if we remember correctly, this right here was our little button that clicks, and once you click on it, it opens up the lightbox here, which is our status update lightbox. So the first thing I'm going to show you is how to add the picture option in here. So let's get that done first and foremost. So before we move on, remember to turn on your Wix code tools. If they're not on already and then open up this little tree and go into your user status database, if you remember correctly, last time we were in here, I just added a status field because that's what I showed you in that video. Now we are going to add a field for our image. So this will be the field that people can upload an image in as well.

I'm just going to title it image. And I'm going to change the field type here to image because that's how Wix code recognizes that someone's uploading an image and what to do with it. And then I'll click app. So now we have our image field in there and we have our status field. Now we have to update it. So that way we give people an option to upload an image on that status post. So let's go do that. So I'll get back. Whoops, I'll get back outta here. I'll go to our homepage and I'll just close the size structure. Go back up to menus and pages, go to boxes and head to our status update.

So what I'm going to do now is we already have our datasets added onto this page, right? We've already got our data on here. So everything's connected to the database, except we need an upload button. We need people to be able to upload their image into the status. So in order to do that, we're going to go to add, and then we're going to go down to user input and you'll see, they've created a nice little page, our pagination feature here, and we're going to click on upload button. And then when you come in here, you choose the one you want for right now, I'm just going to choose this one. I'm going to change the size of it a little bit, make it a little smaller and I'll throw it right there.

Now, guys, I'm not quite going for design here. But you can see there's a max file size of 15 megabytes. So if we go to settings, we can come in here and we can change that placeholder text. So that's the placeholder text right now. We could get rid of it if we wanted. So just as change file, you could show the text download, or you don't have to, and then you could change the button text here. So upload, and we'll just keep it at upload.

Now don't make this a required field. This is important to know unless your social network is strictly picture based and you need a picture in order to upload something, make it a required field. But if it's not, and you're giving people the option to post a status and a picture, or just a picture and not a status or a status and no picture, then you don't want to make any of these fields required. Because then what will happen is you'll have a lot of unhappy social network, people on your site, visitors, users, all that, because it's going to cause them to have to upload both or neither. If you do it really wrong and you don't want that, so just don't make it required. So that way you avoid that altogether.

So now that we did that, what we have to do is we have to connect our upload button here to our data. So we'll collect, connect to data and then we'll choose the dataset, which is the user statuses dataset. And then the file connects to image. So this is going to be the image they can upload, and then we simply click off and we're good there. So now we've got our upload button. I'm going to say that all we save your work and then I'm going to publish it. Always publish your work, obviously to make it live. And I'm going to click done.

So now we've got that added for our status upload. When now what we have to do is we have to reflect that on the status page. So what I'm going to do is I'm going to go to the status page here. And if you remember correctly, this is what we did in the last video. And we're going to switch it up a little bit now. So we don't want that. We don't want Photoshop either. Would you look at that? And this is just one frenzy don't need that. Yes. I want to quit. Would you look at that guys? All right.

So now what we're going to do is we're going to have to open our, make this bigger, because we want to leave room for a picture. And then what we're going to do is we're going to have it kind of like Twitter, kind of not. But we're going to have that there. And then we want to leave room for a picture.

So what we have to do is we have to go in here. We have to click, add, we have to click image and then pull any image you want as just a placeholder image. This is not going to show up it's dynamic. So whatever's on the data is what's going to show up. Don't worry about that. I'll just pull this one as a random image for right now. What you'll do is you'll come in here, you'll add the image. You could choose the sizing. You could make all this exactly how you want. I showed you how to design the repeaters in last week's video. But I'm going to drive that up there. I'm going to pull this back up a little bit and remember, we're going to want to leave some room for some like buttons and a comment button as well. And I'll show you that in some upcoming videos.

Now, what we need to do is we have our picture on here and we need to make it dynamic. So that way, when people upload their status, if they upload a picture as well, we want that to show up. So that will be connected to image source connect to image. So we'll have it connect to image right there, and then you could choose a link. So if they have a link, but you have to add that in the database as well, it gets a little confusing. So we're not going to do that at the moment, but then you'll click save. And what happens is we just added this picture. So you can see this picture has been added to all of the repeaters, just like that.

Now, if we click publish and we actually go view things, let's see it. We click on the status button. I am feeling good with my pumpkin coffee, smooth movie, perfect show. I got that. And now I'm going to upload a picture. Okay? So I'm going to come in here and I'm going to get, let's find just a beautiful picture of me, we'll go with my classic. This one it's uploaded in there. And now if we click post status, it will be bam, just like that. Look at that guys. And you'll see that it was added just like that right here. My pictures and my status is up here.

Now, remember guys, here's the other thing you got to recognize. I really put no design effort into the look and feel this status page. I wanted to show you the functionality, how to make it happen. You need to design your status page the way you want it. You could come in here and all the repeaters, well, actually the top repeater, you could change the look you could change the font, the colors, everything you could change all of that.

As long as you make sure everything's connected to the database, which is what I want to show you, the functionality, the backend of it. How to actually make that action carry out is right here. This is how you do it. That's how you start to get a picture uploaded into your statuses as well.

So now you have the ability for user to post the tech status and an image status in one. So this is pretty cool. It's coming along, guys. We're coming along. We've got another feature added to our social network series now.

Conclusion

If this video helped you out, drop a like down below comment, if you have any questions at all, and don't forget to hit that subscribe button right below the video, head over to wixtrainingacademy.com, click on this Academy button and register for our free Wix Training Academy for webinars, training, content, checklists, workshops, all this good stuff and absolutely free. If you're already a member go up there and click log in. But if not click Academy register, I appreciate you guys so much. I appreciate your time. And I gotta say I also appreciate Smoothie King because this pumpkin coffee smoothie is to die for.

Thank you guys very much I'll catch you on the next one.