blazor asp.net core Entity Framework EF FILE UPLOAD INTO DATABASE

hello friends welcome to my channel this is charan in this video tutorial i will explain how to upload images into an sql server database and display images on the browser in asp.net code with blazer application and here we got the final output click the upload see here we got the image name and one file applied control and button control to insert the images let's give the image name is sharon let's choose the file i'm selecting the file this one how to insert select drop down list open here the file has been selected before insert this image and the channel name let's check in our database execute this table right now this table contains zeros let's insert this image file inside let's check the output execute the table see here we got the results of this table the sharon image name is challenge and this is the image has been saved successfully in sql server database let's insert another image this time i'm adding james choose file the file name is i'm adding the jpeg file open click inside let's check in our database execute so you have the james record and this is the byte i have the image if you are a first time visitor to my channel please subscribe to get the latest updates before writing the coding part in baser application first we'll check the sql server management studio i just logged into my sql server management studio let me allow this group folder as well as the databases and right now in this database there is one channel database now i want to create the migration now in this term database i want to create a table using asp.net core migration so first let's create a table with migration for this video tutorial i'm creating a new application go to project i'm selecting blazer app click next let's give the project name is upload images display blazer and i want to save this project in this redraw code blazer folder then click create after that i am selecting the blazer server app template then click create and here the project has been created successfully let me close this default window before writing the coding part first we'll check the default blazer application output on the browser how it looks so let's run this application and here we got the default output of the blazer application which contains one layout and this is a razor component now my aim is i'll create one new navigation link to upload files when i use a click zip navigation link it will open one new component in that i'll add one upload file control so let's write the coding part switch over to the coding part and stop debugging to add the navigation link in the project folder come to the bottom node is the shared folder here expand that one in the shared folder there is now menu.razer component let's open that one and here you can find some navigation default links home counter and fetch data and my i'm adding a new list iodine in this list item i'm adding upload this is a extra flame and the hdf or path is upload now after creating the navigation link next they require one component so that component i'm adding in this pages folder right click the pages folder and i'm selecting the razer component and the component name is image as upload click add and here we got our images upload razer component now when a user clicks this upload link i want to open this component so let's add the page directory between double quotes forward slash i am adding this hdf name which is upload copy that one and paste here that's it now let's check the output this navigation link is working or not on this application and here we got our new output with the upload navigation link let's click that one see here we've got the images uploaded which is the upload component now the next step is let's stop debugging fast i want to upload and save the images in the sql server database so for that we require one migration table so let's invert this pages folder first let's add the necessary packages for the sql server in the project there is a dependencies folder expand that one notice in this dependencies folder there is no any packages folder so let's first install the package as what we require for this application select the application name right click the mouse go to manage nutrient packages then go to browse and search for microsoft dot entity framework here i am using entity microsoft dot entity framework core i'm selecting that one and click install click ok after that let's accept the license see here we got the icon here which means this package is installed successfully and also you can notice now we've got the packages folder here let me expand this folder see here we've got the microsoft dot entity framework code the version is 5.0 now the next packaging i want to add is sql server because i want to save images into a sql server database so click install click ok accept the license and here the installation is successful as well server next we require these tools also the microsoft dot entity framework codec tools click install click ok accept the license and this package is also installed successfully so after installing these three packages in this packages folder let's minimize this folder as well as the dependencies now we'll create one class which is a focal class and creating a class in this data folder right click the data folder add class now the class name is img class image class and here we got our image class now in this image class i'm just defining the properties which are the column names of the table so let's add the property the property first one is the integer type which is the image id and i want to make this column image id column is a primary key how to increment columns so for that we need to be required to add this key method so this key method requires a system.component model.data inertia this key method requires this namespace system.componentmodel.data annotations let's add that from here next i'm adding another property which is a string property and this is the image name and the last one i want to save images so for that i require the byte array prop byte array and the property name is image now after adding the properties in this class next up we require the the proper data source connection string of the sql server so to get the proper sql server connection string notice how the server explorer open that one in the server explorer the data connections right click that button add connection and the connection name the server name is my server we visit this one desktop i'm adding my server name i found [Music] pbudem then i'm selecting the database name notice here the charan database i want to migrate table in this database test connection is succeeded okay okay so after adding the database in this data connections folder notice in this properties there is a connection string which contains a data source so let's copy the data source now we will add this data source a connection string in our project app settings.json file let's open that file in this json file i'm adding one connection string connection strings column only brackets let's add the comma because it's a json file i'm adding my connection string name is my connection column between double quotes and pasting the data source that's it we have added the connection string in this app settings of json file now we need to add this inject this connection strength service in the startup.cs file so first let's import using microsoft.entityfair.com after that come to the bottom and the configure services i service collection interface is here so let's add our service services dot db connection so before our db connection what we do is uh we require the application db connector now before adding the db contacts we require one bb context class here so i'm adding a new class in this data folder select the data folder right click the mouse add a class the class name is application db context enter and here we got our application db context class now in this application db context class i am inheriting the db context so that db context class is belongs to using microsoft dot entity frame of code after that we require to add the image class also so that image class is in the data folder so i don't require to add because the application db context patch is also inside the data folder so i'm not adding the data folder here call on db context and then am creating a property protected read-only application db context let's add the db context context is a variable after that let us create the constructor of this class inside this constructor i am adding my db context options inside these options i'm adding application db context options column base options then then we'll add then we'll add one the data type db set which contains our table name so here i'm adding public db set inside this db set the column names of this entity is the image class so i'm adding the image class then i'm adding save image which is my table name get and set that's it now let's open the startup.cs file now let's inject the service db contacts baby context inside this db contacts i'm adding application db context options column options dot user sql server is a method configuration dot get connection string method and this connection string method takes a string parameter which contains my connections to name which is this one my connection let's add it so now let's close the brackets here with the firmware that's it now let's migrate this save image table open tools in the tools notice this is a negative package manager there is a package managed console let's open that one here let's migrate the table name is add iphone migration create image cell enter so here we got the create image 0 class migration is added now let's upload update the database update iphone database before updated database let's check out the channel database expand the tables folder notice there is no any save images table in here so let's update the database here update build started and succeeded and we got a message done so which means the table has been created successfully in this sql server database let's refresh this folder so here we got save image let's browse this table select the table name right click the mouse select up thousand dos and here we got the results of this query which contains three columns of this table and this table contains right now zeros so it's totally empty now the next thing is we'll upload and save the images into this image table so write the coding part in blazer application when we want to upload images we need to install one package called blazer upload file so select the project name right click the mouse manager packages go to browse and search for blazer input file so here we got the blazer input file i'm selecting that one now i'm selecting here the 0.1.0 preview 002 the version i'm selecting not the 2.0 i'm selecting 1.0 preview version make sure to select the check box include pre-release once again i'm telling i'm selecting the version 1.0 preview 0002 click install click ok accept the license and this laser input file this package is installed successfully let me expand this dependencies folder as well as the packages folder see here we got the blazer input file now after adding this package you can able to upload images in blazer so let's minimize this packages folder as well as the dependencies after that in blazer applications will create with services to do the in blazer applications when we want to do any functionality like adding the records deleting a bit whatever the functionality will do in visa we require a service so let's add one new service folder in our project select the application name right click the mouse add select new folder and the folder name is the services inside these services i'm creating it i'm creating a class called image service and class image service enter and here we got our image service now inside this image service now in this service first i'm importing the application db contacts and an image class both classes i am adding in this service class using these two classes is inside the data folder so let's add the folder data before that we need to add my application name. then only we will add our folder name after that after that let's add the privilege read only application db context application db context underscore db context colon then let's create the constructor ctor double tab it will create the constructor inside this constructor i'm adding an application db context it's got db then and it's got bb context is equals to dv underscore friends here friends here in the application with the contacts we don't require this function we require in the service after that let's create the function of the boolean to insert the records public bool and the function name is insert cell image let's call it say upload image upload image inside this upload image i'm adding the class name which is the image class i see then i'm adding then i'm adding the entity framework code here underscore db context dot let's add my table name is the save image dot add method this add method takes the entity which is the ic this object i'm adding here once we add the record we need to save changes underscore db context of save chain save changes method then this function return troop that's it it's a very simple code to insert the records now the next app now after adding the coding part now we require the user interface that functionality will add in the razer components so that laser components i am adding in this project pages folders select the pages folder right click the mouse here we already add here the razer images upload tracer now first let's add the necessary name spaces in this laser component at using at using first we require the data folder so that data folder i'm adding my application name the data folder then we require the service also using the services and upload laser dot services folder and also we require by using blazer up input file to upload the images and we require when we are dealing with files here we need to in input the namespace using input system dot i1 in space i will then the last one we need to inject inherit [Music] boring component base the warning component base i'm adding my service name my service name is this image service let's add that on image service now we need this image service in the startup.cs file go to top first we need to add using i'm adding my application name upload image user dot services now i can add my service in this configure services services dot add scoped method in this triple method i'm adding my service name which is image service in this service then switch over to the razor component i'm adding horizontal line after the label in the code i'm adding a class i'm creating the object format and the class for this image class which contains my properties so image class i see image object let's add this image object is equal to new image class after that we are importing the after creating the object of this class next up i'm creating one the property of the byte array property to upload the images so here i'm adding public byte array image upload uploader get and set mac properties then i'm adding the wired method valid submit this valid submit method contains a a functionality to insert the records so here first i'm adding when we are inserting the records in blazer we need to set always the id column is equals to zero so first image object dot so image id is always zero whenever we need to insert new record otherwise we'll get an error if you don't add this you'll get another then we need to upload the image also first image object dot image image is equals to image uploaded this property name then let's add the service to upload this service to upload the files upload image method so if you notice the image service contains my method called upload image this function name i'm adding here and say that i'm adding image object which contains all the property names that's it now we need to uh image file handle functionality so for that i'm using async task a sync task handle file selected in this handle file selector i'm adding i file this entity entry this interface is belongs to the blazer input file so let's add the property called files and after that i'm declaring a variable called file is equals to files dot first a default method then i'm adding the condition if the file is not equals to null if the file is not equals to null then i'm declaring the variable memory stream i want to save that new memory stream the memory stream class is belongs to i1 namespace then average and await file. copy to async method which takes the parameter of the memory string that is this variable name then we need to this image uploaded is equals to a measure to rm method that's it now here we require when we are posting the data so when we are posting the data to server we require the edit form element in the blazer edit form inside this edit form the i have three columns the image id image name and image so image id is auto standard column so i'm not adding any and control for that second one is the image name image name colon i'm adding the simple input type text html element after that after that i'm adding one simple input file on change event in this unchanged event i'm adding this handle file selected function name and we require one button control so button button type is equals to submit insert the button name is insert and here in the edit form i'm adding the model at model is equals to the model we are getting from this image object image class object at image object and on valid submit i'm adding this valid submit function name at valid function and in the input text box i'm binding at image object dot image name that's it we have done the complete coding part and now here because image class does not contain definition i am not let's check that one the image class does not contain the so here we don't require this column now the last step we need to configure in the pages folder there is a whole underscore host.css html come to the bottom you need to add one script for the blazer input file the js file will be required script tag source is equals to underscore content content forward slash blazer input file input file forward slash and input file.js the filename is that's it we have done the complete coding part now it's time to check the results on the browser to insert the images into this sql server save image table let's run this application and here we got the final output click the upload see here we got the image name and one file appear control and button control to insert the images let's give the image name is sharon let's choose the file and selecting the file this one how to insert select drop down list open here the file has been selected before insert this image and the charan name let's check in our database execute this table right now this table contains zero errors let's insert this image file inside let's check the output execute the table see here we got the results of this table the sharon image name is charan and this is the image has been saved successfully in sql server database let's insert another email this time i'm adding james choose file the file name is i'm adding the jpeg file open click inside let's check in our database executed so you have the james record and this is the byte area of the image now in the second video i will show you how to display images from sql server database that's it

Channel: Haritha Computers & Technology

Views: 6,601

Keywords: image save database, blazor, blazor upload file, asp.net core, blazor entity framework core, File handling in blazor, image file upload, sql server connection to asp.net core, implenting blazor in asp.net core, asp.net core tutorials, save image files into a database

Id: GkdtXGaODLY

Length: 32min 55sec (1975 seconds)

Published: Fri Aug 14 2020