Uploading files to a server is a common operation of many websites. In this article we will focus on how to upload image files using ASP.NET MVC Framework and display the images using our custom Image HtmlHelper.

Where are we going to upload?

There are many places where a file can be uploaded but for the sake of simplicity we are going to upload the file to a server's folder. The folder name will be "UploadedFiles" and it will be placed inside the application directory.

Creating the View:

Our view is pretty straight forward. It consists of the input type "file" and a submit button which is used to post the form back to the server. The implementation is shown below:



There are couple of interesting things to note about the view. First the form element contains the enctype = "multipart/form-data" which is used to send files, non-ASCII data and binary data. The input type="file" element is given a name "fileUpload" which is necessary to access files collection on the server side. In the next section we are going to demonstrate how to implement the "Upload" action of the "UploadController" which is responsible for persisting the file on the server's folder.

Implementing UploadController:

The Upload action is invoked when the user submits the form after selecting the file. The Upload action is shown below:



That is pretty much it! Browse your "UploadedFiles" folder and you will see your uploaded file.

What about Large Files?

The default upload file limit is 4096 KB which is approximately 4MB. If your file is larger than 4MB then you are going to get an error which will looks like the following:



You can change the setting by specifying the new maxRequestLength in your web.config file.



After increasing the limit you can easily upload files larger than 4096KB.

Displaying Files on the Page:

Now comes the fun part. In this section we are going to display the uploaded files on the page. For this purpose we created a class called "UploadedFile" which is responsible for holding the information about the uploaded file. The List action inside the UploadController is invoked when displaying the files. The implementation is shown below:


 
We iterate through our "UploadedFiles" folder and retrieve all the files and populate the List<UploadedFile> list. The view implementation is shown below:



If you run the view you will get the following:



As, you can see the image is not displayed. If you check the source of the page you will notice that the img src is not correctly configured and it is pointing to the incorrect location.



Let's fix this by implementing a custom Image HtmlHelper.

Creating Image HtmlHelper:

Just like all the other HtmlHelpers the Image HtmlHelper also extends the HtmlHelper class. The implementation is shown below:



The essence of Image HtmlHelper is the use of UrlHelper which makes sure that all the urls are resolved correctly.

You can use the Image HtmlHelper inside your view using the following code:



Now, when you run the page you will get the following output:




NOTE: You should also add the "alternateText" property on the Image HtmlHelper which is used to display text which the images are loaded or disabled.

Conclusion:

In this article we learned how to upload files to the server's folder using ASP.NET MVC Framework. we also learned how to create an Image HtmlHelper to display images in the view.