Angular 13 Project to Upload Single or Multiple Files to Node.js & Express Server Using Multer

uh hello friends today in this tutorial we will be building a complete monster kind of application where we will be uploading uh files to the nodejs express server inside angular so you can see this is a demo of the application you can choose any sort of image file and upload it inside my express server you will see inside uploads folder we will store all these images so if i try to upload a single image and if i click the upload button now you will see the image is uploaded and i can open this image inside a new tab so this is the full address of this image it is uploaded to localhost 3000 slash followed by the image name which alongside with the extension and you can right click save this image onto your computer like this open this image like this so this is kind of image gallery kind of application you can upload one other image this is single image upload so it will be appended you will see it is taking the form of a gallery image gallery and the second is multiple file upload you can also upload multiple images at the same time just click one two three four so you can see eight files are selected so you will see one two three four five six seven eight and if i show you the uploads folder so we are storing all these images you can see that inside our express server we are storing all these images which are uploaded through our angular front end and we will try to replicate this application in this video step by step and lastly i will try to upload this to uh heroku so that you can access this app from the remote area as well so let's start building this application i have given the link in the video description to all the source code so if you want to download all the source code of this application you can go to the video description link this is my step-by-step blog post where all the instructions are given alongside with the source code so now let's get started guys so first of all i will close this project and i will create it from scratch so you need to watch the entire video and then tell me whether it is working let me stop the server and close this window and let me go to my projects directory here so projects directory so here i will open make a new directory project angular upload i will cd into this and first of all guys we need to make two folders here so let me open that folder where we have created this so project angular upload so let me make two folders here first for the client so so first folder is created you will see so we will cd into it and here we will create our angular application ng new and upload file let me call this as this angular application so it will ask you whether you need to add angular routing for this application for this we don't need to simply press n and just select css and now basically it will install all these dependencies packages so in the meantime we can make another folder inside the same folder so this time we can create the server site so make directory server and we can go into the server directory and instantiate a package.json file so this is our package.json file which will hold the basic information about your express server name version description and for this backend server guys we will need express for our actual server which will handle the post request from the angular front end and actually monitor dependency which will actually upload the image to the express server simply install these two packages inside the back end so now you can see all the packages are installed one more package you can install which is nodebond index.js sorry npmi dash g for global and node mall so install this package it will automatically restart your application you did not have to restart it whether you make any sort of changes now you can see our angular app is ready we can open this inside visual studio code text editor this is our front end and inside source you will see this is our component file here app component so first of all we will make the client and then we will move on to the server so inside we will move on to our upload file and we will launch this application ng serve this is a command here which which needs to launch this application so it will generate the browser bundles and it will launch this application at port number 4200 so it is compiling this application just wait so it has started this application at localhost 4200 so now guys this is our angular application so now we can just write our just go to the app folder this is our app.component.html file and here we can write a simple form so just write this heading here simply heading will be simply angular 13 file upload in node.json express so basically if i change this you will see it will change it also we can make it inside our center position so we can give it a style attribute text align to center so it will make it inside center position so after that guys we will have a diff section so inside this div section we will have a simple form so inside this form we will have a div which will hold the input field so this will be input type of file and we will give it a name attribute of image and another attribute whenever this value changes so this is a change event handler so whenever the value changes this method we will write which is select image we will pass the event here like this so this is our input element here and we also need to align this in the center center position so we will give it a style attribute text line to center so now if you look look here at the browser so it is saying fail to compile so it is just saying select image is not defined so let me create this first of all by going to the app.component.ts file so here we need to make this method select image and we need to pass the event that we passed here so this is a method here so it is saying event is declared but its value is never used so let me restart the angular application so inside this guys what we need to do is that we need to get the image so in order to get the image we will say event dot target dot files dot length if the value is greater than zero then we will construct our file object so this will be located inside event dot target dot files and this is the zero we will access the first index so indexing in array starts from zero guys the error was coming because you can see it is saying the parameter event implicitly has in any type so you need to add this colon and then you need to write any here so now you will see the error will gone here and it will restart the application and now you will see there is a choose file button and if you click this button you can select your image and now we can console log this file here object here which we received so if you do this and if you right click inspect element and go to console and if you select any sort of image it will show you the information about that image the name of the image size the extension all that stuff so after that after getting this information we can just add the submit button right here inside the html so after this div here so we will have a break tag so inside another div we will have our button so it will simply say upload the image upload so we can bind a it will be type submit so this will be type submit and we can bind a on click event handler so when we click this button this this function will execute which is on submit this will be a custom function we will write inside the component file so we need to write this function now so right here on submit so when we now you will see there is a button out there so when we click this button so you can see question mark image is equal to so for now we need to write some code here so first of all what we need to do is that we need to prevent the auto submission of the form so here we will construct form data but before that you also need to instantiate some variables right here at the top but first will be images and second will be multiple images this will be a array empty array and for this the type will be any so just do this and right here when you got this image you can initialize it to disk dot images is equal to 5 so now when we submit this we need to construct the form data so for now constructing it we will declare form data which will be equal to new form data class so now we will append this in the next step form data dot append method so here we will give the name file comma and we will just append this which we have stored this dot images you can see we have declared this a variable here so we are accessing it so after this guys we will just make a post request to our express backend inside our friend uh angular application you can do this by using this dot for doing this first of all you need to include the http client module so just go to app.module.ts5 and here you need to copy paste a line so if you can go to the video description link here i have just shown you all the steps that you need to take so right here you will see this this is the client module you need to import it so just paste this line so inside your imports array just put a comma and add this http client module so with the help of this you will make get or post request from our angular application so here now we can just say this dot http dot post so it is saying we also need to i think we need to include declare property http so it has added this property you will see it has added this property http and inside i think inside the constructor we also need to add this so if you go to the video description link right here at the top we also need to include this at the very top so include this http client here and inside the constructor inside your app component we need to construct a constructor here so just delete this and we have this constructor and here you need to declare this variable private http which will be of the type of http client so that's it so this is just you need to do is that after that you can access this dot http and it contains all these methods you will see here delete get all these methods so we can now use the post method so this will be of type any so in round brackets just write any and here you need to put the address guys so we will be using http localhost colon 3000 so when we make the back end we will make this request so slash file and then we will pass our form data so after that we need to subscribe to this so dot subscribe so inside this this will return this response whenever the request is successful and here we can console log the response just to see if it is working and if any sort of error take place then also then we can also put a comma here sorry here just need to put a comma put a comma here if any sort of error takes place then also we can console log the error so now we need to make this route here which is a post route inside the express server so here just going back to the back end now we can make our index.js file and also make a uploads directory guys so where we can store all the images so just make it so here we can start our express application so we need to require it so make a app folder and app.listen and we will be listening on the port number 3000 as we mentioned inside the angular application so you will say app is listening so now to start this express server we will simply say nodebond index.js so you will see the app is listening so first of all we also need to make this directory which is uploads directory static directory so you will say express dot static and here we will pass uploads and now for storing the files we will just include the monitor dependency require it and now we need to tell express where we need to store the files so for doing this simply i will say you just need to say malter include extension i just use i use stack overflow a lot so for my tutorials so i will just copy this you can also go to the video description link to download all the source code so i am just for the reference i am just declaring it so here i am storing the files inside the uploads directory so i will tell the express application this is a folder name and then we will also concatenate the extension name as well when we upload the file so that's it after this guys we can make this post request app.post so the post request looks like this slash file because we mentioned inside our angular front end so we are calling slash file here so like this so here what we need to do is that guys so so this will be request response so inside this guys what we need to do is that we need to make use of this middleware function so if any sort of error take place then we can say console.error and also for this we are only including the single file so we will say single and here we will say file because inside the front end if you check we are appending file here so this value needs to be same so both the values so this needs to be same so here we are uploading this so if all things good then we can console log the path of the uploaded file using request.file.path so now i can check the application you will see the backend is running on port 3000 and also the front end is also running on 4200 so if i go to the front end of angular if i try to upload this choose a file click upload so something wrong has happened let me see uh hi guys for resolving this error i found out the error so you just need to go to file and here you need to include the forms module so basically let me show you so this is you will be having this file so here just put inside a comma inside the imports array and you need to import forms module so write this line at the very top import forms module from angular slash forms and add this inside your imports and now no error will take place so if i just refresh the application choose the image file click upload and let me see in the console so it is saying oh we misspelled localhost so just if i go to we misspelled the localhost so just add l here localhost so again refresh it so now it is saying connection reset path is not defined oh i think we haven't reported the path module so this is a built-in module of nodejs so require it because we are using this module inside the statement so that is why it was creating that problem so once again upload and now basically you will see that guys it has returning this information and you will see the image is uploaded you can see that this is the image and we have successfully uploaded this image so let me show you this is the uploads here and this is the image which is uploaded here so so this is a single image upload where we are including this uploading this image let me try it once again upload this image once again click upload so you will see once again this image will be uploaded now there will be two images you will see so now guys this is working so first of all we need to clear out this uh uh this we need to clear out this input field whenever we click upload so for doing this we need to add some kind of code here so right here inside this your app.component.ts you need to write this code yes add the date view child and here we need to give single input so we will have to give the reference so right here inside app.component.html so here you need to give hash symbol and single input so we have given this id or some kind of a reference so we are just doing this using view child so automatically angular will upload include this from the core library of angular so include this so after this what you need to do is that put a comma and here we need to write static to false and then give a variable name i will give it a single input this will be type of element ref element ref so so it will also get imported here you will see element ref include this so now it is saying it is not assigned in the constructor now guys i resolve this error so if you just hover on to this so just click to quick face and just select the second option and now the error will go on here simply add this uh x action mark here and colon symbol and the error is gone here you will see now you can re relaunch the application and let me again do this choose file click upload and now sometimes this records error will come here because whenever you are uploading from different origins access to xml http request is blocked so the simple formula to resolve this error is to install at the back end quartz module npm i course so install this module and include it in time inside your express application so right here just include this course so you need to require it course and right here just use app.use cards that's it so this will resolve the problem and also guys we need to include body parser middleware this is useful whenever you are working with the forms so this is a built-in module you need not have to install it and then you need to write these lines body parser url encoding extend it to extend it to false and body parser.json that's it and now if you relaunch the application make sure that you reload this it will automatically reload this if you choose the file and now you will see automatically the value will be reset it and it is bringing it is sending the response back to us which is path is there this is the name of the file which is uploaded if i try it the second time once again it will send me the json response holding the path of the file the image you will see so now it is storing all these images if i check in the backend you will see so this is single page image is almost complete we need to display these images also inside the template for doing this it is very simple go to app.component.com file and here you need to initialize so if you go to the video description link just to shorten the video length i will just copy paste some code here so where is the stuff here yes this is the stuff guys so this is ng template let me copy paste it right here inside this so wherever the div is ending here let me just paste it so guys you will you will see that uh let me explain to you what is happening here so first of all we are having this ng template we are giving a if condition so an else condition so if this is true which is display single image then this template will be shown to the user where we will loop through all images let me just uh for now let me just write this is image and if this is not true then this template will be shown to the user so now we will declare our else template this is very useful so for declaring the else template the template name will be similar to this so so we are passing this name here which we have declared here as single image template so here we will just say please upload some images so right here we need to declare all these variables inside our component so right here declare all these variables which is display single image this will be of type boolean so quick fix just do that just add the sign here to have this after that guys inside our constructor we will initialize the basic value of this this will be a false by default just do this and whenever we are just if you launch this application now it will say please upload some images because we are rendering this template whenever no images are there the current value is false so now else block is executing it so this template is showing to the user so when this value becomes true then this template will show let me just show you what let me manipulate this value to true whenever we got the data now we will make this value as true so we will say this dot display a single image to true so what now what happened guys if i choose file click upload button now you will see images uploaded this is image now we simply need to display that image inside that screen for displaying it so as you see inside our console we are getting some object which we passed here you will see we are getting the path here of the file so we need to simply we need to simply convert this object to an array so right here inside of our component for angular component we need to declare a variable which will be display single image array this will be a array by default array of type any so just again add the sign which is this symbol and now inside uh whenever we got the data guys we need to push this as this is the array so whenever we record this data so we will say this dot display single image array we will use the push method and we will push the entry which is response dot path that's it this is the path of the variable response dot path and now we will move to the app.component.html file so here we will instead of using this we will use the ng for directive so here we will use dialytic list item and here we will say star ng for so this is a for loop iterator inside angular inside we will say in single quotes let image in let image of single image array so whatever variable that you have declared inside this so this needs to be this this is you can see display single image array you can see this is the thing you need to display here single image array i think this needs to be same so we will change this to display single image array so we will say display single image array display single image array so i will change this to capital s this needs to be same so right here inside this guys we will contain a image tag in order to display the uploaded image so inside the source attribute we will say http localhost colon 3000 slash and then in order to dynamically have the variable inside double curly brackets we will write image that's it close the image tag that's it and that's it guys so if i now refresh the application you will see if i choose the file click upload let me see why it hasn't uploaded it cannot read properties of undefined push uh hi guys uh to resolve that problem it is very easy we need to initialize that array that we have declared here this display single image array similar to the boolean variable inside the constructor just write this this dot display single image array and this will be an empty array by default so just add this line and now basically if i refresh it's this application hopefully this will display that uploaded image click upload and i think the path click open a new tab it is denying it let me see if i go back to the so here guys oh sorry we need to make this directory as static so we will say app.use express dot static and we will pass this uploads directory so just to make this directory as static we are doing this inside this step so i think it should display it guys there was just a typing mistake right here inside this template you can see local host spelling is wrong here so just add this l here so that is my mistake so i make a lot of typing mistakes so that is why you can see now if i choose file click upload you now you will see the file image is uploaded if i upload the second image click upload now it will be concatenated you will see append it so it is not looking good so we can now just make a simple style here inside our app.component.ts css file so just target this is a file here so just target the image stack and give a fixed width of 400 pixel and also a height of 400 so just if you refresh it you will see the size is now there so you can see that now it is working for single pi a single image upload now we will work on upon multiple file upload so right here inside this template we will have another form so this will be over now so after this we will have second form for multiple file upload so if you just i will now copy paste some code here so if you go to the video description link this is very much similar to the first we have turned here so just we will have this so let me paste it so let me just remove all this so just to explain you what is happening here so we have again a simple form so this is the heading multiple and we are aligning its center position and then we have given same fields here for single input now we have multiple input this will again be a type file name images and here we have added a separate attribute here you can see multiple because we are uploading multiple images again we have on change so whenever this occur we will again make this very function which is select multiple image and we have a simple button which will when we click this button this function will execute on multiple submit and again we have a template all these two variables we need to declare and in the else we will say please upload some images so this is very basic stuff inside the template now we simply need to write the methods that we have so now we will write the select multiple image method so this when it is called here so we will have this event so again we have the same problem so just add this colon and any angular is a quite a very tough framework so you need to be abiding to the syntax and rules for each framework so now we will say if event dot target dot files dot length again the same stuff 0 is greater than 0 then we will just have this dot multiple images is equal to event dot target dot files so this multiple images i think we have declared it or not i think yes we have declared it you can see multiple images is a empty array you can see that so now we are initializing it storing all the images inside this empty array after doing this guys we need to now just write the method when we click the submit button so when we click this submit button multiple upload this function will execute on multiple submit so we will copy the function name and now we need to write this scissor function on multiple submit so again we will construct the form data object guys so this will be new form data and here guys we will use the for loop because there are multiple images out there so we will use the for loop so let image of this dot multiple images this is the array so for each iteration what we will do we will use the form data dot append method and here we will append files instead of file and for each image we will pass here like this so now the form data is ready now once again we will make the post request this dot http dot post and here we will have any here we will have the heading so i will make sure that i write the local host spelling correctly now localhost 3000 slash multiple files this is a route that we need to create multiple files put a comma and this will be form data form data that we pass form data that's it now we need to subscribe to this method so it will pass the response to us back to us you will just console log it for now so it is failed to compile because we haven't declared these variables so again we need to declare these just we have done for the single image display multiple images this will be of type boolean and display multiple image array this will be a empty array so right here inside this skies so display multiple images you will see display multiple images we have declared this variable you will see that so right here inside the constructor we need to initialize this display or this display multiple images array this will be empty and this dot display multi multiple image images this will be by default the value will be false so now we have declared all the variables it is compiled it so now we can open this so now you will see two sections out there first for single page and single file upload next next is multiple now i can choose multiple files so three files uploaded if i click multiple upload nothing will happen because we haven't made the post request so we need to go to the back end so right here we will once again make a another post request this will be slash multiple files and again we will have request response and we again use the upload this time we need to make some kind of adjustment guys so malta does allow us to upload multiple files we will have this variable multiple upload so malt so here we again pass the storage to storage and this time what we need to do is that we will use the array method array so here we will pass the name attribute that we have given inside of a front end so if you just notice here while we have constructing our form data we have passed this name files this needs to be same so that's it in the second argument you can also provide how many multiple files you need to upload limited so i will not limit it so now we will instead of using upload we will use multiple upload so multiple upload so request response error so basically first of all we will check for the error if error takes place we can console log it if no error takes place then we can say we can construct a image array this will be empty for now for each for each loop we will use and inside this will be equal to if i just console log it first of all request dot files basically this will be a array let me just show you let me just first of all do it refresh it choose files six files are uploaded so you can see now all these files are uploaded here so this is kind of a array it is holding each object having its own information so you will see all these images have been uploaded if i check the back end you will see all these images are uploaded let me just delete all these images click delete again delete it so once again if i do the process once again guys let me show you what if three files are selected and now you can see three files are uploaded three images are uploaded so this is a multiple file upload you will see all these there now we need to send back this data to the front end we can do this simply by constructing image array which will be empty we will use the for each loop this will be request files this is the array for each file we will push this data into the image array so image push file that's it now we have the image array we can simply pass this data response.json the path will be equal to image that's it this needs to be file dot file name sorry file dot file name we are passing the file name actually not the full path so that's it we are now passing images like this so once again if you refresh it if you select two images if you select now you will see in the console it will return the object holding the paths you will see indexing starts from zero one you will see this is our first image second image so now we need to simply up uh just display these images this is very easy so now we need to go to the front end so right here inside console log so first of all we need to clear out this input field so once again we will declare view child so this will we will call this as multiple input static to false and we will say multiple input element ref so inside this template we need to declare this so right here inside this input we have already declared multiple input right here so multiple inputs so here whenever we got this data we can distort multiple input dot native element dot value to nothing that's it so now if you upload the images it will automatically reset now you can see that so now after that guys we can display this data so we have this data called inside response.path so this dot display multiple images array so this i can just initialize it to this array response dot path it is actually a array which is coming here response dot paths let me check yes response dot path so once again we need to go to the app.component.html so here we will once again use the for loop so i can just copy paste this so so paste it so instead now guys we will have this variable display multiple images this is the variable display multiple images array because we this is the variable display sorry here we need to change it display multiple images array multiple image array not images image so now let me see if it is working or not if i choose so response dot path so why it is not let me see inside app.component we have response coming here so we have initialized it to let me see console.log response.path so once again if i upload it so this is the array you can see first and second so we need to simply loop through it so we are passing it display multiple image array so display multiple image array we have initialized it to empty array so and now we are looping through so let image of display multiple image array local host paneling is also correct image source so why it is not let me do it once again oh sorry one thing we are missing i forgot this thing we also need to make sure that we make this uh this boolean variable to true this i forgot this so this dot display multiple images to from false to true so this thing was remaining so once again refresh it select two images and now you can see our images are also displaying it right here on the screen you can select single image or multiple image right here so in this easy way guys you can just make out build your own angular 13 file upload application in node json express and the nice thing is that guys what you need what you can do is you can package your application into one individual block of application so we can now just stop our front end application and we can build this application for production so what we can do we can run this command npm run build so it will build this application for us and it will create a dist folder in the root directory so just make sure in the source directory it will create this folder so it is now building it so i will show you all the steps that is required for doing it so it is just generating the browser application bundles so now it has created that folder this folder so you just need to copy this folder so let me just open this inside open in file explorer so what you need to do is that guys so just copy this folder and move to your back end and paste that folder simply paste it so now you need to make changes inside your back end so you just need to make this folder as static so this test folder you need to make this a static folder so again you can write the same line which is app.use express dot static error name so you can use the path dot join method path or join name plus slash dot disk dot slash upload file there is upload file folder upload file that's it so just make this directory as static and now we can make a get request when we load the home page app.get home page we can show that html file so if you just see inside this test folder it has this index.html file this is like exactly the file that we need to load when we load the express server simply what we can do we can say here response dot send file and here we can say uh path dot join dirt name plus slash index.html so let me see if it is working or not so so it will restart the application let me restart it note more index.js so you will see localhost 3000 if i open this localhost 3000 so this is your application guys which is deployed here so we have packaged angular into one so this is the front end and back end into one if i choose this click upload the application still works if i choose multiple files click multiple upload the application still works so in this easy way guys i think there is no time for deploying to haroku so it is very simple process you can deploy this angular nodejs to heroku this i can you can do it by yourself so all the source code will be there inside video description so you can go to the video description download all the source code please hit the like button subscribe the channel and i will be seeing you in the next video

Channel: Coding Shiksha

Views: 9,758

Keywords: angular file upload, angular multiple file upload, angular node file upload, mean stack file upload, angular 13 file upload, angular express upload, angular express project, angular node express

Id: 61mXd0puocc

Length: 54min 26sec (3266 seconds)

Published: Thu Feb 10 2022