MySpace From Scratch — Part 4: Photo Uploads

Andy Hartnett
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

Here is what that looks like for the time being —

The Classic Box Around the Profile Image
The old school gallery of photos on your “Pics” page.

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

** 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!

Dev Genius

Coding, Tutorials, News, UX, UI and much more related to development

Sign up for Best Stories

By Dev Genius

The best stories sent monthly to your email. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Dev Genius

Coding, Tutorials, News, UX, UI and much more related to development

Andy Hartnett

Written by

Programmer — Writer. @andyhartnett12

Dev Genius

Coding, Tutorials, News, UX, UI and much more related to development

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store