12. How to Upload and Display Image in Angular (Drag and Drop Images)

hello guys welcome to the next session of developing e-commerce application from scratch using angular and springboot in the last session we discussed on how we can show these uploaded image preview like we created this grid and we shown like whatever image will be chosen by the admin that image preview will be shown uh into this below section so we have seen how to create this image preview section in the last session itself now in this session we are going to see how we can create a drag and drop image area as well so as of now if admin want to choose any file then admin have only one option that is a choose files and alongside we are going to add one more option that is called as a drag and drop area so admin can drag any image and also uh like by dragging and dropping those images admin can upload the images as well so we are going to create and implement that functionality in this particular session and alongside we are going to make this ui bit more beautiful as of now these choose file buttons and this everything is not looking quite good so we are going to make some improvements in that as well so um without wasting much more time let me just go back to the visual studio code and over here the very first thing that we have to do is we have to design our ui so we have to design our drag and drop area so let me just go to these src app and then let me just go to my add a new product component inside this let me just go to the add new product component.html file so over here in the last session we like created uh this particular division this particular division is basically responsible to show the image image previews so over here if you see we have the input which is having the type is equals to file so this particular uh input type file is is nothing but this particular button that we are able to see this is a choose files button so similarly uh what we have to do is in the same area we have to just implement some uh drag and drop area so let me just do one thing let me just first of all create some area for me so that i can just write some code so now over here what i'm just going to do is i'm just going to create one division and over here for this division i'm just going to apply one class let's suppose a uh that class name is something like a drop zone so i'm just going to apply some styles for this division so this class is not created yet so we have to create this class in our css file so let me just go to my css file and let me just go to this add new product dot component dot css file and let me just add this particular class over here so dot drop zone now this drop zone is going to have some styles so let me just quickly show you what are the different styles that we requires so initially like i am just going to add some height to this class so that height might be let's suppose a 150 pixel and as of now i'm just going to assign those values and if something goes wrong or if something looks weird then we are going to change those values so height will be a 150 pixel and i will just apply the minimum width which will be of 100 pixel and then i am just going to display it as a table so let me just use display is equals to a table now let me just quickly uh add a background color as well so that we can just observe some changes on a ui so let me just add background color as a hash triple e so this is nothing but a light gray color so i'm just going to apply that color now let me just save these changes and let me just compile it yeah my already application my my application is already in running state so let me just go back to the google chrome let's see what it is looking like so it is basically looking like uh this particular box so now uh i just want to increase some width as well and alongside i just want to give some border as well so let me just come back to the vs code and let me first of all add width is equals to let's say 300 pixel and then let me just add one border so border will be let's suppose a dashed border may be dashed and then size will be a one pixel and color will be let's suppose uh this kind of dark gray color i'm just going to assign now let me just save this code let me just come back to the google chrome yes now this particular area is looking quite good and i just want to do one thing i just want to make the border i like i just want to give some corners to my border so let me just assign a border radius so let me just come back and let me just assign a border radius and that will be of that will be of 10 pixel let me come back to the google chrome yes now it is looking quite good and the only thing that we have to do is we have to take uh this area into the middle like we want to take this at the center it is currently it is left aligned so we want to take it as a at the center so for this let me just assign margin left is equals to auto and margin right is equals to auto and now let me just save this code let me just come back and yes now it is looking perfectly fine so our area is looking perfectly fine in this particular area we have to give some text as well right so we have to give some text like um drag and drop your files here or maybe drag and drop or browse a files here so something like the text that we have to give so let me just show you how we can give those text as well so for this let me just come back to the vs code again and let me just go to the html file over here inside a drop zone like inside this drop zone we have to apply one more division like this and then we can just give whatever text we have right now so let me just give it as a let's suppose drag and drop your file or browse a file or browse file something like this so let me make it as more correct yeah browser fine and now let me just save this code let me just come back to the chrome and yes as of now this particular uh text is looking like this so now what we want to do is we want to take it as a horizontally and vertically at the center so you want to ah take it in that way so let me first of all do one thing let me just uh create one more css class and then let me just align uh let me just apply that css class over here so let me just do one thing let me just apply one class let's suppose uh text may be something like a text wrapper you can give any name basically but that name should makes some sense and now let me just copy this name and let me just come back to the css and let me just use dot text wrapper and then let me just make it as a display is equals to table cell and after that let me just use vertical align is equals to middle like this and now let me just save it let me just go back to google chrome and yes now it is a vertically at the center but similarly we want to take it as a horizontal center so for this again we have to apply one more class so let me just do one thing let me add one more division and inside this division let me add this particular text and let me just apply one more class that is called as a let's suppose centered like this and now let me just copy this class name let me just come back to the css let me just use dot centered and let me just make it as a text align is equals to center like this and now yes it is looking perfectly fine so now if you see like we can drag and drop images on this particular area but we have this browse button as well so we want to make this button active as of now if you just click on browse nothing happens so we want to make it as active and whenever someone will click on the browse button then uh it should open our uh basically like it should pop up our files section where we can choose the files so that section we want to use so now let me just do one thing let me just go back to the vs code and over here for this browse let me just apply some styles so let me just apply some styles for this browse itself so let me just uh first of all make it as a anchor tag and inside this anchor tag let me just put my browse text like this and now what we have to do is we have to give a click event for this anchor tag so whenever someone will click on this anchor or maybe the browse then we have to give the click event so on the click of these particular browse button what we have to do is we have to just call our input button so whatever we have input button previously created the same input button the same thing that we have to call when someone will click on this brown browse button so over here previously we have created uh this input uh button so the so what we have to do is we have previously assigned a name that is a select file to this input button so over here what we have to just do is we have to just copy a name so don't need don't need to copy the hash just copy a name like select file like this and then let me just use dot click so click is a function so we have to use a bracket as well now let me just save this code let me just come back to the chrome and now let me just click on this browse let's see what happens so yeah now whenever i'm just clicking on the browse button so it is giving me this a finder window where i can just choose some file and i can just see the preview as well but now as we are using this browse button we don't need to show these a choose file button so that's the reason we have to hide this button as well so for this let me just apply one style so for this input type is equals to file i'm just going to make it just apply one style that is a display and i am just going to assign like none display is equals to none and now let me just save this let me just come back and yes now choose file buttons is not visible but if you click on the browse button it is opening these finder window and you can just choose any image that you want so it is working perfectly fine and as expected but again if you see like there is no any special styles for this browse button and we are not changing our cursor as well so any normal user will not be able to get that this browse button is clickable so we want some styles so that user will get to know that this browse button is clickable so let's apply uh some styles as well to this browse button so for this anchor i'm just going to apply some class let's suppose i'm just going to create one class like browse dash button and now let me just copy this class name and let me just create that class so let me just come over here and let me just make it as a dot browse button and then the class that and the styles that i'm just going to apply will basically apply we will basically apply some maybe a color or maybe we can make it as um let me just think on this so maybe we can just apply let's suppose color and maybe let's try a blue color let's see what happens ah let me just go to the google chrome and yes the blue color is looking perfectly fine and user will quickly get to know that yes this particular button is a clickable and i just want to assign a cursor as well because i just want to make it as a pointer so let me just come back and let me just make it as a cursor is equals to pointer like this and now yes now it is looking perfectly fine and cursor is also changed and this browse button color is also changed so it is looking perfectly fine obviously if you want you can just apply some other color and other styles as well to this entire area so everything is looking perfectly fine the only thing that we have to do is we have to just um we have to just create one directive so that whatever images we will drag and drop over here those images should be uploaded successfully so as of now like if you just try to drag and drop image it will not work because this particular area is still not active that's the reason it will not work it is just opening uh whatever image we have we are trying to drop it is just opening in the new tab but that is not expected functionality we have to make this drag and drop area active so for this what we have to do is we have to create one directive so let me just quickly show you what kind of directive we have to create and then um what are the contents that will reside into that directive so first of all let me just stop the current execution of my uh of my application so let me just use control c and it will stop the current execution of the application so over here we have to write one command that is ng g or maybe you can just type generate directive and i'm just going to make it as a drag i'm just going to give the name as a drag so it will create basically a drag directive so let me hit the enter and let me just wait for a couple of seconds so that it will create a drag directive so now drag directive is already created now let me just close this terminal and let me just go to the files and now if you see this file is created that is called as a drag dot directive dot ts now again over here this particular directive inside this what i am just going to do is i am just going to apply or write some functions which will be responsible for every single event so for it will be first of all we will create one function which will be responsible for a drag over then we will create one more function which will responsible for drag leave and then we will create a third function which will be a responsible like when actually image is dropped so there will be three different functions and again as of now you might get confused but trust me whenever i will write those function then you will get every single thing so as of now maybe i'll just try to explain the functions but if you are not getting like what i am trying to explain just write the code code as it is and at the end you will get every single thing then let me first of all create one function that is called as a on drag over on track over this function is going to create this function is going to take one event as a parameter and that event is nothing but a drag event like this so this drag event is basically provided by the uh angular itself so we don't need to worry about this like we have to just use a drag event then again we have to use a couple of uh decorators so first of all we have to use a decorator that is called as a host listener and then inside these inside these we have to give a parameter that is called as a drag over like this now after this what we have to do is we have to just bind one event so let me just use and let me just bind a dollar event like this and now inside this curly brackets what we have to just do is we have to just use event that is evt dot prevent default so these are basically functions which are provided by the angular and which are basically related to the event itself so if you want to check out the description the simplest way is you can just hover on this function you will get the all the information which is uh which is which will explain you about these prevent default function so in that way you can just get all the information that is required and then the next step that we have to is we have to just call one more function that is called as a stop propagation like this and at the end we have to just apply one background color now over here i haven't created a background color variable so let me first of all quickly create one variable which will store my background color so let me just use private and let me just make it as a background and initial value will be let's suppose hash tripoli which is a light gray and then what we have to do is we have to give again some decorators so let me just use a host binding and then let me just make it as a inside double float double quotes let me just make it as a style dot background like this and now let me just save this code and inside this whenever this particular event will occur which is a track over what i'm just going to do is i'm just going to change my background color and i'm just going to assign one new value that is called as a hash triple line so all these color codes are basically a different shades of a gray color so one is a light shade a shade of grey color one is a dark shade of gray color but of all these shades that i am using are shades of gray color only now this function is created for a drag over let me create one more function that is public and on drag live like this again this function is going to take one event so let me just use evt and that will be of type a drag event again like this and again we have to just use address host listener on this function so let me just add add red host listener and then over here we have to just use a track leave comma and then again we have to bind one event so let me just use dollar event like these and now again we have to call the same functions so let me just copy these ebt dot prevent default and ebt dot stop a propagation and then after that i'm just going to again change the background color like this now background will be a back to the ee like these and now lastly i'm just going to create one more function when actually files will get dropped that is called as on a drop this function is again going to take one parameter so that parameter will be again one event itself so let me just use evp and again which will be of type a drag event like this and then again we have to use the host listener so let me just use address host a listener and let me just use a drop and again we have to just bind one event so let me just use a dollar event like this and again we have to just call these two methods like stop uh propagation and prevent default but after that we have to just assign a background as well so this dot background is equals to and i'm just going to make it as triple e only like this and after that we have to write some logic so this particular function will be responsible or will get called when the file will get actually dropped so when file will get actually dropped so that time what we have to do is we have to emit those files but again as we have seen previously we are not going to emit files as it is we are going to emit those files in the form of file handle so file handle is basically a interface that we previously created it is nothing but like what like if i just try to show you the file handle so file handle is an interface or maybe a model that we have previously created so over here this particular file handle takes two different uh values so first will be a file and second will be a url so this file is nothing but actual file and the url is nothing but a url which will represent to this file so url will be required when we want to display those uh files in our uh you know preview area or display area so for to display it on the ui we require the url that's the reason we are storing it in that that way so what i'm going to do is i'm just going to use a let file which will be of a file handle which will be of type a file handle so over here it is not giving me the suggestion sorry but yes we will just import it and then we will just make it as a null like this so it is giving me the error on a file handle so it is not able to recognize where my file handle is basically stored so let me just do one thing let me just uh write the import by myself so let me just use import and then let me just make it as a let's suppose dot slash um or maybe what we can just do is import file handle from inside dot model slash file handle dot model like this and now let me just save this code now let me just come back below and over here what we will just do is we will create one uh object or maybe we can give some specific name as a file handle only so that it will be easy to understand so we will just create a file handle and initially we will assign the null value and after that what we are just going to do is we are just going to use ebt dot data transfer dot and then we have to use if files this files is nothing but array but we are going to use zeroth index file so over here uh we are just like file is nothing but array like we can have the multiple files but as of now we are just going to take a zeroth index that is a very first file which will be present into that array and after that we are just going to store it in a variable that is called as a const file now after uh using this file or after uh taking this file we have to create a url as well and to create a url we require a dom sanitizer so let me just inject that dom sanitizer so private sanitizer you can give any name and let me just use a dom sanitizer like this let me just come back and over here i'm just going what i'm just going to do is this dot sanitizer dot bypass security trust url bypass security trust url inside the brackets we have to just call window dot a url dot create object url and then what we have to do is we have to pass our file as an input now this particular function entire function is going to return us the url so let me just store it into a url variable like this and then what i'm just going to do is i'm just going to assign file handle is equals to then what i'm just going to assign a file comma url like this and now whatever file handle we will create we have to just emit that file handle so again to emit this we have to create one property uh which is which will be a image event emitter so let me just create that property so inside this uh yeah so inside this at the top let me just create one emitter so let me just use at the rate output so at the rate output and add that input there are two different decorators so these decorators are basically useful when you want to communicate between the two different parent and side components so that's the reason we have to use added rate input and add that output decorators so let me just use if files so this is the name you can give any name i will be using event emitter so let me use event emitter so what it will event it will what this uh event will emit it will emit the file handle so that's the that's the reason we have to give a type that is a file handle is equals to new and then event emitter like this and now let me just save this code now over here i'm just getting one error let's see what happens so the type event emitter is not a generic okay so maybe we can just keep it as it is right now and we will just come back to this as and when required so let me just come back below and over here let me just use this dot files dot emit and then over here we have to just emit my file handle like this and now let me just save this code so over here again uh i was just expecting like as soon as i just uh read i just write this particular line i was expecting that this error should be resolved so let's see what this error is again saying so it is basically saying that uh the import file handle and then it is saying type event emitter is not a generic so let me just try to do one thing let me just try to remove uh this particular file handle from here and let's see what it basically does it it is again basically giving us the same in the same error so let me just try to do one thing let me just see my import line so it is basically we are inputting this from a stream and i think uh we have done some wrong things over here so we have to import it from the at the red angular slash core and now let me just try to do one thing let me just apply a file handle over here and yes now error is vanished so the error was not here the error was in the import line we were importing the wrong event emitter that's the reason we were getting the error so now our directive is completed and every single thing is done so now let's do one thing let's copy this selector which is app drag let's copy this selector and then what we have to just do is we have to come back to our html and inside the html what we have to do is we have to uh we have to give this uh what we say a selector that we just copied now in the drop zone division i am just going to give this directive which is a app drag and then lastly what we have to do is we if you just remember we have just created um this particular file and we have created an event emitter so we have to um what we say so we have to just uh bind these files inside this html as well so how i'm just going to do is i'm just going to use a files which is my event emitter name and i'm just going to bind it which is a uh which with the help of this rounded brackets and then what we have to do is we have to create a function so let me just create one function that is called as a files a file dropped and then again it will be a event so let me just you use a dollar event like this and now let me just save this code and again this function like whatever function we have just uh used over here this function we have to create in our add new product component.ts file so let me just come to this add new product dot component ts file and at the end let me just create that function again this is going to take one event so let me just use the event and then the last thing that we have to just do is we have to like whatever um event we are getting over here then we have to fetch uh whatever event that we are getting over here from that event we have to just you know this particular event so in this event we will get basically object of file handle so the same file handle object we have to push it into our uh product array so maybe instead of the event what we can just do is we can just give some proper name like a file handle which will be of type a file handle that will be a more specific but inside our html we can just keep it as a dollar event only so we can just keep it as a dollar event only let me just come back to the ts and let me just do one thing this dot product dot product images dot push and i'm just going to push my file handle object so over here if you see like we have previously created this particular product and this product contains the product images array this array will contain all the images so that's the reason i'm just pushing my file handle offset into the product dot product images so now let me just save this code and i think we have done so we can just check that out like how our code is currently working on our ui itself so now let me just start my application like npm run start like this and let me just wait till my application starts and if your application is not stopped already i will request everyone that just stop the application because we have done a lot of the changes just stop the application and just just restart the application so that everything will remain smooth and now our drag and drop area is looking quite good so again we haven't done anything so now let me just drag an image and let me just try to drop the image now if you see whenever we are just uh coming on to this drag and drop area the color is getting changed so it is basically a dark shade of the gray color and if you remember in our drag and drop directive we have wrote three different functions and in the in those three different functions we were setting the background color and this is happening over here so if you see like whenever i'm just um whenever i'm just leaving this drag and drop area the color is again back to the light light gray but whenever i am just coming to this drop area the color is getting dark gray so these all these things we have done into that directive now let me just try to drop the image let's see what happens and yes as soon as i drop the image we are getting the image preview as well now let me just try to one thing let me just try to drag and drop one more image yes it is working as expected let me just try to browse one area uh browse one image from the area and yes that image is also working as expected let me just do one thing let me just browse one more image and yes it is also working as expected now this particular first image i didn't like this image so i just want to remove it so let me just try to remove this particular image and yes it is also working as expected now let me just fill up the form let's suppose iphone 13 pro max inside the description let me add the same actual price let's suppose one lakh rupees and discounted price may be a 98 000 rupees like this and let me just click on the add product let's see what happens and yes our form gets reset but our images are not getting reset so we have to reset it manually so i i'll just explain you how we can do that as well but as of now let me just go to my mysql and let me just try to see whether my images are stored or not so we just added one product that is iphone 13 max pro max so yes that product is added and the product id is equals to one if i just go to the image model table then yes three different images are added and yes previously we added three different images so three different images are added and if you just go to the product underscore image table then yes with the for this product id1 we are able to see three different image ids like two three and four yes from the database perspective everything is looking perfectly fine the only thing that we have left back is we have to reset our image area as well which is similar to the form so for this let me just come back to the vs code let me just go to the ts file and over here let me just go to the add new product function so over here we are just doing product form dot reset after this what we can just do is we can just do this dot product dot product images is equals to and we can just assign one empty array like this and now let me just save this change and now let me just come back to google chrome this time now let me just try to do one thing iphone 7 and let me just give a description as iphone 7 only price is nothing but a 50 000 discounted price is nothing but a 48 000 and let me just browse one image like this and let me just try to save this and after saving i am expecting that my form should reset and my images also should reset now let me just click on add product and yes everything is looking perfectly fine and everything is now now working as expected and again if you just check to the database those images will get saved so let me just quickly check into the database uh and let me just rephrase this product underscore image and yes for this product id five we have two different images like six and seven so everything is working perfectly fine so i hope you got an idea around this like how we can create a drag and drop area and i just tried to explain every single thing but again explaining every single thing like whatever we have wrote into this drag and drop directive may not be possible because it is totally out of the topic and out of the uh out of the subject that we are going to discuss in this session but again if you don't have much knowledge just you can just type the code and from name itself you will get most of the things but still if you have any questions let me know into a comment section i will try my best to help you out in that case and i hope you enjoyed this session and i will see you in the next session

Channel: Learn Programming Yourself

Views: 15,024

Keywords: learn programming yourself, learn programming yourself ecommerce project, spring boot ecommerce project, angular and spring boot project, spring boot and angular project, ecommerce website using angular and spring boot, ecommerce website using spring boot and angular, e commerce application development, angular spring boot project, angular spring boot full stack project, e commerce application development using angular and spring boot

Id: VQaYDSPSTtU

Length: 38min 24sec (2304 seconds)

Published: Sat Jul 09 2022