In the last part I talked about Authentication. Today we are going to go over some MySpace stuff, and I’d like to start with photo uploads.
The gist of how this is going to work is we are going to have a file input on the front end side, this will be passed to the API where the file will be stored in a public S3 bucket. After the image is saved we will store the file path in a photos array on the user schema. Then on the front end side we are going to show the profile photo, and there will be a link to click to look at more photos
The front end is fairly simple. We are doing some basic retro-myspace style, or as close as I can get using tailwind. Then it’s just an api call. But here are the steps:
- File input
- Make request to API to store Image
- Show Profile Photo
- Show Images on “Pics” Page
Here is what that looks like for the time being —
And here is the code that accomplishes the “Pics” page and the ability to send a photo to the API:
^ That’s all this is to the photo uploading on the front end side of things. It’s a little more tricky on the backend
On the backend side of things we need to do a few more things
- Create middleware for user routes: This way we can attach
userto every authorized request, making things way easier
- Create new route/controller for storing a new photo
npm install busyboy-connectand use it so that we can files through requests
- Use AWS SDK to upload the photos to S3
- Store an array of images in the User Schema
** I’m human, and I stack-overflowed how to stream files in Node. This is a combination of a few different threads I read on there.
Here is the file upload function using busboy to handle the file. I wrote a wrapper for S3, but that’s not exciting enough to share, all it does is makes the S3 call a 1 liner so it looks better in the controller.
Anyway, here is the backend magic:
And now we can upload photos to our profile. For now, the first index in the array of pictures. So when we want to make a photo our “Profile Picture” we just move it to the front of the photos array.
And that’s it for this post. In the next article I’m going to focus on “Friends” and relationships between friends. Look for that in the next coming week!