How to Upload Files in Node.js Using Express and Multer

you can't build a real application these days without handling file uploads from your users whether it's a profile picture or a PDF resume files are an essential part of successful applications so let's see how to handle file uploads in node.js using expressjs and molter all right so I'm starting with a basic node application I've got a package.json I have no packages installed yet and I have an app. Json file so the two things we're going to need to install are Express as the framework and then we'll need to install molter which allows us to handle multi-art form data we'll talk about that more in a second now from here I've got a little snippet for an Express app and basically what this does is it requires express it creates the application creates an endpoint and then starts the server running at Port 3000 or the default port on the environment variable if there is one now in this case I'm going to update this route uh or actually we'll just create another one we'll do an app. poost route and this will be a route that is/ API SL upload so that's the path that the user will send or the application will send this request to and then inside of here we'll take the request and response objects and then do something with it so we can respond back to say uh uploaded successfully nice so that's just the API endpoint we haven't actually done anything with molter but let's just test this out first let's do a node of app.js and we can actually use nodon to do this so app.js so this is running on Port uh 3000 which means we should be able to uh actually have a typo in here so this should log out the actual Port don't know if people caught that so the port variable so now this should show on Port 3000 but let's just test this out really quickly so inside of the postman extension inside of vs code I've already got a request up to be able to send a request a post request to/ API upload and we can press send in here and this should come back with the upload successfully so we're just able to see that this works now the cool thing about the postman extension is you can also send files along which is really neat so we'll see how to do that in a second as we test this so let's just look into the molter package we'll need to uh first import molter and then basically configure it to configure an upload directory that we want to save these files to so we require molter and then we call uh the molter uh function that we just got back and we pass it in a config object to say we want to upload these things to a destination which is the folder of uploads I don't know if this will create it our by itself if we don't have it created already but we can just test this out so uh this actually becomes really easy what we do is now use uh inside of Express middleware that then references this upload that we just configured and we call upload. single and single says it's one file and then Avatar is the name of the file so when we do an HTML form I'm going to copy this if we look up here the name of this file in this form is Avatar and that's what we're going to name it inside of the middleware so inside of our post endpoint we can paste in this little snippet and again this is middleware which means before we actually run our logic molter is going to run this logic and that's going to go into the form data grab the Avatar and then upload that to the uploads folder so let's save this let's now go to actually let's just make this generic let's call this H file and then let's go into our request I've named it file here and then I'm just going to select a screenshot from a tweet that I sent out yesterday let's just try this and see if it works so we'll send this request it says upload successfully it did create the uploads directory for us and it gave it kind of an arbitrary name we could go and customize this if we want but this should actually be the file that we're looking for now let's say we wanted to find more information about the file that was created let's respond back with Json and we'll just say res. Json and we'll reference rec. file now molter is going to update this file proper property on the request to actually be the thing that we care about and let's put this I guess that actually is an object so it should be okay to just uh do directly so let's just try this again and this should show us more information about that file that was created so if we look inside of here you can see we have the original file name we have the encoding the MIM type the field name the destination the file name Etc so we can grab information about this file if we need to now let's say we wanted to have better naming for these files to be a little closer to what we'd expect well you can configure the storage property with molter with a few more properties so I think inside of here we'll create the storage config and then we will use the storage config in the molter configuration so inside of here we'll call this storage so in this case we have a function that defines where the destination is in our example we're just going to keep this as SL uploads and then we also have a function that defines how the file should be named and this is doing some unique stuff with dat. now and random number numbers we can actually just to keep this really simple just take the file. original name now you'll need to do some things to make sure that this is these are unique so you may add on some additional details to this to make sure if you upload the same file twice it doesn't conflict but for now this will work for us so if we come back over to our uh Postman request we can send this again and this should now upload that file right inside of the uploads directory and keep the same original name and the file extension so you could take any combination of this and name these in any way that you want so they make sense for you now one of the things you might be thinking is if I'm running a real server I probably don't want to just save all of these files right inside of my server I might want to upload them somewhere else so one of the things that you could do is you can Define the storage to be memory storage with molter and what that would do is give you access to that file through a buffer and you can use that buffer to upload that file somewhere else to S3 or whatever it is that you want now there's actually better ways to do this which is uploading files directly from the browser to wherever you want to store them I'll be working on some content soon using that with Zeta so keep an eye out for more videos like this on the channel but just know that probably what you're not going to want to do is just save these files directly to your server you're want to get you're going to want to get them somewhere else but I think molter is a great start of understanding how to handle file uploads and actually seeing them take place which is really nice and I'll have more content on how to do this more efficiently in the future so if you're interested in finding more of the content that I create in the future you can subscribe to my newsletter at James Q quick.com newsletter I send out weekly updates with things that are top of mind for me content from my channel my podcast and then also content from the learn build teach Discord Community which there's a link to that in the description below if you're also interested in joining anyway I hope you enjoyed the video and I'll catch you next time

Channel: James Q Quick

Views: 11,589

Keywords: file upload, multer tutorial, web development, node uploads with multer, nodejs multer, uploading images with node, how to handle file uploads with multer and express, javascript, nodejs

Id: i8yxx6V9UdM

Length: 6min 51sec (411 seconds)

Published: Tue Nov 28 2023