File uploads in Next JS 14 just got SO MUCH EASIER!!

in this video we're going to take a look at blob storage with versel and specifically we're going to look at how we can upload some files to versel blob storage we're going to look at how we can display a list of files that we've already uploaded and we're going to take a look at how we can delete those files so first things first I've already gone ahead and created a blank create next app project and I've uploaded it to GitHub and created a new project in versel and linked that GitHub re V to this new versel project and I've called this project versel Das blob from here then we need to head on over to the storage Tab and we need to create a new database by hitting the create database button and we want to select blob here and takeit continue and the store name I'm going to call it something like blob Das test hit create on this then we need to link our newly created project so that was the versel blob project so we need to connect project here let's hit connect project let's select that our versel blob project so this is our nextjs project now we're referring to here let's hit connect then what we need to do is pull all these new environment variables that verel has added to this project within our local project on our local machine so we can do that with using the verell link here so let's head on over to our code I've got my blank project here let's hit verell or let's type verell Link in the terminal here and we need to make sure verell is installed globally on our machine so I'm going to go m i-g verel so once that's done we should be able to now run the versel link command we want to set up this project yes let's continue select my organization and yes it's already detected the versel - blob project and there we go we've connected our project so what we can do now is pull all these environment variables from versel so we can use this command here versel NV pull to N.D development. local so let's copy that and paste that in our terminal so now we should have a new N.D development. looc file with all our versel generated environment variables from here we need to install the versel blob package so it's npm install at versel blob next if we head on back to verel we have an example here of how to set up an upload form for a file to upload to our blob storage so I'm just going to copy this example here and we need to create a app Avatar upload page. TSX and thinking about it I'm just going to add this to the page. TSX so this will be our homepage and just going to paste everything in there so now we should be able to run npm run Dev and hit enter on this and we should be able to see now in the browser for our homepage on Local Host 3000 we can see we have our very simple upload form however we need some sort of endpoint to handle our upload so again let's head on back to the verell documentation and we can just just copy their example here for the upload so again let's copy their example for the upload code and I'm going to add this instead of the suggested rout here I'm going to add it to app I'm going to create a new folder in here called API then I'm going to create a new folder called file and in file let's create a root. TS and paste the example code in for our root so we can see we're getting an error here for the file name let's H over and that's because argument of type string or null is not assignable to parameter of type string type null is not assignable to type string so what we can do here is for file name we can do search pr. getet file name or just empty string and then ideally what we'll do is check to see if there is a file name and only then proceed with the upload if there is a file name so then if we don't have a file name we can return next response. Json and just a message in here saying no file name detected or something like that so then we also have in here an error for request. body we have exactly the same error really it's type null is not assignable to type string or readable or blob etc etc so what we want to do is check to see as well if file name we also want to check to see if request or body so this should get rid of those errors and a quick overview here is we're just importing the put function from adver cell / blob and we're uploading whatever file that we passed to this API endpoint we're grabbing the file name of that file and we're setting the access to public here now it's important to note that at the time of this recording the only access available is public but in the future there will be private access however just because only Public Access is available it doesn't mean we can omit this we do have to have this access set to public here so with that said let's test this out first of all I'm going to head on over to my page. TSX and what we need to do is where we have our onsubmit Handler here we want to update the fetch URL so instead of API Avatar we called our API root API SL file so let's go API SL file here and it's not upload it's just API file we're going to grab the file name we're going to pass the file name to our file upload endpoint and of course we're going to pass the actual file that we upload via the form so this all should work if we save this now and take a look in the browser let's give Local Host 3000 a refresh and I'm just going to upload some example file here I've got my example file selected so let's hit upload now and see if this all works and there we go we can see that we display now a blob URL so if we click on this blob URL then this will download the file that we just uploaded so our file is accessible from this particular URL here however if we refresh Local Host 3000 we lose access to that URL so let's create a new route now to handle displaying all of the available files that we uploaded to our blob storage so let's create a new folder in our app directory let's call it something like all- files and I'm going to create a new file in here it's going to be called page. TSX let's export default function all files page and this is going to be an asynchronous function so what we can do is grab all of the files that we've uploaded to blob storage and just display them in a very very basic list so to do that at the top here we can import ort the list function from at verel / blob then we can grab all of our uploaded files using the list function so let's go cons and we want to destructure blob oh sorry destructure blobs from await list then let's just console log these blobs so this should these blobs should be an array so let's see what we've got on blobs here I'm just going to return an example div in here just say all files just so we can see something on the screen so let's navigate then to in Local Host 3000 let's navigate to the all- files page and let's take a look in our terminal logs here we can see we have blobs here which is an array and of course there's only one element in the array and that is the file that we just uploaded and of course we've got the URL and the path name and the size and the uploaded app for this particular file so with that said ideally what we want to do is Loop over each of these array items and just display them in the list and we're going to add a delete button so we can delete those files as as well so in our div here let's just Loop over our blobs so let's go blobs do map so for each blob just going to return a div here and instead of the URL I'm just going to display the blob. paath name so this will be the file name for the blob and I'm just going to put Dash here and I'm going to have a delete button so let's say delete here in capital letters and of course because we're rendering from an array and react we need to add a key to each of our div here so I'm just going to go blob Dot and I'm going to use the URL here cuz the URL should be a unique value for each of our files so let's make sure this works in if we refresh our browser we can see we have our file name here and our delete button so ideally we want to hook this delete button up then and whenever we click this delete button it will hit a new API endpoint to delete that file from our blob storage so to do this we're going to need to have some sort of client component here so I'm going to turn this button into a client component going to create a new file here and call it something like delete button. TSX and we're going to use client at the top here and let's go export default function delete button and this delete button going to have some props for this delete button we're going to pass the URL for the particular file and thinking about it that's actually all we need it's just the URL for the file that we want to delete so then in our delete button then we can destructure the URL and set it to type prop s here then we just want to return a button and let's just put delete in here we want to add an onclick Handler and then within this on click Handler this is where we hit our API end point to delete our file so here then let's go let's turn this into an asynchronous function first then we need to await Fetch and we're going to hit / API SL file again but we're going to use a delete request for the file endpoint and then we're going to need to pass the URL that we want to delete so let's go body in here json.stringify and let's just pass URL in there and of course we need to add the method for this API request and it's going to be of type delete which means we need to handle this delete method within our API file at root. TS so at the top here let's go export async function delete and we'll be passed the request which will be of type request then first of all let's just return a next response. Json with an empty object for now and first of all let's just conso log the data we get from request so let's go const here Json and set this equal to await request. Json then let's console log our Json just to make sure we're passing the URL correctly to this delete Handler so we should then see some log in the terminal so first of all we need to actually render our delete button so in our all files and page. TSX instead of this button here let's render the delete button and of course we need to pass the URL for this delete button and we need to set it equal to blob. URL so if we save this now and take a look in the browser let's give our all files page a refresh again let's see what happens when we click delete and head on back to our code and we can see we have our console log from the delete method here we console log Json and we have URL on this Json object so now all we need to do is import Dell as well as put so let's import Dell at the top here from at verel blob and we can call this Dell function then and all we need to do is pass this URL so in here we can go await Dell passing in json. url so let's save this now then and first of all in our delete button after we finish our fetch request here for our deleting our file after here ideally we want to refresh the page so we can use router. refresh so at the top here let's go cons router and set this equal to use router and we need to import the use rter Hook from next navigation not next SL router then we can use router here after our await fetch let's use router. refresh so let's save this now and take a look in the browser let's give our all files a refresh and let's hit delete on our file and there we go our file disappears which means it was probably deleted successfully let's hit Refresh on our all files and obviously we have no files now I'm going to go through all this flow again let's head on over to Local Host 3000 let's choose a file to upload let's hit upload after we choose a file then once the uploads complete we should see the blob URL here but if we navigate then to all- files again we should see our list and again if we hit delete this should then delete the file we should no longer see in the list because it's been deleted from our blob storage so that's a very very simple way to set up blob storage with Vell

Channel: WebDevEducation

Views: 7,113

Keywords: next js, next js 13, vercel blob, next js tutorial, @vercel/blob

Id: PeXV-4CldnA

Length: 12min 23sec (743 seconds)

Published: Thu Oct 19 2023