Uploading Images with Multer | NodeJS and ExpressJS

hey guys how's it going i'm back here with another video and today i decided to make a tutorial teaching you guys how to basically upload images in your node.js application in your api and basically you will be able to upload those images to your file system so i've made videos teaching how to upload your images to a cloud service like um like cloudinary however in many projects it isn't necessary especially because um if it's just a side project then definitely it wouldn't be it wouldn't it would be overkill to start in the cloud so my recommendation would be to actually store it in your file system when it's a file system i just mean store it in a folder inside of your project where you can easily access the images so you can see right here the only thing i have in my application is a very very very simple um api using express right and what i did is i installed express i installed ejs so it doesn't matter if you've ever worked with um with templates before the only thing i did here is i installed ejs it's totally not necessary it's just so that i could have a very simple html file where i could upload and access the back-end variables easily right so if you're using html it doesn't matter it is all the same it won't change based on this so the idea here is if you ignore this is i just have a very simple get route to a route called slash upload and currently the only thing it does is it renders this file right here called upload.ejs or upload.html it doesn't matter but basically this is what it's doing and you can see that this file is this right here it just it's a very simple html file saying upload image and then i also have a post request which is a post request to upload the image we currently doesn't we're not doing anything inside of it it's currently just sending the message image uploaded but obviously we haven't uploaded anything and at the bottom we just um say app.listen and we're console logging like the the name of the port right so this is a very very simple um express api right very simple we have here our html file you can see i did nothing inside of it i don't even want to you guys to be confused so i'll even delete like all the kind of stuff over here i just want to leave it so that you guys can see that we only have a buddy tag and we have this h1 tag saying upload image so what do we do now well first of all we have to install certain packages so obviously currently with this express api i i've installed my how can i say we've installed uh express as one of the packages we also installed um let me see no actually it was yeah we installed ejs but that's not totally necessary so the thing that we actually need to install is the motor package so i'm gonna say yarn add motor but if you're using npm you can say npm install motor the same thing and motor i've already installed it but motor is a very very famous library which allows you to easily manage files being uploaded from your front end no matter if it is a for example a react front end if it is an html and a js front end no matter what you you can easily manipulate those files and you can necessarily create them and upload them to your file system like i mentioned before so after installing motor we can now start working with our project so we have to create a folder where it's going to store all the images let me call this images you can call it whatever you want but this is the folder where all the images will be installed and most importantly we now need to come over here and start working with the motor package so the idea is that with multer you have to create um three things specifically always one of them because motor will be will be served as a middleware and what do i mean as a middleware is basically at in this app.post we're gonna pass the middleware for motor over here and before we actually reach the logic behind the post it has it will already have uploaded the image it will be guaranteed that it will upload the image when you call the app.post um http request right so what we can do here is start building our middleware so initially we just need to require motor so const motor equals to require motor and the package as you can see it will work but then what we have to do is we need to manage our storage and this is the part where it gets a bit confusing for a lot of people but basically what happens is and i'll just create the variable storage here before i explain to you guys storage the idea is that let me just ignore that for a second the idea is that the middleware will be something called like upload and it will contain um the motor object and inside of it it will contain two things one of them actually in this case will only contain one thing called storage and this is exactly like this is an object containing all the information related to the storage so basically in this storage object right here that we're going to create we have to say we have to determine a bunch of stuff for example we have to determine we determine where we're going to store the images which in this case is in this folder but we also need to determine like the name of the file we have to handle duplicate files that kind of stuff right so the idea is that in the storage object is where all of the specifications of our file is determined and with the motor middleware we can just say this literally just created the middleware but we obviously need to create our storage object before it so the storage object will be very simple you can say motor dot disk storage to say that we're gonna manage our like everything will be related to our memory our disk and then we're gonna pass an object inside of it containing some information and in this library specifically you can see that there's already pre-built information that you can pass for example destination and destination is basically you can pass a callback function over here and this callback function will basically determine where in our file system we want to store this and this is the syntax for this is very standard you can pass a rack for example and a file and if you want to use those two variables but most importantly you need to pass the callback function and this callback function will be used to determine what where we want to store the image those images and the first argument is any errors that might occur we don't want to we don't want any errors to occur so like we don't care that much if any errors occur sending the image to any destination so we can just pass null over here well the second argument is the actual destination and that we care so you can see that the index.js file over here which is where i'm running this is on the same level as the images folder that i want to upload if it wasn't you would have to account for this over here for example if it was one level one level lower they would have to do something like two dots slash images but since they are in the same level we just need to say images like this and it will know that images is the name of the folder that we want to store the images right then we have to determine the file name and why is the file name actually important well because imagine like this imagine we have if we don't don't determine i actually forgot to put a comma here if we don't determine the specific file name that is different for every single file then it will initially store images into this folder determined on the name of their original file but people in like all around the world might have the same files with the same names right like different files with the same names so we actually need to specify like some way to to differentiate the files and a good way of doing this and it is kind of like the standard is basically adding the date like the specific date and time in which the person uploaded the image to the file name like before the like the the date and the file name so that's the idea right and you'll combine both of them and the idea is that that will be kind of like a way to differentiate them so similar to what we did we passed a rack a file and a callback and inside of here we can for now if we want we can console log the file just to see um the file name we can see the information about the file remember file is a variable containing the actual file so you can do whatever you want with that but initially what we want to do is we want to pass a callback here and the callback again the error we don't want to handle any errors for now we'll just pass no but now this is the actual file name so what do we want the file name to be well as i mentioned before we want the date first and then we want the original file name so for example if the file is called um this cool image imagine we have an image with the name of this cool image and i upload it right now it would have the the name would be replaced by the current date and sec like time and seconds and whatever um plus this cool image the original name right so to do this we can just say date dot now which is a javascript function and we can add plus to say that we want to add the original file name and then we're going to use um an original module in node.js called path so you don't need to install anything it already comes with with node.js we're going to say oh i forgot to put an equal sign um by the way guys i i know this is like i completely forgot but if you celebrate christmas today's the christmas eve so happy christmas um i'm recording this video because while my family is enjoying christmas but but yeah let me come over here and say path dot x name which basically means we want to extend and grab the name of our file dot original name so this over here represents the original name of the file and we're using the path module to access that so this is the idea this will be the the the replaced name right and this is actually the the only things that we want to like determine for now in our storage if you want to add more stuff you can explore there's like thousands of things you can do it's really cool but these are the only essential ones and you have here the upload variable the upload middleware which now has the storage object contained inside of it determining where we want to store the image and also what is the name of the file that we want to store and now with this what we can do is we can go to where we're actually uploading the image which is in the app.post and behind like before the direct arrest so in between the route name and the callback function for this route we can pass upload and which is the middleware and we can determine which kind of upload we want to make for example single is for single files but there's like i like let me see there's multi right there's a raise there's like a thousand different types but we're only going to use single which means we're only going to upload one file and over here we have to pass a very specific name which is where a lot of people get confused this name over here is the name of the input where you grab the file and you'll see exactly what i mean by that but let's let's imagine that when we create our input in our upload ajs we're going to pass a name property to that input called image so we have to get those two together to be actually like the same right so now that we have this we can now start working with our form so let's come over here to our upload.egas and in this form it will be very simple we'll just come over here and we'll create a form tag so form and the form will contain some stuff for example it will contain a method a method will be post and will contain also some action the action will be just to reference which um like which post request we're making we're gonna make the slash upload route as we saw here it is the slash upload and then finally we also need to put this really important property called end type and this end time must be multi-part form data you have to put this or else it won't work because we need to say that we accept this kind of form this kind of data coming into our form and then we have to pass the input which is going to take that images right so let's come over here and say type file and here's where that can the the the name of the file comes right so we need to pass the name property here and pass image so this over here has to be the same as this over here and now that we did this we need to pass in another input which is the submit so type submit and that's basically it right i i guess this would this this should work um you can see that the images folder has nothing inside of it but now what it does is when we go into our into over here and let me run this i'm gonna run yarn start i'm gonna run my server it crashed why did it crash let me see um events.js because there's already it's already in use i already have another apparently already have another server running let me close this and let me go to the other one but apparently i already had another another terminal running let me run it again and you can see that now the server is running um the idea is that when we come over here and we refresh this now you'll see we have the the form appearing here when we submit this form it's going to go to the app.post slash upload it's going to go through the upload middleware that we created and upload the image that contains of the file that contains the name image which is where what will be determined in the form and then it's going to go through this callback function and say something like image uploaded so let's check to see if this works let me select the file here and i'm in my youtube thumbnails folder let me choose my typescript file and my typescript video thumbnail and let me click on submit when i click submit you can see image uploaded but that's that's actually not guaranteed we say image uploaded even if it doesn't work but you can see that the console log for the image is over here the original file name all that kind of stuff we console logged this over here and we can see that it worked but now here's the moment of truth if the image inside of it is inside of this folder it means it's worked so let's click on this and you can see that the image is over here and you can see the file name is um like this it is a bunch of strings of like a bunch of numbers and that is because we changed the name of the file it was originally typescript and now it isn't and this is the actual thumbnail i used this for a video but yeah this is the idea right you can upload how many images you want i can come over here i can like i'll refresh this i'll choose another file let me choose graphql react and submit and now let's come over here you can see another image appeared and yeah that's the idea you're storing everything in the file system and if you're using an online server um as long as you don't have like thousands and thousands of images that's totally fine you have some space in your file system so storing those kind of images for a small project is not a big deal so yeah i really hope you guys enjoyed this video if you have any questions please leave a comment down below because i answer every single question it's been a bit hard this past like two or three days because of the holiday season i also have some i have an interview for for a company so i'm studying a lot for that and yeah that but but i'll continue answering every single comment i have a discord if you want to check it out i help people there as well and yeah i really hope you guys enjoyed it and i see you guys next time

Channel: PedroTech

Views: 139,838

Keywords: crud, javascript, mysql, nodejs, reactjs, typescript, node js, express js, sequelize node js, sequelize, pedrotech, traversy media, traversymedia, clever programmer, programming with mosh, tech with tim, freecodecamp, multer tutorial, nodejs multer, nodejs image upload, image upload multer, multer, multer nodejs file upload, node js image upload, express js image upload, node js express image upload, how to upload images nodejs, file upload, multer tutorial express, how to

Id: wIOpe8S2Mk8

Length: 15min 33sec (933 seconds)

Published: Thu Dec 24 2020