Multiple image upload and preview in angular cli || Angular || Angular Tutorial || Image Upload

anyway students were also how you can upload a multiple diamonds and so the people of this images so here I was at a custom code and I will explain how the code is over so let us see an example so first of all I will go to the features to do code and here I will let in it cat and I will bind the source property of this image so who is your square bracket to bind so for records for source equals and the variable name is URL and close so when I will upload any images then the image will be added into the source property so we use square vector to bind this source property and when I will upload a multiple image then the source property will be increased one by one so to increase one by one so let ng for loop so ng for the first two inverted comma and late wait we want to increase this source for what XO q oil variable for and wireless variable wireless variable will be looped one by one so now I will copy this voice variable and in the TS v is called the page and here is danger on it and below the indian in it i'll paste this reverse variable in question Eric I use he was variable as the added because in the source property he'll will be added multiple images so I use this verse as a adding and now here let it be a step wave this line and now our greater input type file to upload image and here I'll upload multiple image so I let the a food is multiple multiple at reduced my upload multiple in and now here pan thesis and I will let us change function before so when we upload image this time we write a change function shown that a comma and the function name is on the left and parenthesis you can writer in the name of this firm hug them and in the JavaScript and jQuery for separate this event we use disclose what but angular providers to Allah even instead of these QR and now I'll copy this one to left and here I'll paste so in this one to the function to pass brawler event to say fight this event so now the TS file in this on to the function we have path left and the parameter so I will latter the parameter name e yeah our letter if condition to leave e is the parameter dot target specified this event to be dot target dot files files is the in build of JavaScript method so we use files method to get the drawn property of input type files so now a lighter for loop because it will be added multiple images so later the for loops for left I equal to 0 I less then file dot length and I plus the so that means the image will be uploaded up to I'll dawdling and file is the property of input type 5 so we use your file so that means we can get the file property because we use file to get the property of input type file so now we give the file properties of file dot length I plus plus and now here I will create object pi leader so far Vida equals 2 this is the variable data variable and I will create a new file leader object so this object will be read it our uploaded files and leader dot need data you are so read as data world will be reached URL our our target file so e dot target door files square bracket I I is the five available and now three the dot onload because to the proprietor another parameter so are lighter events diameter and events tie with any because you can upload text file image file etcetera so even Stipe is in and this is the arrow function so I use tear earphones and arrow function is an egg mesquite v6 this is the new JavaScript content so now beef dot this see well this variable dot push so for outpost our target images into the u.s. forever so I'll copy these events dot target dot result result is not in the inbuilt of JavaScript method to get together now press ctrl s to save and in the HTML file I will respond to this to save also and now I'll work this browser and here now our lab load multiple image so I'll paste ctrl to select multiple image and open so you can see here is the room it is if uploaded but it's appeared as a big size so I will say the height act acute I 100 now let us see so now if I upload multiple limits so you can see it's added two images so hope this video is helpful for you and if we want to get more this type of angular videos so then please subscribe and pacer notification be like ah nuts

Channel: Creative Developer

Views: 17,330

Keywords: multiple image upload and preview in angular angularjs, multiple image upload and preview in angular app, multiple image upload and preview in angular application, multiple image upload and preview in angular bootstrap, multiple image upload and preview in angular browser, multiple image upload and preview in angular component, multiple image upload and preview in angular editor, multiple image upload and preview in angular event, multiple image upload and preview in angular example

Id: U_mMkkcd8GE

Length: 7min 46sec (466 seconds)

Published: Sun Jan 19 2020