Simple Next.js Image Upload with UploadThing

in this video I'm going showing you how to simple and easy way to upload image in nextjs application we are going to use upload things so as you can see this is what we have I can upload file here or just drag and drop and after we upload I just showing the image down here and also after it's done it should be have the image on the dashboard of the upload things and see what we have this is the image and see on the upload things we have the IM this image as as well when I click on that it should be not this but this one yep so yeah we are going to learn how to do that and really simple so let's get started so let's first generate nextjs application so we can say npx create next app at lest and also for the application name I'm going to say nextjs upload things and yep just hit enter typescript I'm going to say yes yesen yes talwin I just want to say no Source yes app router yes just wait for that all right it's done so now let's open that into Visual Studio code but first we need to see the into the nextjs upload things and in here we can say code and then dot to open that inside Visual Studio code all right so now let's go to upload things.com and in here you can log in with kop I believe and and after you log in you can go to the dashboard and in here you can create new app so basically I have already doing that so I have this my apps here it's called my next app the name it doesn't matter and you have 2 gigabyte for free and when I click on that as you can see in here the file is empty after you upload any file the list of the file it should be in here and here we have API key and this is basically that we need to copy and paste to our EnV file all right so let's just copy that and I'm going to create EnV file here env. loal and I'm going to paste that right here like so and also now let's go to overview and go to the documentation click read more and we are going to use nextjs app rouder first we need to just install the package let's copy that and open the and in here I'm going to paste that here and just hit enter all right so now let's go to source and then page and I'm going to just remove all this content inside the main let's scroll up and here I'm going to delete that let's just put H1 H1 and see main I'm going to remove the image and now let's say npm run def so now let's open Local Host 3,000 and we should see main with heading one here we go nice so now what we need to do let's go back here so basically you can upload any file inside the upload things here it can be image video Etc but in this video I just want to showing you how to upload image and yep the first thing is we need to create the API road but before that we need to create the core and I'm going to zoom in so you can see so the first thing I'm going to copy this API SL uploading slore dots so let's copy on that and inside the app here I'm going to create file and paste the rad in here so now we have API folder upload things folder and core.ts file so what we need to do just copy all of this here and paste that right here so what the hell is this so basically in the top here we have the variable F and this is basically initialized the create upload things function and in here we have F out function for the ID I'm going to say user one maybe say user one like so and uh let's see what is this so this is basically image uploader and we set the maximal file size to 4 megabyte and this is basically the middleware that check if user login or not if the user is null we need to just throw an error on authorize error all right next thing is after you check user login or not it will starting the upload complete in here and the meta data is basically half the user ID and file have the URL here all right so after we create this core.ts we need to next create the rad so this basically the simple rout so I'm going to copy this code and here inside the upload things we need to create file called road. DS and just space that right here so in here we have ability to make a get request and post request and our file road is going to become from the core.ts here all right nice so what we need to do next so because we're not using talwin so let's click this tab here and we are going to copy this import The Styling here inside our layout so let's go to layout and just paste that right here just like that and also next thing we need to create the untils upload things. DS so let's copy that go to source and create file and paste that right here / upload things. TS so in here we need to just copy this and paste it right here and the our file road is going to become from the at app API uploading SL score all right so in here we can use upload button upload drop zone and uploader so now let's see how we can use that so let's go back to documentation and see in here basically if you want to use the button upload you need to change the component into the client component so let's open the page here of course you can just use that in here but I just want to create another components so let's go with components folder and inside the components folder I'm going to do image upload like so TSX and in here we can say R fce and let's say image upload like so and I'm going to change this component into client so we can say use client and I'm going to render that into our uh home here so let's render in here I'm going to say image upload like so nice so let's close this and we are going to working inside this image upload component so the first thing is we are going to upload import the upload button so inside this diff I'm going to let's say upload button come from theils like so and here we need to specify the endpoint that we need to use so to see the available endpoint you need to go back to the core and as you can see in here we just have one endpoint which is emate uploader of course you can create another endpoint here call call Maybe video uploader Etc and you can specify the endpoint that we need to use in this upload P so now we are going to use image uploader all right so let's just try to run the app and see on the browser what we have so as you can see we just have button called chose file so let's inspect and see what we have when I upload file for example let's try to upload this file and we have 0% and then yep it it has animation by default and I think there pretty cool if there's done nothing happen and see on the dashboard I'm going to open the dash ort on new tab and see that we have one file here let's take a look on the files tab and see this is the file that we already upload right and let's take a look I'm going to open that and see nice but how we can store this URL here into the state for example after we successfully upload the file so to do that is very simple let's go back to documentation and see here we have the on client upload complete so we need to just copy this here and paste that into the upload button so we have uh two props here on client upload complete and on upload error so let's try to just remove the console and see again I'm going to upload another file so let's Choice file and let's do this one I'm going to upload and we have again really cool animation and after it complete it should be showing the result on the console for us as you can see we have files and then we have array of object but I cannot uh as you can see this one and we have the URL here and the server data upload by user one because the fact authentication is used this uh user one okay so now we can store the URL into the state so let's go back and uh let's see upload image and here we can create State called maybe I'm going to say let's do image URL like so and this is basically an string and by default is empty string let's also import the use State like so and I'm going to render the image down here so first we need to check if the image URL do length F value we need to render uh I'm going to render just simple uh image here or maybe I just want to render div first div and then let's say closing div and else I'm going to render null so inside this da here I'm going to render the image image come from next image and this image have a source and the source should be image URL and uh alt let's just say my image just like so because we're using next image we need to specify the width and height if you not do that it will error so we can say WID into for example 500 and the he I'm going to say let's say 300 nice so as you can see here on the image when I click on that it have uh UTF utfs doio host name so when we working with nextjs we need to store this host name into our next configs so in here we need to specify images like so and I'm going to put the remote patterns and here I'm going to put an array and I'm going to specify the host name utfs do iio we need to set the URL down here so I'm going to say set image URL into respond and then I'm going to get the object zero inside an array and in here I'm going to grab the URL just like so and of course we can just remove the console yep let's try that again I'm going to to uh upload another image let's upload file and maybe this image we have the process here pretty cool it's done very fast and as you can see we have the alert upload complete click okay and we should be able to see the image down here oh really it's not showing the image so let's try to refresh and uh I just want to remove the all the file here delete all of those and now let's try to upload file again I'm going to refresh just make sure everything is updated let's upload and see what we have all right here you go as you can see we have the image really cool and the next thing is we can change this upload button to whatever we want here so let's take a look on the upload things inside the oils we have the upload drop zone so we can also use that so here I'm going to change this with upload Drop Zone from the oils let's remove this upload button and now let's take a look we have this really nice upload button right here upload file I mean and we can just drag and drop right here the file and how that we can styling this yep we can do that and as you can see on the documentation we see on maybe on theme I believe uh theming right here and as you can see we're using this type which is uh what the name upload drop on and this is a container upload icon label allow content pattern we can styling that with this appearance props so how do we do that so let's try I'm going to say here I'm going to say appearance and inside in here we can put the container upload icon label Etc so for example I'm going to put a container container and I'm going to put style here and I'm going to change the background for example and I'm going to change that to red when I save and let's take a look as you can see the background is red the container is all the content in here so we can just stying whatever we want we can say the width into for example 100 RAM and I save and as you can see this is 100 Ram cool and also I'm going to remove this and T that to maybe one pixel solid red so as you can see and now we should be able to see it's not background but border border one pixel solid and I'm going to use blue and here we go we have the Border blue and I can say dot here Dot and we have this also if you want to change this color of the icon you can you can also do that here we can say uh what the name upload icon you can say upload icon and here you can say color to whatever you want we can say red for example and it will becoming red now and you can also change that to Blue and we have blue so now let's try to upload file again I'm going to click that and upload this file upload one file click on that and see what we have nice we have the result down here as you can see this is really simple and easy to use and of course what you need to store on your database is this URL here the image URL all right and you can showing the image to whatever you want you can create blog post and you can connecting the image URL with the post all right yeah this is really simple and nice to implement in your next project maybe if you want to working with image so thank you so much for watching guys see you in the next one

Channel: Cand Dev

Views: 5,767

Keywords:

Id: MQtu5yVGEhQ

Length: 16min 22sec (982 seconds)

Published: Wed Nov 29 2023