FileUpload in ASP.Net MVC

In web development projects, file uploading is a very common feature. The question always arises of how to upload a file or how to create these kinds of features in MVC applications. This article explains how the FileUpload control works with MVC, how to upload a file, how to open an uploaded file and how to delete an uploaded file.

In simple HTML we define the FileUpload control like this:

This HTML control has a TextBox and a button. When you click on the button a file open dialog box will open automatically. You choose a file and your file path will apear in the text box, these features are built into the FileUpload control.

See the following code.

First we will create a model FileModel.cs with the following code.

In the code above we have the FileUploadModel class, in this class we have the following two auto implemented properties:

1. FileName
2. FilePath.

1. Now add a new Controller FileUploadController.cs with the following code:
   

   1. publicActionResult FileUpload()
   2. {
   3. return View();
   4. }

2. Now add a new view FileUpload.cshtml with the following code:
   

   1. @model MvcApplication1.Models.FileUploadModel
   2. <script src="~/Scripts/jquery-1.9.1.min.js"></script>
   3. <script type="text/javascript">
   4. $(document).ready(function () {
   5. if('@ViewBag.Message' == 'File Uploaded Successfully')
   6. {
   7. alert('File Uploaded Successfully');
   8. }
   9. if ('@ViewBag.Message' == 'File is already exists') {
   10. alert('File is already exists');
   11. }
   12. $('#uloadTable td img.link').live('click', function () {
   13. var filename = $(this).parent().parent().parent().attr('id');
   14. $(this).parent().parent().parent().remove();
   15. $.ajax({
   16. type: "post",
   17. url: "/FileUpload/RemoveUploadFile?fileName=" + filename,
   18. datatype: "json",
   19. traditional: true,
   20. success: function (data) {
   21. alert('File Deleted');
   22. if (data == 0) {
   23. $('#uloadTable').remove();
   24. }
   25. }
   26. });
   27. });
   28. });
   29. </script>
   30. @{
   31. ViewBag.Title = "FileUpload";
   32. }
   33. <h2>File Upload</h2>
   34. @using (@Html.BeginForm("FileUpload", "FileUpload", FormMethod.Post, new { @id = "form1", @enctype = "multipart/form-data" }))
   35. {
   36. <table>
   37. <tr>
   38. <td>
   39. <input type="file" name="file_Uploader" />
   40. </td>
   41. <td>
   42. <input type="submit" id="bttn_Upload" value="Upload" />
   43. </td>
   44. </tr>
   45. </table>
   46. if (Session["fileUploader"] != null)
   47. {
   48. <div class="upload">
   49. <div style="width: 500px;">
   50. <table id="uloadTable" border="1">
   51. <thead>
   52. <tr>
   53. <th>Name</th>
   54. <th>Action</th>
   55. </tr>
   56. </thead>
   57. <tbody>
   58. @foreach (var item in (List<MvcApplication1.Models.FileUploadModel>)Session["fileUploader"])
   59. {
   60. <tr id="@item.FileName">
   61. <td>@item.FileName</td>
   62. <td style="text-align: center"><a class="viewc" href="@Url.Action("OpenFile", "FileUpload", new { @fileName = item.FileName })">
   63. <img width="16" height="16" border="0" src="~/Images/view.png" class="viewc"></a>
   64. <a class="viewc" href="">
   65. <img width="16" height="16" border="0" src="~/Images/Delete.png" class="link"></a></td>
   66. </tr>
   67. }
   68. </tbody>
   69. </table>
   70. </div>
   71. </div>
   72. }
   73. }

Here the important thing is that we need to remember always, when we work with the file upload control always add this with form tag @enctype = "multipart/form-data" as in the following:

Now create a new folder in your application, in this application I create MyFiles. And now add the following code in to "FileUploadController.cs".