Upload and Display Image in Database table in ASP.NET CORE 3.0 Or Higher

hello everyone welcome in my channel asp.net core today I am going to show you display and upload image in asp.net core 3.0 and higher oneself so first thing you can do changes in the model that is add a string type property that is a profile image and remaining all the things are same like dbcontext and application settings that connection string file and start up dot CS file everything is same and after that you have to add migration into your project and update database with the new property that is profile image now after that you can make a new few model for your image how to upload it so first thing you can do that is add a new file tag helper into your project so if you are adding a file tag helper then must use iPhone file in your view model so here we have ID name and the profile image as a string type but notice that the profile image in the view model is the iPhone file so just again open your view model here we have iPhone file as a profile image okay so the next thing you can do in a controller section so that in index method must have to add or must to get all the images all the records from the database tables so use a D data contact file and that is application DB context and add that a DB context in as a property as well as initialize it in the constructor so just add private read-only application dbcontext contacts and using context you got all the entries or you can say all the records from the database table that is from the student tables you can say and send the items in the index now after that you you have to create you have to add a create method in a controller and generate view respective controller that is and also select a model that is the student view model okay and add a new tag helper which is related to the iPhone file so the label is not required but in asp.net or input ASP for is iPhone file so that is the profile image and validations for also the iPhone file that is profile image profile image you can also add in the label so that thing you can add okay so when we click on the button that is the submit button or you can say the create button then image will be loaded into the upload folder as well as database table so that change in the class file that is form control this enough you also and also add a new HTTP POST create method in the post create method we got a student view model that is VM and also add a form attribute that is NCT NCT type that is multi-part from data okay that's fine in the few section and just if you got a multiple file here just add iPhone file is only only the single file I want to add in the project folder so string the file name first of all the got the file name from your VM so upload file there is a method and add a new object for the student class in which you can pass the name and the profile image and the profile image in the model that is the string type so you can add string file name okay now after that you make some changes in the database table like Save Changes as a record so context dot students gotta add student and save changes context or say changes written redirect to return on the index page that is an index page and in 3.0 make some changes in a 2.0 in asp.net core that is related to your IBM host environment as well as the I hosting environment I web hosting environment is the similar to the hosting environment but some changes so in 3.0 and three point in the latter session always use a web host environment instead of a hosting environment so first of all got a directory that is by using the I web host environment so added here the iWeb host environment web host environment actually I web host environment is not at there in a so resolved it by using a web host environment initialized it in the constructor as well as making property in your class that is web host environment I of the iWeb host environment so paths don't combine and in which you can add that is the swing path 1 and part 2 that is the path one is the AB host environment dot web root path web root path and the second string is related to the folder name of inside your wlwt's folder that is the images so add images that's fine now after that you got a single string so name of the string you can say the file name is a gyd dot new geo ID and no two string separated by the underscore and file name v m dot profile image dot file name that's fine now after that you got a new thing that is the file path so path dot combine the directory that is the upload dir and the file name that is the path of the file and you can use file stream to save the file into a directory so first of all where file file stream equals to new file stream and here you can use file path and file more dot create we MDOT profile image dot copy to on that path said that is the file that hold the file stream that's fine now after that you can return written your file that is a file name just I want to written there is a string type that is used a file name in the database table only because in the model we have a string type of name of the file the name of the file is the file name so resolved it and you have to check on the index page just add a new view and select the model that is original more model of the class not a view model and she is that reserved syntax in the form of title / SRC is images all the symbol images and the name of the file that is exist in that database table so you got from the item so item dot profile image and class is related to the circle rounded circle and the width and the height is the 40/40 and ASP append version is true SP append version true that's fine now you you have to see your output so thank you guys for watching this video and keep watching all other videos which is related to display and upload images and related to any query please comment it and don't forget please subscribe my channel if you like this video please subscribe my channel I also like this video thank you very much for watching this video you

Channel: ASP.NET MVC

Views: 50,132

Keywords: Upload Image in ASP.NET CORE, Save Image in Database table, Display Image in Tag Helper, DOTNET CORE, ASP.NET CORE Image, Display Image in Circle ASP.NET CORE, ASP.NET CORE 3.0 Image

Id: 7nFErqpxtbg

Length: 10min 58sec (658 seconds)

Published: Mon Mar 09 2020