Next JS Upload File / Images to Local Directory

do you want to see how we can directly upload images inside this public directory using nextges then let's start the video This Is The Branding project made with next year's typescript and for The Styling we are going to use television scissors and this is not necessary at first We'll add few States and you can see their default values and we are going to use them to handle our UI and also to handle our file state then I'll add few classes to this rapidly where we'll have this maximum width and we will render this at the center of our screen then I'll add this label and inside this label will add our input now because we don't want to use the default file input here we are going to also add this here and now because here we have this input inside our label and this input is going to be hidden so we can add this D which will be our container or it will be UI which we can use as our button and inside this deep we'll use this state selected image if there is selected image then we want to render this image otherwise we'll render this text select image and now because we have all these classes inside this div which will give us the pretty border and it will render everything in the center because of the flex property and here we already have the width and height because of this width and the aspect ratio and after this label we have this button which we'll use to upload our image well if this uploading state is true then we want to disable this button if we are in the uploading State we also want to change its opacity and here are few classes to install this button and according to this uploading State we are going to change the text inside this button and that's it for the UI part let's handle the on change event for our file input so inside this on change we have to first of all check if there is this target.files then we are grabbing the file from inside this files and then we are using this state called selected image and we can use this URL dot create object URL and will pass this file then it will give you the local URI of this file which we can render inside our image and then we are updating this state called selected file now to back it's time to handle our upload logic so here first of all we'll check if there is no file then we just want to return otherwise we'll create this form data and after that here we have to use this form data.upane and here we can pass this key value pairs so this will be the name and this is going to be our actual file now here to post this data I'm using this axios so you can use feature EPA as well but let's use this xeos.post and this is going to be our endpoint which will create very shortly now here we have to pass our form data and after that here I am simply logging the data that is going to come from inside our backend API and here we are also updating this state called uploading and we are doing this to handle our UI logic then here if anything goes wrong then this cache block will fire and here will log this to the console and now you can simply attach this handle upload method to your button and now if you run your project then that's how you should see inside your browser now now let's write our API for that inside my API folder I'll add this file called image.ts inside this API file we have to first create our Handler where we'll have this request and the response and now because we are using typescript so we have to define the type as well and now as we already know we have to export default this Handler from inside this file now whenever we want to handle media files inside next year's next yes doesn't support that by default but it has its own body parser and so for that we have to disable the default body parser at first and that is so simple you just have to export this object called config where you will Define this API and you will set this body parser to false so now we disable the default body parser that comes with next GS now we have to pass the incoming data so for that we are going to use this package called formidable and it's a pretty nice package so now here I'm installing this formidable and also I am installing the types for this formidable so now we can import this formidable and we can use it inside our handlers now if we invoke this formidable it will give us this form object from where we can use pass method now this is the method which will take request and it will give you a call back with error fields and files at the very beginning of this callback you will have error after that you will have Fields means if you are sending any other data with your files then that will come to this field and obviously you will have our files inside this files and now if you want to upload this file to your cloud storage you can simply use this files and upload this to your cloud storage but here we don't want to do that we just want to upload our image to our public directory so for that inside this formidable we can pass these options now before we pass any options inside this formidable I just want to convert this callback to promise so this function called read file is going to be the promise version of our formidable inside this function will accept this request which will be our next API request and after that here we'll create our form using formidable then inside this read file will return this new promise where we'll get this callback with this resolve and reject if anything goes wrong then we can simply use this reject function and we can reject are promised otherwise we'll use this resolve and we are going to resolve the promise then here we'll simply pass our form dot pass and here we have to pass the request that we are accepting inside a read file then we'll have the same callback then we'll see if there is any error then we just want to reject with that error otherwise we'll simply use this resolve and here we will pass our fields and the files and we'll have them inside this object and now because we want to store our images directly inside our local directory I'll accept one more property called save locally and type will be Boolean then here I'll add this options object and I'll check if the save locally is true then we are going to modify this object inside this if block so the very first option that we will modify is this uploaded div now for the upload directory I'm going to use this path dot join here we will use this process.cwd which will give us the current working directory and this is the place where we want to store our image which will be public slash images now because currently we don't have the path so we need to import this as well with this path I'll also import this FS module from directly inside this FS slash promises which we will use later in this video to create a directory inside our public folder now the next option that will modify inside are formidable is this file name now this file name will be function where you have to return a string value and also you can modify your file name according to your need now inside this function we'll get these four things name extension path and the form and now to avoid any name Collision here I'm going to use this date dot now and we have to convert this to a string and then I am using this underscore and the original file name which will come from inside this path also we can use this name as our file name but inside here you will not have your extension and this will give you a lot of trouble so just stick with this original finally or also if you want to explore more further than inside this path you will have your mime type and from inside that mime type you can get the extension of the file and you can use any other custom name if you want to but if you don't provide the extension then your file is not going to be visible and now finally you can pass your options to this formidable and I know this it is a pretty extra work but it is going to worth your time and for now there is no return type for this read file if you hover over on this this is unknown so let's fix this as well for the return type I'm just using this promise with this object where we'll have this fields which will be formidable.fills and files the type will come again from inside this formidable dot files and that's how it looks when you format your code and the next thing that we need to handle is we are trying to access this folder and if there is no folder then this formidable is going to through big nasty error so to fix this you can simply use this piece of code inside your Handler now here first of all we are trying to read this exact directory where we want to write our file and if there is no directory then it will throw this error which will catch inside the sketch block and inside there will create this brand new directory so at first if there is no directory then this block of code will create this brand new directory and now you can simply wait for your read file and it will read and store your file inside this Public Image directory but for now we also need to pass the second argument and we don't want to make it mandatory so for that you can simply add this little question mark right here but we want to save this locally so let's add this true right here and now if everything goes well then we just want to send this done okay now you can simply save your file and paste your application right now inside this public directory we don't have anything we just have this Fab icon and this logo but now if I select any image and if I try to upload this then here you will have your images and inside here you will have this image as well now let's try to render these images inside our app itself and I'll render them directly inside our home page now this idea we just want to render the path of our images and to read those image parts we have to use FS module again and this gate server side props this is the perfect place where we can do all of our back-end free so inside this gate is static crops we have to return this object and inside this object we have to have props and inside these props I just want to render this deals or directory names with this array where we'll have some strings so here we are handling the catch block or the error part if anything goes wrong then this will return this empty directories so to read these directories again I am going to use this FS module and we'll use this read their method here we have to provide the path so we are using this path dot join and we'll use this process dot current working directory and we have to pass the path which will be public slash images and now because here we have this error it means now we have to install this fs and the path module so these will be our import statements and now we can simply assign this directories to our layers after that I'll assign this directories to our props.dash and here we have to cast this type because of the typescript and at the end you can simply return your props inside this object and now there is no error inside our gate server-side props now let's render these directories inside our UI for that first of all I'll Define this interface where we'll have this this and this is going to be array of string then we can simply destructure these directories inside here and after our upload button I'll render this div where we'll have this reads.map where we'll have our links for the images and when we want to visit this image we can simply go to this Images slash D image name and I'm using this anchor tag for The Styling and here we'll render the actual item and if you have the exact thing that I just explained then you should have something like this now if I click on this link it is going to display this image directly inside this browser also we can upload any other image if we want to and if we upload this there will be no change now if you want to you can update your state according to your API response but now I am going to reload this and here we'll have another image foreign upload another one and now if I reload this then here I will have another image and also if you visit your folder then there you will have all of your images so that's it this is how you can upload your images directly inside this public folder inside nextgiers as always I hope you like this video and learn something new if this is the case then don't forget to hit that like button subscribe if you haven't already and I'll see you guys in my next video

Channel: Full Stack Niraj

Views: 40,054

Keywords: next js tutorial, next js file upload example, nestjs file upload, next js file upload to same direcotry

Id: QTD9L0jL0dU

Length: 12min 33sec (753 seconds)

Published: Tue Oct 11 2022