Understanding File Uploads in Node.js using Multer - Web Development Concepts Explained

hi there and welcome to this episode of concepts explained today's concept we're going to look at is file uploads in node.js using malto so there are three main ways of handling uploads the first one is saving the file directly onto your server the second one saving the file's binary data or base64 string data in a database and the third one is using aws s3 buckets to save and manage your files so for today's video we're going to look at the first one to explain the concept of file uploads and that is just saving the file directly onto the server so let's get started what i have here is just a basic express server that's running and listening on port 5000 and the package we're going to use to help us pass and handle file uploads is called malta so we can say npm install multi so what exactly is malta malta is a node middleware for handling multi-part form data in this case any files being uploaded from the client this can be any files from images pdfs zip files any files so if you're unfamiliar with the concept of metalware i have a video on this topic that you can go and check out so once malta is finished installing we can say const motor equals require malta to basically import this package and then we create this piece of middleware so we're going to call this piece of middleware uploads or just upload and set it equal to malta to run this multifunction we pass a object and this object has a few properties that we can set so the first and most important property is the storage property this storage property [Music] takes a storage engine and this storage engine that we're going to create tells molter where and how to save our files so we're going to create this file storage engine storage and this is just a multi-function disk storage and this this storage function accepts an object with two values the destination which is a function that has access to the request a file and a callback and this function just runs the callback function that accepts an error we're just going to set it to null and then the destination string so this this destination string is the direct path from this server file to wherever we want to save our uploading files so i'm going to create a folder in my file structure my folder structure called images and for this destination string i'm going to say dot slash images to tell malta from this current file in this same directory go to the images folder and then the next value is the file name this file name is also a function that is request file and a callback and here we also just call that callback function with an arrow of null and then the file name string so on this file parameter we've passed we have a few things we can use file.original name is the one i'm going to use because this has access to the file type or the file extension for example dot jpeg and in order to make this file name a bit more unique i'm just going to put the date in front of this file name so this file name would be the date of creation plus this piece of string and then the original file name with its extension so with this done we've set up the file storage engine and we can pass this variable onto this storage property so this middleware is almost completely set now we can just use it and pass it to a route that is going to use this piece of middleware so let's create that route app.post and i'm going to call this single and you'll see in a second why so this is just a basic express route and we're going to send when this route is complete single file upload successful success and now i use this variable or the middleware and i pass it in as a middleware and on this molten middleware we have a few functions we can run and the one i'm going to run here is single so basically what this tells us it tells malta that only one file is going to be sent and then we have to give it a file name so what is the field name that malta should look for in the incoming request so with this middleware running before this end controller running this middleware gives us access to a key value pair on the request object so we can say request.file and on this file we will see details about the file being being synced so with this done we can save this and run and go to postman create a new request a post request to http localhost 5000 slash single i'm going to make a post request and in this post request i go to body form data and here i have key value pairs i'm going to choose type file and this is important this name i put in for the key should be equal to this field name i passed to the middleware i'm going to call it image and i'm going to select a file take this file and send i see single file upload success and in the server console i can see data about this file being synced the original name and it says jpeg encoding mime type you can check for different file types if you don't want to allow certain file types this is where you can check destination and then the path of where it was saved on the server so if we go under images now we can see this image was uploaded to the server so this is awesome we have just uploaded our first image to the server using multa so what if i wanted to upload multiple files to to the server you can also do this with multi by creating a new route at post slash multiple multiple and this is also just a basic express route raise.send and the same goes for this piece of middleware we're going to insert the middleware between the route and the controller and say instead of single we're going to say array so now it accepts an array of files being sent so there's two parameters for the array function it's the file name so here we set image here i'm just going to say images and i'm going to add the second parameter which is max count so this tells malta that on this route i'm accepting a certain amount of files and i'm just going to pass in three and this piece of middleware sets another object on the request object so we can console.log that to see what i mean by that request dot files instead of just file now we have request.files with this being saved we can restart our server go to postman um clear the current data go to multiple routes and then here we can insert key value pairs but the keys being images not just image so i'm going to select this image also off type file this image and then the last one this image so if this done if i send hopefully it should tell us multiple file upload success multiple file uploads success and if i check in the console we can see all three of these files data being logged so this is what was set on the quest request.files object and if we go to our server images we can see these two images has been saved and sent to the server so this is how malta works now we want to see how it works from the front inside so let's take a look at that okay so what i have done here is just created a path to load our html folder html file and in this html file it's very simple i just have a form with an input and a button this input is of type file and it has a name of images the form has a action of single so it would go to this route it has a method of post which is also this route and then very important this input has a name of image and that is this single image it's looking for so the same thing we set in postman as key value pair so with this done let's take a look go to the browser and here we can see there's a basic file file input so now this should work basically the same i can just say choose file i'm going to select this and i say submit and i get the response from the server if i go back to my server i can see this image being uploaded and here's the data so this is how you would handle it from a server side rendered front end so i basically just have the action being single post and this is very important i set a ink type on this form multi-part form data so this is very important to put this here if you don't put this here it won't work for malta this tells malta the incoming request is multi-part form data and that is what multi actually works with so if i change this to multiple also post also multi-form but yeah i just named this images on the input i should add multiple so i'm going to restart the server go back choose files going to refresh it has three files and our submit all the files have successfully been submitted so this is how it would work from a server-side rendered application so how would this work from a single page application or client-side rendered application let's take a look at that now okay so all i have here is just the basic react app i created with create react app i cleaned up some of the files just to make this simple i have a functional component with use state and this state will handle the input data for the file and i just have basic jsx just saying this is a react app and then the form i have on submit handler and in the on submit handler is where the the sending of the data happens so when sending data from a client application a client side application or a single page application we use ajax so for our ajax we're just going to use the fetch api that's built into it built into the browser built into client side so before we send any data in the body i'm going to create that data variable called cons data and set this data equal to new form data so this form data what it does if we read it says the encoding type was set to multiple multi-part form data so this sets this object equal to the same data that malta uses so now we can say data.append which is a function that is used on this form data and we can give it a key value pair and here is where we call it image and we can pass it the file data this file data just comes from the state and that file that state receives its um data from this input on there on change handler so now i'm able to send this data to this endpoint which is a post request to slash single and i send it this data but let's take a look at what happens here npm start just start correctly this would open our application and here we can see just the basic react app i'm going to choose a file i'm going to send and yeah i first have to run my backend i'm going to start my server i'm going to go back to the frontend application i'm going to choose this file i'm going to send and here it gives us a course error a cross origin resource sharing error and this is something we first have to enable on our back end so let's quickly do that the package we're going to use is course npmi course this allows any client or single page application to have access to sending requests to this server so we're going to say const course equal require course and use this as a middleware we can just say app.use this course function so with this set we can restart our server not re-download that it's already downloaded we can restart our server and then try this again in our single page application we can refresh this choose a new file take this book and send and we can see the response from the backend and if we go to our backend we can see this book or image file being uploaded so this is how you would go about working with file uploads in single page applications so now you understand how file uploads work in node.js using motor and this is very similar to how the package body parser would work so body parser would pause incoming bodies for text and json where malta just passes the incoming requests for files and i hope you found this video helpful and if you did leave a comment down below and i will see you in the next one

Channel: The Full Stack Junkie

Views: 28,187

Keywords: Multer, Node.js, Node.js and Multer, File Uploads using Multer, File uploads NOde.js, File uploads in Node.js, Handling FIle Uploads in Node.js, Multer to handle file uploads, Uploading Images in Node.js, Uploading FIles using Node, Node File Uploads, Node Uploads with Multer, JavaScript, React Js File Uploads

Id: EVOFt8Its6I

Length: 16min 18sec (978 seconds)

Published: Thu Jul 30 2020

Reddit Comments

[u/oluseyeo]

Great explanation. 👍