Save image to database using asp net

this is part 169 of asp.net tutorial in this video we'll discuss how to save images to database table using asp.net and C char here is what we want to achieve once we select the image that we want to upload using the file upload control and when we click this upload button we want to upload that image to the database table once the upload is completed successfully we immediately want to display a length which says mu uploaded image once we click this length we want to download the image from the database table and then display that on the web page so let's see how to achieve this the first step here is to create a database table which is going to store our images and here is the create table script we are creating table TBL images the ID column here is the primary key for this table name is going to store the name of the image the size of the image in bytes and image data itself image data is binary data so the data type here is where binary the next step is to create a stored procedure which is going to insert image data into that table so create procedure let's call it SP upload image and this true procedure is going to have name parameter and their care of 255 at size of type integer and image data itself image data is binary so the data type is going to be where binary of max and this dot procedure is also going to have an output parameter and I am going to call it new ID this is of type integer output parameter as begin and and what we want the stored procedure to do insert into TBL images values so we want to supply values for name from name parameter image size from the size parameter and image data itself from image data parameter now if you look at this TBL images table the ID column is an identity column when a new row is inserted it's going to automatically compute the new identity value for that row what we want to do is we want to return that new row that we have just inserted the ID value of that new row using this output parameter so we are going to select add new ID equals scope identity so what is the scope identity function going to do it's going to retrieve the identity column value of the row that we have just inserted and we are returning that using this output parameter let's execute this code so command completed successfully now let's flip to visual studio here I have a new asp.net web application project and within web config file I have included a connection string to our database I have also added two web forms where form 1 and wave form 2 on web form 1 we have a file upload control so this allows the end user to select an image that he want to upload and this button is going to start the upload process the label will display the status message whether if the upload has completed successfully or not and then this hyperlink element is going to display this link view uploaded image now let's slip this to design mode double click on the button to generate a click event handler on this web page we are going to write some ad or dotnet code so I am going to bring in 3 ad unit namespaces system configuration systems or data systems or data dot sequel client in addition to these ad or dotnet namespaces we also need system dot IO namespace all right with a page load event when the web form initially loads that is if it's a get request we want to hide the label element and the hyperlink element right so we will initially want to turn off their visibility so F naught is post back label message dot visible equals false similarly hyperlink dot visible equals false and when we click the upload button that's when we want to start the upload process so the first thing that we want to do is retrieve the file that the user is trying to upload from file upload one control that is this is that file upload one control using which the user will be able to select the file from his computer and this control has got this posted file property which is going to give us that file and if you look at this posted file what it is returning it is returning an HTTP posted file object so let's create a variable of that type HTTP posted file let's call it posted file equals that now let's retrieve the file name and store it in a variable file name equals we are going to use path class and this path class is present in system dot IO namespace so path dot let's use get filename function and to this let's pass posted file dot file name property similarly I am going to create another variable to get the file extension file extension equals again I'm going to use path class dot get extension method so to this function if we provide the file name it's going to give us the file extension so file name we get the file extension and the other thing that I want is the file size so file size equals we can use posted file object dot content length property that's going to give us the length of the file I mean the size of the file in bytes all right so we have the file extension here I am going to check the file extension because keep in mind we only want images to be uploaded so if file extension dot two louia is equal to dot jpg so dot jpg is a image extension so if file extension dot louia equals dot jpg or if it is dot BMP BMP is also an image or if it is dot Jeff or if it is dot P and J if those are the file extensions that we are trying to upload then we want to upload that to database else we want to display an error saying that you know only image files or upload can be uploaded so at this point we want to turn on the visibility of the label so I'm going to set that to true and LBL message dot text I am going to set that to you know in the interest of time I have already typed that string only images dot jpg PNG gif and BMP can be uploaded and let's also change the color to red LVL message dot for color equal system dot drawing dot color dot red all right and if the hyperlink is visible we want to turn off its visibility as well so hyperlink dot visible equals false all right if it's the valid file that we want to upload then here we want to retrieve I mean read the image data and upload it to the database table to do that I'm going to use this posted file object and if you look at this posted file object it is call this input stream property so what is this property going to do it's going to return as a stream object that points to the uploaded file you know using which we can read the contents of that file so I'm going to store that stream object in a stream variable so let's call it stream and let's create an instance of binary reader because this is binary data and let's call the instance binary reader equals new binary reader and let's pass this stream object that we have created so we have the binary reader now and this object has got read bytes function which is going to read the bytes from the stream and we have to specify how many bytes we want to read we want to read all the bytes so I'm going to use the stream object and it has got length property which is going to give us the length of that and if you look at this length property notice that it is actually returning long but if you look at read bytes function it expects integer so what I'm going to do is typecast that to integer the length property to integer and if you look at this read bytes function it's returning a byte array so let us go ahead and store it in a byte array and let's call the variable bytes okay so we have the image data as well ready now let us write the ad or dotnet code the first thing to do is to read the connection string from web config file so I'm going to use configuration manager class dot connection strings of the name of the connection string within web config is BBC s and let's use the connection string property now let's create sequel connection object let's call it corn equals new sequel connection to the constructor let's pass the connection string and then let's create sequel command object let's call it CMD sequel command and using this command object we want to execute this tour procedure s be upload image and let's use this connection object to execute this command so the command object is executing gate stored procedure so command dot command type equals command type dot stored procedure and if you look at this SP upload image stored procedure it has got several parameters so we need to specify values for those parameters let's create a sequel parameter object here let's call it pram name so this is for name parameter new sequel parameter and let's specify the parameter name equals what's the name of the parameter it is at name and the value is going to be the name of the file and where do we have the file name we have that in this variable so let's specify that variable right here file name and we want to associate that parameter object with the command object so command or parameters dot add / am name similarly we need to create parameter objects for other parameters size image data and new ID in the interest of time I have already typed the required code so let's copy that from our notepad and paste it right here so here you know this is for name this is for size and this is for image data we have another parameter that is this new ID which is an output parameter we need to specify that as well so I'm going to make a copy of this and let's change the name here to pram new ID and the name of the parameter is add new ID and the value you know this an output parameter so I'm going to initialize that to minus 1 we are actually going to get the value from the DB because that's an output parameter and that's the reason why I have initialized it to minus 1 and this an output parameter so we have to set the direction explicitly the parameter Direction so Direction equals parameter Direction dot output and we need to add that to the command object so pram new ID all right so we have associated all the parameter objects with the command object all that is left now is to open the connection and execute the command so this is an insert operation so we are going to use execute non query method and finally close the connection we don't have to explicitly close the connection because we are using this using block so you may or may not use that and what do we want to do now once the command is completed successfully if we have reached this point then we know that the image is successfully uploaded if that's the case we want to display that message in the label so LBL message dot visible equals true and the text within the label is going to be upload successful and let's change the color of the label to green and we want the hyperlink to be visible and what do we want to do you know we want to redirect when the upload is successful we actually want to redirect the user to this platform to dot aspx that's the reason why I have added this platform to this project and when we redirect the user we also want to send the image ID that we have just uploaded to the database that image ID we want to send it to this platform to as a query string okay so that's the reason why we are returning that new ID and in our next video what we will do is we will read that query string value from webform to dot aspx and then load that image from the database and display it on the web page we'll do that in our next video for now let's just redirect the user to their form to dot aspx with the image ID that we have just uploaded so we are going to turn on the visibility of the hyperlink and we are also going to set the navigate URL navigate URL is going to be till the till indicates the root directory so from the root directory go to the form two dot aspx because of web form 2 is present in the root directory question mark ID equals so we need the identity column value and if you look at the command object the command object has the output parameter and the name of the parameter is at new ID so let's retrieve from the command object dot parameter so command or parameters and the name of the parameter is at new ID so retrieve the value using value property and convert that to string all right so that's all there to it let's save our changes from the web page now let's quickly execute a select query from the table select star from TBL images at the moment this table should be empty so we don't have any row in the table and let's select a file so within C images I have several image files first of all let's try to upload this excel file and see what we get look at this when we click upload it says only image files are allowed so let's select penguins click upload look at that upload successful and view upload uploaded image look at this when I click on this link I am redirected to webform to delay SPX and look at the ID value it is 1 because that is the identity column value look at that in the DB we have the ID we have the name of the image the size of the image in bytes and the image binary data let's upload another image so let's choose another file upload so upload successful let's click look at that now the ID is 2 so we always get the identity column value that we have just inserted so jellyfish is ID 2 in our next video we'll discuss how to read this query string parameter value and then load that respective image from the database table and display that image on the web page thank you for listening and have a great day

Channel: kudvenkat

Views: 174,891

Keywords: upload image to database asp.net, asp.net save image to database, asp.net upload image to database c#, asp.net c# code to upload image to database, c# code to save image in database in asp.net, asp.net image database, asp.net image database c#, upload image to database c#, upload image to sql server c#, how to upload image in sql server using c#, upload image sql server c#, store image in database c#, store pictures in database c#, store image in sql database c#

Id: lhOfHWGLDjU

Length: 16min 54sec (1014 seconds)

Published: Tue Aug 11 2015