How to Upload Image in Angular 5 With Web API

quick demo of this tutorial in this tutorial we will discuss how to upload images from angular 5 application into a Web API project server so here is the final output of this tutorial in order to upload an image you can select the image from this uploader then corresponding image preview will be shown inside this IMG control here you can provide the image caption here and click on submit so it will be uploaded to Web API project corresponding image will be saved inside this image folder in Web API project corresponding to the image upload we will insert a new record in our database here so from this tutorial you can learn almost everything related to image upload in angular 5 with Web API so please watch till the end of this video tutorial what's up YouTube welcome to dotnet move in this video I will show you how to upload images in angular 5 with API before starting this video tutorial I would like to ask you a favor if you found this video helpful please thumbs up this video if you are new here please be subscribe to this channel dotnet move without further ado let get started first of all I want to create an angular 5 application inside this project folder here so let me copy this folder path from here and back to the IDE and click on file open folder and then paste the path here hit enter click on this select folder in order to create an angular 5 application you can use angular in like a man in your command prompt or you can use the integrated terminal from this IDE for that you can go to view then integrated terminal in order to create an angular application you can use this command ng new then application name I will just type it as angular 5 hit enter it will take some time to complete this process first of all it will create triangular form application after that it will install some default packages from NPM so here we have successfully created an angular application now let me run this app occasion for that first of all we have to navigate into the project folder angular file then you can use this command ng so double - open hit end up so it will compile this application and open in our default web browser so this is how the default angular form application looks like now I'm going to design this application using materialized CSS so here it is here we have the latest beta version 1.0.0 and here we have the corresponding statute and javascript preferences so I'm going to add these reference inside the index dot HTML file here first of all I will add to stand sheet here one for materialized CSS and this is for the material icons it's no phone over some icon we will use material icons from Google and before this body end tag we have to add to our script reference so first of all we have the jQuery library here and below that we have the JavaScript file for materialized framework so this jQuery file is a requirement for this materialized CSS JavaScript file now first of all I am going to start with creating an angular file component for there let me open one more terminal here and first of all we have to navigate inside the project folder and we'll now file then you can use this command ng D for generate C for component I will name this component as upload image so here we have successfully created the component inside this app folder upload image now let's customize the application design first of all as you know the root component of an angular application is app component so here is the corresponding HTML file I'm going to replace this default HTML with the newly created component selector that you can copy/paste from here let me copy this and paste in here and we have to create a tag with this now let me saved this and back to the component HTML here so here we are going to create a form to upload images so first of all we need a do with glass container inside that we need another do with glass so it's like the grid system from bootstrap framework so first of all we are going to use the grid classes called as age and we need an offset of two columns so we need to use this class offset - - now before the image upload phone I want to show a title like this so here we have the do with classes from framework material in CSS here we have an h4 header inside that we have shown this header image library now let's design the form form you don't need this action attribute here instead of that I will add a local reference image form is equal to ng for inside the form we need to add some controls you can see some examples from framework documentation here so here we have some nice examples for using input controls in our form so first of all we need a div with class row inside that we need another deal with class input - field then call s12 inside that we need an input text box input we can use this text box to end or some caption for this image so I will give the location of friends as caption here then we need to give the ng model attribute here and we have to set the name attribute as caption here and I will set the same as the ID attribute also caption now let's add a label for this input text box label and we have to set this for attribute as the same ID as that of this test box and I will set the text as caption here now below this caption text box we need an image uploader like this so here we have the input tab will be filed and here we have given a local reference image except attribute has image forward slash star so we can only upload images using this input file control before this image uploader I want to show an IMG ctrl to show the preview of uploaded or selected image so here we have the IMG ctrl and here we have given some width and height for this IMG control sorry here we have to move these controls related to image uploader out of this the raw so here it is and finally we need a submit button so here it is button type of this button will be submit ok then we have to give some classes from the framework BTN - large than BTN - submit and inside this button we have to give this text submit so here we have completed with a form with file upload now in order to work this form we have to import forms module inside the app module dot ES file here you need to add this forms module class inside these imports all right here let me save all of these modifications and back to the application here so here is the text box to end our captions and here we have an IMG control to show preview of image uploaded through this image uploader now we want to show a default image in this default IMG control for that I will add a property inside the typescript file upload image component image URL it's of the type string now we have to initialize this property with a default path for that I'm going to add a new folder inside this assets folder here you folder I will name this folder as IMG I want to save a default image inside this IMG folder for that I will drag this image from my desktop and dragging and dropping inside this IMG folder here now I am going to initialize this property with the new image path so here it is at sets folder inside that we have the mg folder inside that we have default image door PNG I'm going to add the SRC attribute here SRC is equal to image you are let me save and back to the application here so here we can see the default image now when we select an image using this image uploader you want to show the particular image preview inside this IMG controller for that back to the IDE here inside this typescript file I'm going to add one more property here I will name the property as file to upload and it's of the type file and back to the HTML I am going to add one on change even for this IMG control so here it is here we have the event change and we will call this function handle file input into that function we have passed this event target first that being selected file we'll be passed through this function parameter now we have to define this function inside the typescript file here for this function we have a single parameter file it's of the type file list file list first of all I will set this property with the selected image so we can do this this dot file to upload is equal to file dot item function can be called inside that will pass zero so we will get the force image now in order to show the selected image preview we can do this for surfer we will create an object or file reader and here we have implemented onload even for this reader inside that we have said this image URL property with the corresponding selected image you are in order to cause this even we have to call this function read as data URL so inside this property we will have the reach or URL of the selected image you see that we will show the image inside this IMG property here so really here we have to move this even into this input file control okay now let me save all of these modifications and back to the application here now select an image for upload you can see the same image inside this IMG control now let's deal with form validation these two fields caption and this image are mandatory for that we can add required attribute to this caption text box required attribute own work with this input file control for that we have to look for another strategies so when this form as the hole is not valid we will disable this submit button for that we can add disabled attribute for this submit button here this button will be disabled when this image uploader control does not have an image for upload or this form as a whole is not valid image form means this form here we have the local reference for this form so this form won't be valid whenever this caption text box is empty now let's try that let me save these files here and back to the application here initially you can see that this submit button is disabled already now if I try something inside this text box you can see that this button won't work let me clear this caption text box and try to select an image for upload here still submit button is not enabled in order to enable this submit button both of these fields must have a value okay so here it is now let's check how we can post files or images from angular 5 to s server for that we need to create a web api project so here we have my Visual Studio IDE in order to create a Web API project you can click on this new project here then select web under we should see shop then select SP dotnet web application I will name this application as Web API then select a folder for this project then click on ok then select web api keep other options as it is click on OK so here we have successfully created the Web API project now in order to run this application without debug you can hold ctrl then press f5 now inside this will be bi project we will create a Web API method to post image files from this angular 5 application now in order to communicate with these two projects we have to enable course inside this Web API project it will allow request from another website which is hosted in different port number or different domain so in this case we have two different ports so we have to enable cores inside this Web API project for that we have to install some nu get packages select the web API project then go to tools then library package manager then pack each manager concerned now in order to install the package you can use this in you get commands commands use it inside this video tutorial are given in video description you can copy paste from the so let's install the package now let me build this project again and back to the application here some of you may get this problem so here we have a version problem with Web API Co and will be PR course package in order to resolve this problem we have to install the latest version of API for that first offer we have to execute this command update package Microsoft dot s p.net dot Web API re install after that we have to install the latest package maybe P ICO hit enter I have given these three commands in video description you can copy paste from them finally we have to build this solution and back to the application reload this page now everything works as expected now we have to configure this Web API project in order to accept request from this port number four thousand and two hundred for that you can go to this folder app star then open this file web API config dot CS file then we have to use this line in order to work this line we have to add the required namespace so here it is system dot web dot h TT pecos so it will allow request from the localhost four thousand and two hundred in order to upload this set that image inside this Web API project we have to create a Web API method for that let me create a new controller here right click on controllers folder then add controller then select by BPI - controller empty I will name this controller as image controller click on add now let me create a new web api method here so here it is upload image and it's of the type HTTP POST and here we have the corresponding route now in order to save the details of image name and caption provided inside this text box we need to have a database so here is my management studio let's create a new database for that right click on databases then click on new database I will name this DB as image library click on OK inside the database I want to create a new tab I click on tables then new tab for so for we have image ID it's of the type integer then we have image name it will be walk 50 and we have image caption it will be work 50 now I want to make this image ID column as the primary key so I click on it then set primary key I want to make the same column as an identity for this table so we can go to the column properties then expand identity specification then set its identity as yes in order to save this table you can use this shortcut control s I will name this table as image click on OK now we have to add an ID or ordinate entity model into this Web API project for that right click on models folder here then add new item select data from the left panel then select ad or dotnet DD data model I will name this model as DB models click on add select generate from database click on next now click on new connection here we need to provide the SQL Server instance details so for me it is local backward slash SQL e 2000 tool and from this drop down we have to select the database image library click on OK after creating this entity model there will be a class with this name in order to interact with this database we have to create an object of this class so I'm going to edit the class name here DB model click on next click on next from this model with that window we have to select the database objects that we need to add in our entity model in this case I will select this image table then click on finish so here we have successfully created the entity model this is how the diagrammatic representation of entity model looks like now back to the image controller now inside this way baby I met there we have to upload image that sent from this angular 5 application into this Web API folder image I have created this folder just to upload images from this angular application after saving the image into this image folder we have to insert a new record containing details of containing image name and caption from this - box into the database that we have just created for that we can make use of the entity model class image here so let's look how we can do that first of all I will declare two local variables like this here we have the string image name after that we have HTTP request for that we have to use the namespace system dot web so inside this restore the current request okay after that we have to upload the image ok upload image for that we can use this code here first of all we will save that image inside this posted file image name property inside that for surf or maybe store the image name for that first of all we have to use the namespace system dot IO so here we will take the first 10 character from the image name and we will replace the whitespace with - in that image name after that we will append the day time string to this image name in order to avoid the reputation in file name after that we have abandoned the file extension here so inside this image name property we have the custom image in order to avoid reputation in image name inside this image folder and here we have the complete part for that image inside the instead of images we have image folder inside that we store the image with this custom file name and here we will save that image into this image folder here after all we have to insert a new record containing image name and caption text for that we can do this for that here we have an using statement inside that we have created an object of DB model class here we have created an object of image class and here we have populated details from the textbox caption - box and here we have the uploaded image name and using these two lines we will insert the new record finally we will return the status code to not born indicating a court is created so here we have done with the BPI project now back to angular 5 application in order to post at us from this form into this Web API method here we have to wire up a function for ng submit event so back to the component HTML file here now let's add an ng submit event we will call this own submit function inside that we have passed inside that we have passed local reference for this caption text box and for this file upload now let's define this function inside the component type script file here on submit inside that we have two parameters caption and image now in order to consume this Web API method here I am going to add a service class inside this angular application in order to create a service class I will create a new folder here shared inside that we can create service class I click on it then open in command prompt in order to create a service class you can use this command ng G for generate s for service I will name the service class as upload image hit enter so here we have successfully created the service class upload image service so first of all we have to inject HTTP client inside the service class for that--for so for open app module dot ES file here we need to import HTTP client module force so here we have added the import statement for HTTP client module and add the same class inside this imports array here now back to the service class I will add an import statement for HTTP client class and we have to inject the class here private HTTP it's off the type HTTP client class for time being I will copy paste the code here here we have a function post file inside that we have two parameters caption string and file to upload first of all we have created an endpoint inside that we have the URI for this Web API method here upload image ok and let me run this application here for that hold ctrl then press period now let's copy this port number from here and let's edit this URL here after that we have created a form data object here we have appended file to be uploaded in however BPI project and here we have the caption text from our caption text box we will call the post function from HTTP client object here we have the URI here we have the post data now we can call this function from our typescript component file here for that for surf or we have to inject this upload image service class inside this component here so let me add this class inside this component providers are here now let's add the import statement now we have to add a private parameter inside the constructor I will name it as image service it's of the type upload image service now inside the submit function we can do this this dot image service dot post file inside this function call we have to pass the corresponding field values for caption touch we can do this caption dot value as a second parameter we have to pass the image to be uploaded for that we have to pass this property we have said the image inside this property file to upload in change event or file uploader so instead of retrieving the selected image from this image control object we are going to pass that value from this property here now we can subscribe to that returned response here inside the SUBSCRIBE function I will add an arrow function with a single parameter data and here we have the function body first of all I will low an indication this upload is done after that we have to clear this form controls this text box and file uploader here ok we have to create these two controls for that I will do this caption dot value is equal to null and we have to do the same for the image controller also so let me copy this and paste in here and replacing this caption with image okay all set now let me save all of these modifications and back to the application here now let me try to upload an image from my desktop so I will select this image caption text will be toy click on submit so this form is reset to its initial state that means everything works as expected while we reset these controls these text box and file uploader we have to reset this preview IMG controller so that we can do in a bit now let's verify the previous post data the image should be saved inside this image folder you can see that image from this solution Explorer we have to check that inside the folder so here we have the image with the custom name that we have created here ok and we have to see the corresponding record inside the table here right click on it then select top thousand rows so here we have image caption and here we have the image name now let's reset this IMG control also for that we can do this inside the component type script file here we can do this we'll copy this text from here then let's do this this dot IMG URL is equal to default IMG path now let me say this and back to the application here now let's try to upload one more file here click on this choose file then I will select this one image caption will be something from my childhood click on submit now everything works as expected so that's it guys in this video we have discussed how to upload images in angular 5 API you can download this project source code from the link given below in video description if you found this video helpful please thumbs up this video for our some videos like this please be subscribe to this channel dotnet mob please like and share this video with your friends and colleagues so that they can benefit from this have a nice day bye

Channel: CodAffection

Views: 94,820

Keywords: image upload in angular 5 with web api, upload images from angular 5 to web api server, angular 5 form to upload image, post files or images from angular 5 to a server, image library in angular 5, Angular 5 Tutorial, How to upload image in angular 5, How to upload image in web api, CodAffection

Id: c61wr1ZsHzY

Length: 30min 24sec (1824 seconds)

Published: Wed Mar 28 2018