File Upload in Next.js 13 App Directory with NO libraries! Client and React Server Components!

today I'm going to walk through how you can do a file upload in nexjs13 in the new app directory with absolutely no dependencies you don't need to use a third-party Library anymore you can simply use the native functionality on the website and the server side I'm going to show you how to do this with a client component which is basically regular react and handling it in an API route on next js13 and then in the second half we're going to do the same thing but only use a react server component and the new Alpha server actions in nexjs13 so if you want to jump ahead and see how I do it for the react server component feel right ahead I think both of these ways are totally legit so pick whichever one you want or learn them both with that let's dive into the code here we have a regular nexjs13 application I've just created it and I've outlined a couple of the files we're going to use the first way we're walking through this is with the client component and so I have use client at the top of this page now you could move this out to another component if you wanted to and just have this be a react server component but because I'm showing this mostly as a demo I'm turning the entire thing into a client component so I don't need to build another component the first thing we're going to need to do is we're going to need some place to store the state of the file upload itself so with that we're just going to use use State and react and set it to a file now this is a web file type and because we haven't set anything here the file by definition is either a file or it's undefined which is exactly what we want the next thing we want to do is we're going to want to have the actual form now this is going to be a very basic form nothing crazy and you can add more content to it if you'd like so here we have the form element with an on submit Handler for when the user submits the form and we have a single basic input this input on change is going to set the file to the events Target files attribute and because we're only ever expecting one file here we can simply take the first one and then when they submit it it's going to fire the on submit Handler now the on submit Handler for the form needs to take the form data create an HTTP request and send it off to our API route and we'll write the API route next so what that will look like is something like this here we have an on submit Handler and we're going to prevent the default because we don't want the browser to do the default action of the form which would be to make a post request or a get request depending on the form action now if there is no file return that means the user didn't actually add a file so we don't have anything to handle otherwise we're going to have a try catch to handle errors and we're going to create a new form data and then we're going to set the file that they've selected into this and then we're going to make a fetch request and this is going to go to API upload method post because we want it to be a post request with the body as the Forum data now when you do it this way and you set the data to the form when you set the body to be the form data it's going to automatically set the headers and handle all the multi-part form uploading for you it's all just going to work let's go ahead and test that so you can see what I mean here's our create next app very basic we're going to choose a random file here we'll choose a we'll choose one of my website images and we're going to go ahead and click upload and it's going to fail because we don't have our API route yet but we can take a look at the HTTP request and what it's done so here we know it's going to the right place API upload and we got an error but that's okay and you can look at the payload that it sent it sent the form data with a binary file and you can look at all of the parsed webkit boundary form data that kind of shows all this information to see that we are sending the correct information we just haven't implemented the slash API upload route yet to handle it so let's go do that here we have our API route file now you don't have to prefix it with API that's just a convention because we're in the app directory we can export the HTTP methods we want to support in this case we're only supporting a post request because that's all this route needs to handle the next thing that this API route needs to do is it needs to get the information from the request and you do that with a weight and then whatever your request is form data and this is going to take the information and the request and make sure it's been totally sent to the server and then pull that out into this variable now we want to get the file and because we're using a git here it could be multiple types of information you could be getting a string value you could be getting some other value you could be getting a file value and we know that we're sending a file so we're going to cast it as a known to file so we know that we have this file object now it could be null if it doesn't exist for some reason but if it does exist we're expecting it to be a file so to handle the edge case where it's not found at all we want to bail early so we don't need to handle anything after this so if the file doesn't exist go ahead and return a nice Json response saying success false now you could also return a 400 or 500 or some other HTTP error it just depends on what you want your API to do now the real magic of this entire route is taking the file which is a web which is a web specific API and turning it into some form of bytes that node.js and other server apis understand and the way we can do that is this the file has an array buffer which is going to return a promise for an array buffer which takes the bytes and puts it into this file type and then the actual buffer implementation can take that and turn this object into a buffer now node.js knows a lot about buffers and can handle it perfectly so once it's been put into this buffer type you can use any node.js API you want and it'll just work so you could upload it to AWS at this point you could save it to the file system you could send it in some other you know an email or something at this point this is where the common code you're going to write stops and you take this buffer object and you go ahead and do whatever you want with it now just to show you how this works we're going to take it and we're just going to write it into our temporary directory and that's going to be our path with the buffer information right file we're in PMP types node node modules we're in node land now so this is a node.js API where we're going to write some data to the file system and because we're dealing with buffers we can just pass it in and node.js will know how to handle it so to test list now we can go right back to our application and just click upload again and you'll see now that we get a 200 okay and the response is Success true and if we look at our server logs it'll say open this random file to see it and this is in our temp directory again so we know it's not the one we just uploaded and when we go ahead and do that we get the picture that we uploaded so that's all you have to do the magic is taking the file turning it into an array buffer and then moving that those bytes into a buffer object you can use this in any Library you want to then handle the file upload now to do this with a react server component it's very very similar in fact most of the code is identical but instead of handling the form upload in an API route we handle it in a server action within the react server component itself let's dive in so to use this you have to make sure you have the server actions turned on in your next configuration now in the future this will be on by default but for right now it's an experimental flag I've created a new page under server just because this is a server component and this is where we're going to implement the react server component now it's going to look very similar but we don't have use client at the top of the page because this is no longer a client component instead it's a react server component and the form no longer needs to store its state inside the react State hook instead it's just going to store the state within it and the form action is going to handle that form State now what does that form action look like if you watch the first half of the video you're gonna see that it's very similar to the API route in fact that's basically what it is it's an API route masquerading as a react server server action so here we have an upload action and that's what's passed into the form here and you have to Define use server to make sure that the action is run as a server action and we're going to get the file in the same way by making sure we get the file type and that's defined here with the name file and we cast it to a file if we don't have a file we're going to throw an error and this is going to just be an early bailout so we don't execute the rest of the code and then we do the same thing where we take the file and get the array buffer and the array buffer can then be turned into a buffer object and the buffer object is something that all node.js apis know how to handle and so we'll do the same thing here where we're just going to make a temporary path and we're going to write the file to it and then you can go ahead and see what it looks like so this way you know that it was uploaded let's go ahead and just delete that file and then in our test we'll go to the server page and this is our react server component and here we're going to pick something as well we'll pick this image and we're going to upload it and you can see our HTTP request got a 200 okay sent the file as a binary and we didn't get any useful response but if we look at our server logs It also says open up this file to see it so we can go ahead and just take that and this is the new one the file that we just uploaded so that's all there is to it using only native apis you can now take a file and upload it either using client components or server components hopefully you found this useful if you did give it a like And subscribe and until next time happy coding

Channel: Build SaaS with Ethan

Views: 40,988

Keywords: next, nextjs, next.js, react, nextjs 13, nextjs13, next.js 13, file, file upload, file upload next, file upload next 13, software, coding, ethan, saas

Id: -_bhH4MLq1Y

Length: 11min 40sec (700 seconds)

Published: Tue Aug 01 2023