CRUD with Node JS, Express and Mongo Db 7: Upload images and Files with Multer

so in this video we're going to learn how to upload files and the files we want to upload are just images so let's make a change to this our form so back in our code uh let's head to index on our index new dot egx so i'll just close every latin i'm not using let's close other thing so i might need a ajx i'm just going to make a few changes now one of them is i'm going to add an end type to the form and i'm going to make it support multipath and form data so we can support forms and then i'm gonna add that let's add it somewhere here say div form group and just simply add let's add a label and the label is going to be for image i'm just going to say upload image and i'm going to add an impute type of file and the name is going to be image id of course image uh let me give it a class of form control which is a bootstrap default class from control file so let's see what we have let's refresh so we have the uh this is black let's make that look white [Music] little now let's say text white let me also add text right here okay so that should fix that issue okay so we can see that so we're going to be using multa so multi is like uh what we use to add that functionality so that our form can be able to process our multi-part from data so you can process files i'm going to do that by first of all installing malta so let's head back to our code and just go to a new terminal and say npm i monitor then i hit enter so that should install there so after that is installed we're going to go to our blogs route because that's where we're going to have most of the changes the first thing we're going to bring in that uh dependency const i'll just call it malta equal to require requirement so what i'm going to do is first of all i would like to define the storage for that so define storage for the images and most of these things that i'm going to be writing just from the documentation and the way to do that is just by uh let's just call as const and say malta dot dix storage okay so in here we're gonna define uh storage for that so we're gonna say destination i'm gonna pass in a function which is gonna be the request file and we're passing in a call back all these are from the documentation and then the callback that's the callback is going to have some parameters and this the first one is going to be null and the second one is going to be actually where the location where you want to start images are going to be so i want to store it in the public folder which you already have and i'm going to create a folder called uploads okay i already have that just create another folder called images just to separate that so in my uploads folder i'll create a new auto file create a new folder called images so in here we're going to be storing all our files so by default uh malta strips of um the extension of the files so we're going to add back that extension so in my storage just to add back the extension okay so i'm going to define the file name after defining the destination i just put a comment here destination for files here i'm going to define the file name so i'm going to pass in the same function the request the file and a callback nope call back okay so in my function to call back of course the request is going to be no and what else i need to pass in is the file name so because i want to make this uh kind of like dynamic the file name i could also just say file.original name okay so this will call up the original name of the file for me okay but i want the file name to be dynamic so depending on what the person uploaded so i'm gonna use the date function so that i can grab the date of whatever it is at that moment and just tack on the file name okay so the time is going to make part of the founding for us okay so outside that uh account storage and i've defined my destination and what the fun name is gonna be what i'll do is just define some parameters so i'll say upload parameters from alta so i can just call it const upload equal to motor and in here i'm going to pass in uh it actually needs storage which already created so i'm going to pass in this storage here that's the one at the top here so for the storage i'm going to pass on the storage and of course the storage contains the destination and the file name i can also specify some other things they're all in documentation so i'll just say command specify the limits of the file so i'll do that by saying file size and i want this to be let's see this size is as an mb uh let's just make the limit to be three and big so uh one megabyte of course nice three so this is like the size limit so i'll go to my uh where is it [Music] good i'll go to the route that handles the new post and in here i'm going to make some changes also so i'm going to pass in that file and in between the routes uh where i define the route which is a slash and request in between that i'm just passing more like a middleware something to handle the file so i'll say upload.single and put a bracket let's put a comma here and i'm watching out for this image keyword and this keyword is same thing as the name passed in here so when this gets sent uh malta will kind of like a middleware and grab that for us and it's going to put that in that images folder for us and then it's going to proceed with all of this so if you just want to see what that is i'm just going to console.log just so i see the request file so whatever the request file is i'm just going to console.log just to see and uh in here i'm also going to set in our blogs model schema i need to define the name of that uh image so say img and this will be request like we have the others request dot file but it's gonna be dot file name so i'm saving the file name of whatever the request file is inside this image schema that we defined when we're doing that so that's all i need to do here so i'm going to refresh our browser i'm going to create new post with image auto some code close this i'll say this it's a description for the new post image so let's choose a file i don't know how large this one is okay it's okay so click on save so it's actually successful so it brought us to the new poster image view so i'm just going to show you uh what that looks in the database well let us look at uh and see if we haven't in images folder so we can see that file here so we can see it's tucked on the time and then the name you can see that file here and then let's have a look at where database um let's have a look at the img so you can see among the image we can see that it's right here okay so what we're going to do is we're going to go to our view route okay i'll show route and then i want to make a reference to that but the link is saying upload slash the name of the image so i'm just gonna add images here put a slash okay so let's see if that works head back to our browser refresh okay so that works for the auto so let's go back in here and add images slash so that should work so what i'll do is just move this placeholder inside these images okay so i think that works just fine so we can see that image i can go back i also need to work on this index so that it shows uh the image here so we can simply do that by going to our index.egx and where do we have that image please hold this one so we can i just go in here copy this and go to where the index i just need to paste this here and for the auto do we have the auto here yeah i also paste this here so that should do it so we can see this has that image so we can go ahead and create another one just some random stuff choose file um let me choose another file click on save so we can see that there then we'll go back you can see that so being able to create a blog complete blog using node of course i know it doesn't have the comment section and all that but this is more like a foundation uh you can build on more stuff so we learned how to create we learned how to read we learned how to update i can delete this one we'll learn also how to delete also learnt how to add images to our posts so congrats and getting to the end of this series so i hope you were able to learn something on node express and mongoose db so if you like this video please give a thumbs up and that will help me to make more videos and in the comment section do let me know if you have questions or if you like this kind of videos and any kind of suggestions that will be welcomed so see you guys later

Channel: SomTea Codes

Views: 33,012

Keywords:

Id: sUUgbcHm_3c

Length: 12min 46sec (766 seconds)

Published: Tue Sep 22 2020