Upload a File or Multiple Files to a Node.js Express Server | JavaScript Tutorial

hello everyone and welcome to this tutorial so today what I'm going to be showing you is how you can handle the uploading of a file or files to a node.js server using Express using the malta npm package now a nice thing about this package is in addition to the file or files that you are handling you can also handle additional form data on the same post request so as you can see on the front end already set up a simple form here with two text inputs and also a file input option and if we take a look at the underlying markup you see two inputs of type text and the third one is of type file and I'm including the multiple attribute here so the user can select one or multiple files so when the user clicks the button of type submit on this form it's going to trigger this event listener of type submit and this is going to first of all prevent HTML from automatically submitting the form so we're handling the form submission in JavaScript next I'm selecting all of the inputs here and then I'm creating a new form data object I'm appending the values of first name and last name to the form data object and then for the files the files are stored in an array so they are available on the file input on the files property and I'm looping through them by their length and I'm appending each one of those files to the form data object so we're going to end up with a form data object that contains two text inputs and also a number of files determined by the number that the user decides to upload if you want to view the contents of the all data object before it's sent to the server then you need to use an iterative method to get at that so you can just console log form data spreading in one by one now if I fill in this form so I will select two images on file open the console and when I hit submit you can see the contents that we're trying to extend to the server has been logged there we're getting some errors because the server doesn't actually exist yet but the point in this exercise is that you can see what is contained in the form data object so if I open up this second file here you can see that it's got a reference name of files and the second element in the array is the file itself notice here that both files have a reference of files that's because in the loop where we are attaching them to the form data object use the same reference so this reference name is going to be important because on the server side we're going to use this reference name to access the files as they come in and finally on the front end I'm making a post request to Port 5000 forward slash uploads so we're going to be creating that server in a moment the body of the post request is form data so the data that we just saw in the console log and then I'm handling the response from the server in the normal way that you would for a server that is sending back a Json file so that is it or the front end now on the server side so I've already created a subfolder server here with server.js and inside here I've already got a basic server setup I'm starting by importing Express Malta which is the package we're going to be using to actually pass the file or files and form data and finally optionally cause so what this allows me to do is to accept requests from any IP for all paths so that I don't get any cause errors so you can initialize It On All Parts by calling cores inside of app.use after you have initialized Express and then the one path I have here that supports a post request it's forward slash uploads and at the moment it's just log talking the request to the console and the app is running on Port 5000 so if we take a look back at the front end you see that on localhost so this is the IP or localhost on Port 5000 we're making our fetch post request to the uploads path so that corresponds to what I've set up here now even though I'm importing these three packages at the top of my script you'll notice that in the server folder there is as of yet no no project there so let's create a new node project there now so first of all I need to CD into the server folder so I can just drag and drop that as a shortcut then to create a new no project using the ordinary defaults npm init or flag y and after that I want to install those three packages from npm so that is Express cause and finally Malta so after that is complete we will see a package.json file and it has these three patches now listed as dependencies for this project so let's go ahead and start using Malta now so for this first example I'm going to start using it with some minimal option settings so the minimal amount of information that you need to specify is a destination where you want the files that are uploaded to be saved so in this case I'm going to set it to the current directory name plus and I'm going to create this folder in a moment a folder called uploads here then you want to save the return value of this so that you can then pass it in to R where you want to intercept the request so that is the way that motor works it intercepts the files in the request for you so in between the specification of the path and the Callback function you are going to want to call array on the uploads reference and inside there pass in the reference name for the files that you gave them in the form data object on the front end so in this case it was files and this Loop gave the same reference to all of the files so files have that same reference name now I need to create the new folder that I'm referring to inside of server so call it uploads so now that we've passed in Malta as middleware here using these specifications what we can do is to access the body of the request so that's going to give us any form data and also files and to the front end I'll send back a Json response saying that the status of this request is files received okay so hopefully now this is working I will spin up the server by calling node servers it's up and running on Port 5000. now if I go into the front end and complete the form I'll upload two images here hit submit so now we're getting the Json response back with files received and if we take a look in the console log or the server we have available to us both the form field values and also in an array of objects some information about the files that have been uploaded and if we take a look inside the uploads folder they should then be there so you can't actually access them in the editor but if we reveal them in file explorer there's a present no extension for these files but I can prove that they are indeed the images that I selected if I just drag and drop one into an image editor here you can see that these images definitely exist so let's go back to the server now and I'll show you how you can customize the file name under which uploads are stored so this is really the quick and easy way to get up and running saving the file upload somewhere but if you want to specify more options then what you want to do is to create a storage property on the options object and we'll be setting that to value of storage so we'll be creating a reference to that up here and you specify those options on Malta dot disk storage passing in here and options object the first property set here is destination so this is going to be similar to last time so it's going to be the same destination but now you have more parameters available to you so you can use the request or the file itself but what we're going to be doing here is simply calling callback so if there's narrower it's expecting that to be in the first position so we've set that to null and in the second position that's where we set the directory so again it's going to be directory name class codes and now the next property that I'm going to set is going to determine the file name under which uploaded files are saved so again this accepts a function in which you have the request available file so this is information about the file not the file itself and again a callback parameter where you want to pass in null in the first argument position so in the second argument position you can specify the name under which uploaded files will be saved so for example you can save them to their original name under which they were uploaded so that would also include their extension so let's see if this is working out just fill in the form once more and submit so files received now on the server side you see the console log output so we're getting again the information you can see here the original name property you could use other properties here to help determine the file name and then inside the uploads folder you see now we've got image one and image two and they're recognized as JPEG files now obviously this tutorial has been about uploading files but you can actually use Malta just to pass the text on the incoming form data so you can do that by specifying up it's none and no argument is necessary in there so I'll start server again and this time I'll just send some text and you see on the server side you get John and doe there undefined for the second console log because there is no file available there so you'd probably want to delete the console log there because it's no longer necessary and also to change this to something like all data received so that is it for this tutorial on how you can handle file uploads to a node server running with Express using the motor package so I hope you found this useful if you did please consider hitting the like button down below this video it helps with the algorithm and others to find this video and if you'd like to see more content like this in the future don't forget that you can subscribe to the channel

Channel: OpenJavaScript

Views: 10,900

Keywords:

Id: TZvMLWFVVhE

Length: 12min 54sec (774 seconds)

Published: Mon Jan 09 2023