JQuery Ajax File Upload in .NET MVC With Code Examples

Learn how to implement JQuery Ajax file upload in .NET MVC. Follow this step-by-step tutorial with code examples for views, controllers, and JQuery. File uploads are a common requirement in web applications, and when it comes to handling file uploads asynchronously, JQuery Ajax is a powerful tool. In this tutorial, we will explore how to implement JQuery Ajax file upload in a .NET MVC application, covering the essential components: views, controllers, and JQuery.

Setting Up the Project

To begin, create a new .NET MVC project in Visual Studio by following these steps:

Open Visual Studio and click on "Create a new project."
Select "ASP.NET Web Application" template and provide a suitable name for your project.
Choose "MVC" as the project template and click on "Create."

Once the project is created, we can move on to the implementation.

1. Views

Views are responsible for rendering the user interface and capturing user input. In our case, we need a view to display the file upload form and handle the file selection. Here's an example of a view file named "Upload.cshtml":

@{
    ViewBag.Title = "File Upload";
}

<h2>File Upload</h2>

<form id="uploadForm" enctype="multipart/form-data">
    <input type="file" name="file" id="fileInput" />
    <button type="submit">Upload</button>
</form>

<div id="uploadStatus"></div>

@section scripts {
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#uploadForm').submit(function(e) {
                e.preventDefault();
                
                var formData = new FormData();
                formData.append('file', $('#fileInput')[0].files[0]);
                
                $.ajax({
                    url: '@Url.Action("UploadFile", "Home")',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        $('#uploadStatus').text(response);
                    },
                    error: function(xhr, status, error) {
                        $('#uploadStatus').text('Error: ' + error);
                    }
                });
            });
        });
    </script>
}

In the above code snippet, we have a form with an input field of type "file" for selecting the file to upload. The form submission is intercepted using JQuery, and the selected file is sent asynchronously to the server using an Ajax request. The server endpoint for the upload is specified as @Url.Action("UploadFile", "Home"), which we will implement in the controller.

2. Controller

Controllers handle the incoming requests, perform necessary operations, and return responses. Let's create a controller named "HomeController" and add the following code:

using System.IO;
using System.Web;
using System.Web.Mvc;

public class HomeController : Controller
{
    [HttpPost]
    public ActionResult UploadFile(HttpPostedFileBase file)
    {
        if (file != null && file.ContentLength > 0)
        {
            var fileName = Path.GetFileName(file.FileName);
            var filePath = Path.Combine(Server.MapPath("~/Uploads"), fileName);
            file.SaveAs(filePath);

            return Content("File uploaded successfully!");
        }

        return Content("No file selected.");
    }
}

The UploadFile action method is decorated with the [HttpPost] attribute to handle the file upload request. It expects an HttpPostedFileBase parameter named "file"

containing the uploaded file. Inside the method, we check if the file is not null and has content. If so, we generate a unique file name, save the file to the specified directory (~/Uploads in this case), and return a success message. Otherwise, if no file is selected, we return a message indicating the absence of a file.

3. JQuery

To handle the Ajax file upload, we utilize the JQuery library. In the view file shown above, we have included the JQuery library using a CDN link. However, you can also download the library and include it locally in your project if preferred.

Conclusion