How to upload Image in Angular | Image Upload in Angular | Angular Tutorial

hi guys so in this video we'll see how to upload an image in angular so i've created this uh project in stack build so we'll start with the html first so i have created one image so url i will give you in the component file so i will remove this one i'll give url so i have one image url here so i will copy this one now save it so i got this one url now i will add one upload option so i will type here input type file and go with the id let's say img image then we need a event so it won't change i'm going to call this one on select in the argument available event okay so one select is not there so we add this method in the component okay this so you give the variable name so i'm giving here event so now you can see here we have a choose file option so you can choose the file that you want to upload but we will go with our custom button so i will add one style here to make it none display not i'll save it now in label i'll create one label so in label i want to give 4 is our id name which is image and here i'll give the name upload image right now i have some custom css or my button copied paste in here okay so we need to make it good create one container display flex direction i will take column so i'm gonna just insert a div here will be class as container i will cut this one base inside the spear okay it's going outside okay let's see this uses make it less than 98 okay now it's fine so now css part is fixed now and click this one it will show me all the files but i need only uh for the image part okay so we'll go to component file here you will write a console method so we'll first check event dot target dot files first foreign okay now if file is there we are going to read this one we have where so we'll define one variable let's say reader so new file reader now reader dot only has a method reader okay read is data url so here we need to pass the file even target dot file zero now we have to call radar download we use this function fatal function passing the argument as event giving the type any using the fedora function now here we will assign the url of the current image that we are going to upload so we'll give this event dot sorry tab target dot result okay now this part is done now we're going to check our image okay it's not uploading let's check the material here let's give change i'll save it again now i will upload the image now it's uploading right now i will upload another image so they're also uploading it but if i select the pdf any other format here we are getting this as enough so it is not showing so it's handle this scenario as well so i will check here before this one if i will give here one variable let file type file type i'm giving as event dot target dot file zero dot type now here i'll check if it is matched with the image or not so we have type match and then we check with image image so to use forward slash hyper given backward slash and for all the types i am going to give star and then one more forward slash that will check the type here if it is a image type then only it will do so this is condition is closing here so right one else condition to check i will show on a lot meshes let's save into a dollar and here i will give message please select correct format correct image format save it now we'll check so we are getting please select correct which one that's uncorrect right so what else so here you can see we are all um all type of file we are getting but we only need a image file so we can do one thing an html file here we can write sorry we can check for a step condition so we are checking only for images and we are checking all types whether it is a png jpg so i will save it now click on upload image okay not coming oh my added one next stress okay only image now i click load image now i'm getting image only but even if i select all files if i select certificate this is a pdf format i will get one in dollar please select correct image format right so if i select uh whatever this one is on jpg this one is uh gi format so this is all supporting this one is png if i open this one it's also selecting this is another um gif image so all is working so one more thing if you don't want to [Music] go to the component why if you want uh certain types of uh format only let's say you want only a jp g format only you don't want a png or gif so you can give it here jpg then you click on upload so if you click on png file it says please select that image format let's go with the png file here also we are getting same and if i select another gif format same as i'm getting but if i select a jpg file new pj format it's showing me uploaded image so that's all for today thank you have a great day

Channel: Buddy Tute

Views: 7,367

Keywords: How to upload Image in Angular, Angualar Tutorial image upload, Image Upload in Angular, upload image with preview in Angular, Angular tutorial, Learn Angular with image upload

Id: TKUtDpe0HG0

Length: 10min 37sec (637 seconds)

Published: Wed Dec 29 2021