MySpace From Scratch — Part 4: Photo Uploads

Andy Hartnett

Follow

Mar 19 · 3 min read

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.

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

Front End

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:

1. File input
2. Make request to API to store Image
3. Show Profile Photo
4. 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

Backend

On the backend side of things we need to do a few more things

1. Create middleware for user routes: This way we can attach user to every authorized request, making things way easier
2. Create new route/controller for storing a new photo
3. npm install busyboy-connect and use it so that we can files through requests
4. Use AWS SDK to upload the photos to S3
5. 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!

Previous Posts In This Series:
Part 1 — Introduction
Part 2 — Setting Up Environment
Part 3 — Authentication

While you’re here consider following me on twitter!