This is how I like to do image uploads on my full stack apps

all right so I did a stream on Sunday and I was trying to hook up an image upload to this application that I'm kind of working on but I kind of got stuck and didn't figure it out I wanted to make a video to kind of show you how you can potentially upload images to S3 from a UI let's just go ahead and run my service and then I'm also going to run a little script I have here to spin up a locally running S3 bucket so I want to first show you the application right so this is a a site where you can basically manage your online courses and you could potentially sell them to people it's just something I'm billing just to kind of teach you all along the way but one of the features I wanted to work on was the ability for people to upload images so if I were to click on manage here and I wanted to change the image of this is going to take like a screenshot and I can use that as my image over here I have an input box that is basically a file type input and if I were to go and find that screenshot which is here and I click upload image what this is actually doing behind the scenes is hitting an endpoint to get a S3 pre-signed post URL and then it basically uses that post URL to upload the image to S3 so now notice when I refresh the page the image is still there so I'm going to give you a complete walkthrough of this and how like I got this all set up so the first thing I had to do was I like to run everything locally if you can get everything accessible locally so that you don't have to depend on remote Amazon services to do your local development so the first thing I did was I brought in a S3 server library and you can run this locally on your machine on Port 5000 you can give it a directory here and then also you can give it a a config file and I think it can also just host your S3 bucket here so for example if I were to let's just copy this uid real quick I want to show you just so you guys understand what's going on let's load up localhost 5000 I'm gonna go to my bucket uh it was called online course platform then I'm going to paste in that you would and notice that the image is actually hosted on my local S3 bucket pretty cool now the reason I do this is because if you set up your code properly it's just a Boolean toggle you can switch to basically switch it from deploying to a local S3 bucket or using a real live S3 bucket so that's the first gist now let's talk about what happens when someone tries to click here on upload image and how does that all work out so I wanted to kind of diagram this out to kind of exemplify what's going on here so let's just go ahead and add in a icon and I'm going to go ahead and just type in like a user okay so the user icon but enough and when someone clicks on that file input and clicks the upload button what's happening is we need to ask the Amazon SDK to generate us a pre-signed URL so I'm going to go ahead and just draw an arrow and that's going to go to an Amazon [Music] an endpoint so this will be a trp standpoint so I'll just say get it and do a get request to a trpc endpoint to get back a pre-signed post now what is a pre-sign post let me actually show you if I go to my network here you should hopefully be able to see what's going on I'll just select a random image click upload and you'll see here it makes a request to create pre-signed URL and if I look at the payload that comes back you'll see it has a URL and it has a bunch of fields okay I know it's kind of hidden by my screen but the URL is basically telling you where you need to do your multi-part form upload and the fields are basically things you need to attach to your upload so that the S3 bucket knows how to verify that you have the correct like signature right so these are kind of like secret keys in here that allow you to upload to the bucket looks confusing literally just attached these to a form data object and send it over to the wire so that's the first thing we do we do a get request we get that pre-signed post URL and that sends it back to the user uh and technically this is a browser not a user I guess I could say like the UI and that's going to send back URL plus Fields okay so now the second step is we can use that pre-sign URL to upload it directly to an S3 bucket so if I were to go to an icon and I say like um S3 bucket so using the pre-signed post you can actually just upload directly to that bucket using a form post so like you could use axios I believe I'm using fetch so basically you're going to use form data you're going to append a file and then you're going to do a fetch post request okay and because you have all those credentials basically embedded in the fields here when Amazon sees that request it's going to say okay you're authenticated let's just go ahead and allow you to upload that file and I'll store that file in the bucket and then later on in the UI if you want to kind of look at that image you can just go ahead and reference that URL assuming you have a a web hosted S3 bucket right if you want to like if you wanted to add more protection on your bucket so that no one can just go and look at your images you can do that but keep in mind that these are uids and they're basically mathematically impossible to guess so I think that's kind of safe enough depending on like your security needs so that's kind of what's going on behind the scenes so let me just go ahead and show you like the whole path right let me just make sure you understand what's going on let's go to pages and let's go to our dashboard let's go to this one so this is the next page that basically does that upload um let me kind of walk you through all the stuff so I have a state variable for basically keeping track of the file that the user uploads and that's basically when I click on this um it's going to keep track of the file this is used down here um on this file input right I'm using main time so like this is given to us by default but I'm basically saying when the file input changes call that update that state value with the file and then also like show the file name here using this value property pretty simple right and then when you submit this form notice there's a form here that has an on submit we need to call this upload image function okay so this is kind of like where all the fun stuff happens on the front end we're doing the the pre-signed post update okay so the first thing we do is we check to make sure there's a file and if there's not a file we return uh second thing is we do that request to the trpc endpoint to get back those URLs and the pre-signed post Fields okay again these are like the credentials um and then I'm basically just setting up a form data object here where I append all the fields I'm also attaching a content type so that the S3 bucket knows we're uploading a zip file or an image or a p and a PNG or something and then finally you append the file at the end the file has to come last for some reason I didn't really look into it but there's some reasons why you have to do that probably because like the multi-part boundary has to be proper I don't know anyway you basically Loop over all those you pin them to the form data and then I finally do a fetch request using a post method using the form data to that URL the pre-signed post sent back okay so this this process right here that I'm highlighting this is this I should technically say this is a post you do the post we get back the information and then we do another post directly to the bucket using the URL that is sent back okay and that's happening down here this is the second line that goes from the user all the way to the bucket and then when the upload's done I basically clear the file input I refetch the course information so that the image will refresh and uh ignore all these commented out lines of code because I was kind of prototyping some stuff so let's find it for the front end let's look at the back end because that's also really interesting how that stuff works so let's go to the root router and let's go to the course router and let's find the pre-signed post URL okay so how this works is basically someone is going to request to upload a a course image so they're going to pass in a course ID and the first thing we do is we check hey like is there a course that exists with that course ID if there's not throw an error back I probably want to add some additional authentication to verify that hey the user trying to do this request is a an admin I haven't added in that like role-based authentication yet um I guess it's considered authorization not authentication but I haven't added any type of role-based authorization but I plan to do that but anyway what we do is we generate a new UN for the image ID and I'm updating the course to say hey like store that new image ID inside of the prism schema so if you look at the prism schema I added an image ID here with a string and that's going to keep track of like the uid for the image so once we updated that we create a pre-signed post okay now what this is doing is basically asking the Amazon SDK to set up those credentials that only allow someone to upload a file with the key of image ID and it has to be an image notice here I'm saying the conditions start with a an image and it can only be a certain size to this bucket that's coming from an environment variable that's just the name of the bucket and that is basically how that works if you look up here I'm importing a ads SDK S3 pre-signed post I'm also importing the ES3 client here from the AWS SDK client S3 I set up a S3 client again this is like prototype I need to make this be dynamic this stuff should not be hard-coded here but on a real system you'd have this come from environment variable you probably have this coming from an environment variable in fact you might not even have to set this at all when it's deployed to a Lambda um and I think I have what a one megabyte limit or something but that's kind of how it works on the back end so basically the backend returns that URL for you the front end is going to do that request using the URL and then it just refreshes the page which is why you're seeing when I click upload it changes the image the code for all this is found on this online course platform repo I'll put a link in the description if you want to poke through this code and kind of figure out how I did this um I do need to update the readme and kind of explain how you can run this locally because you have to kind of run this as a separate node script right now I do plan to incorporate this into the docker compose so you can just run one command everything's spun up for you you don't have to worry about it but that code will be up there um in fact the code is already up there so if you enjoy this overview be sure to give me a thumbs up like comment subscribe and like always have a Discord Channel you're welcome to join if you just want to find a place to hang out with some other developers or just ask questions we've got a good community in the Discord other than that hope this was useful have a good day and happy coding

Channel: Web Dev Cody

Views: 27,436

Keywords: web development, programming, coding, code, learn to code, tutorial, software engineering

Id: T7iNytkGIiQ

Length: 10min 53sec (653 seconds)

Published: Tue May 09 2023