Upload images in Angular and Node.js using Multer

how to offer an image or a file to the server using angular and node we will see that but after the intro happy one this is a breath and you are watching from analytics on on this channel you will get to know about the programming languages the framework and all about the algorithm so please consider subscribing and hit that Bell icon if you haven't yet uploading file or files to the server is pretty needed for an application like a user can upload their profile images or any file that matters to the server by using this method so for here we are for the front end we are using angular and for the black back end you we are edging node and in noir we are as usual we are using Express to expose the service ok you can see it here and the multiplet the data so here I will explain the backend part first then we'll go to the front-end and I will send the file from there okay so here I have already written the code I will explain you the other packages where we are using the course and body parcel you may have know from my previous videos course is to avoid from the carceral body parts are is a fez the json object and transfer it back to the UI in a JSON format Express we are using to expose in the services and Moltar is the main part today and that we are using for uploading the images here I will upload a image you can upload any any file that matters so they were am sending some HTML from there so welcome to manna-fest with some images is there okay so on the get request I'm sending the stable text in the response so that's how this got printed here now we will come to the Moltar part so multi is a module for the Express so while you use multi in the express to upload file multiple file and it's pretty easy it abstract lot of code for us so for a developer point of view it's easy to use Moulton need in location why are you gonna store your files so there are two way you can give okay so if you want the multi to be like only two file upload then you process that file later you can directly give like this okay so it will go and storing the uploads but if you need some modification like in the file names and all then that is a method in multi is a dish torus which has we can give two parameter data destination and finding dish nation has name says where you want to store and that is request file and call back in the call back you can write the folder name like so applause is this one this folder you can see it here I have user so it will store the images or the file not sorry why I am saying images all the time it's any file that matters okay and the file name what I am giving the phone of heuristic and the file original name original name is the name of the file given by the user as I told you can directly provide the destination as this one or multi-disc arrays and the object you can pass directly here as a storage so now we'll go a single file upload and in Malta you can upload a single file or a multiple file here I have written a single file upload I will do the multiple file up to this one so this just after post that is just a HTTP POST call here this is accepting the upload so upload is the like I told you that the multi the you have instance eight mom Walter with a storage part that you are giving as a single so you are saying the multi the user will upload a single file to the server on this method call and as usual it has a request response and next value so here you can see we what we are getting we are getting a file which is form the request and that I'm logging just the filename I'm logging it here and this phylum will be with this one so in internally the this file name file get called this file name will get assigned to the file name then we'll get the file name here okay so whatever final M you want you can put it there with the date form our time timestamp random number I can do all the things there so here I'm checking if file is not there I'm sending an error message please upload a file or you can write no file I'm returning the nest error and it's this is not the case that means the file is uploaded to the server so I am sending a response as a okay the file is uploaded so we'll test this but for this I will have to explain the UI so we'll go to the UI part now like to the angular so this is just a normal CLI created file we have only one component here the app component and I am doing all the things in the app component if I go to the browser you will see normal just and nothing one file and one upload button and if you go to the component or TS here you can see that we have select image which will be get called on selection of the images like when you select and I'll show you so on selection of the images that means I were to go here to the file I'll choose this this file one one thumbnail of mine and this will get called okay now what this function will do it will grab the event so as as we are sending the event from here so it will check in the event the target that file has some file okay then if that has some file it will assign this to the image and on click up upload I'm some I'm this this on submit get called here the things is happening so here as the Moltar to go to the core the Malta will accept a form data in that form data we have to create in the angular ok so that's for that reason what we are doing here we were instance hitting a form data and in the form data we are appending with a name like just a key value pair name and images and one thing you should keep on the mind that this file the file you are saying here the name should be same with the name in the multi like if ever giving upload dot single file and this fire this name suppose you are giving here X then this would be X then this also should be X so that the multi will identify from from the form data so now think like you can happen n number of from data here so X Y Z so breath for nefarious take you guys anyone anyone can happen anything so how the multi will know that with the this key the cube key you provided to the multi you will try to access the file from the form data okay so I'll just hit control jerd and I'm passing that form data in a post request as my node Express is the accepting a post call here so we'll go to the browser now what I will do I will try to occur in image and when you and at the same time I will try to open the lock in here also and we'll keep an eye on the upload folder let's check that this is empty okay so we'll go to browser and hit upload and we got that the file a file name and lot of things are there now we will go to the upload here if we check this the file is uploaded now so this is how you will upload a single file to the server now I will going to do how we're going to upload a multiple file in a in a sort like here usually select C for file you will upload to the server so please hit the like button if you're liking the video till now and please subscribe and hit that Bell icon if you haven't done that yet so it will be helpful to you and to me as well we'll do the back and first then we'll go to the front end so here as I told you that Moltres support single and multiple file what I will do I will just copy the code here and I will just paste then in the upload in that in the previous one which said upload dot single here here will give uploaded array and they change these files - files so now we'll get the files from the response and just check the files it's not there where no file is there then we will return the files into the files the status here and I'll say ok now we'll go to the angular allocating one method multiple image in that also will pass the event okay and that will also remain same this dot multiple images because to the whole array what we are getting from the event okay by default the event the event will give multiple files so that in the previous one we are getting the 0th index as we need the one file only like I told you previously you can send you can happen multiple names like X Y Z and all you can I paint a multiple name also write for that alert Red Alert image of him a multiple images now what we will do will append the form data with files the multiple was I was already written multiple there so it should be here only I have did some error here and I fixed that one so that is one thing and I as well a copying I forgot is to change these two files as you are getting multiple files from the server so sorry I did that and one more problem was there in the code that you not get they will get the complete code in the github so here I uses like dot images which is wrong because I should use the loop iteration variable so here I am using the previous images which is not assigned yet so every time I am getting a null value there so now we'll see we'll go to the again again we'll check the server here I have only one image okay we'll go to the MA folder okay so six file and we just press it upload like you can see here we got the response back now we'll go to the server if you go to the upload you will see that we got all the files here okay so this is how you will upload a file or files to the server so here I upload an image and multiple images so you can use this thing to upload any any parameter and save it to your server so that's it for today today we saw how you gonna upload an image of files or multiple files by using multi yeah in node.js and as a client so you have use angular so hit a like button if you like all these things and if you liking my work and if you want to support me you can support me on the fret Leon I will give the link below and again hit the like button if you liked it subscribe to this channel if you have entered and don't forget hit that Bell icon so that you will get the notification when I push a video to the YouTube and share this video among her friends family to your teacher Madonna I am kidding too anyway anybody who want to learn the code and want to know the best practices in the industry we will going to meet in the next video in that stay happy bye bye

Channel: Fun Of Heuristic

Views: 42,294

Keywords: Angular, node.js, file upload in angular 6, file upload in angular 8, multer, node js multer, image upload in angular 8, image upload in multer, angular image upload, image upload node js express, image upload node js, formdata angular 6, formdata angular, file upload, image upload, node js file upload, angular 6, angular 2, lesson, tutorial, file upload tutorial, angular file upload tutorial, node js file upload tutorial, angularjs

Id: -Hvmj8yXfyU

Length: 13min 49sec (829 seconds)

Published: Tue Aug 27 2019