This is the second part of the ASP.NET Photo Album tutorial series. This tutorial will walk you through the steps of creating a form that will allow a user to upload images to the database with ASP.NET 4.0 and C#.

Adding the Add.aspx Page

At this point, we should have our datbase setup and be ready to add in a form that will allow users to upload images. To begin:

  1. Right click the project in your solution explorer.
  2. Select add new item…
  3. Select a web form.
  4. Name it ‘Add.aspx’.
  5. Click add.

Next, we need to add in a form that will allow the user to upload an image and give us the information they need such as the date and message. Build a form that looks like this:

First, I added a link to the top of this page that says ‘Home’ and links to the Default.aspx home page that we will add later. Then, I have created a simple table and have added in a fileupload control named ‘fupImage’ with a customvalidator next to it that we will add some functionality to later. Then, I added in a textbox named ‘txtMessage’. Next, I added in a calendar control with a textbox named ‘txtDate’ that we will add some functionality to allow the user to select a date from the calendar, and have that date be set to the date textbox. Finally, I added in a button named ‘btnUpload’. To view the source of this form, download the project here.

Next, we just need to add in some code to allow our form to function properly. First, to make the calendar populate our date textbox, add in the following code in the event that the calendar’s selection is changed

Then, we need to add some functionality to the custom validator that we added. In this example, we will allow the user to only upload the following file types: ‘jpg’, ‘jpeg’, ‘png’, ‘gif’, and ‘bmp’. To add our validation, add the following code in the ServerValidate event of our custom validator:

Next, add in the following code in the event the upload button is clicked, to store our image data in our database:

Testing

To test this out, simply load up the web site, fill out the form, select a file, and click upload. Then, ensure that the image data was properly added to the database.

Download Source Files