[Solved]-How to Upload pdf file using jquery MVC?

Sometimes we need reporting module in a project where the user or admin can upload and download the particular types of files with limitations.
Recently I got a chance to work on these types of modules, basically, I’m working in the admin module in which needs to allow the user to upload and download the pdf files.

So I decided to focus this article specifically on beginners and those who only want to upload PDF files and download files in table view using Mvc Ajax call. we will also discuss how we can upload multiple pdf files using Ajax in MVC.

Now let us start to create an MVC application to upload and download PDF files step-by-step.Let’s start with creating an empty MVC Project.Open your visual studion and add a simple Mvc project.

I have also created a folder for storing the uplaoded pdf files on server.

FileUploadController.cs

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace UploadingFileMvc.Controllers
{

    public class FilesInoformation
    {
        public string filename { get; set; }
        public string filepath { get; set; }
    }
    public class FileUploadController : Controller
    {
        // GET: FileUpload
        // GET: Home
        public ActionResult Index()
        {
            //getting the list of file uploaded 
            DirectoryInfo directory = new DirectoryInfo(Server.MapPath(@"~\PdfFiles"));
            var files = directory.GetFiles().ToList();
            List<FilesInoformation> model = new List<FilesInoformation>();
            foreach (var file in files)
            {
                model.Add(new FilesInoformation { filename = file.Name, filepath = "/PdfFiles/" + file.Name });
            }
            return View(model);
        }

        [HttpPost]
        public ActionResult UploadPdfFiles()
        {
            // Checking if  Request object  has file
            if (Request.Files.Count > 0)
            {
                try
                {
                    HttpPostedFileBase file = Request.Files[0];
                    string fname = file.FileName;
                    // Get the complete folder path and store the file inside it.  
                    fname = Path.Combine(Server.MapPath("~/PdfFiles/"), fname);
                    file.SaveAs(fname);
                    return Json("Pdf Uplaoded Successfully!");
                }
                catch (Exception ex)
                {
                    return Json(ex.Message);
                }
            }
            else
            {
                return Json("No files selected.");
            }
        }
    }
}

View Html Code

Uploading a pdf file in the Asp.Net MVC application is a very simple and quick task, we can easily achieve this task. The posted pdf file is automatically available as a HttpPostedFileBase parameter in the action method of the controller.
For uploading a pdf file on the server you are required to have a file input control within HTML form with encoding type set to multipart/form-data.

@model  IEnumerable<UploadingFileMvc.Controllers.FilesInoformation>

@{
    ViewBag.Title = "";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
@using (Html.BeginForm("UploadPdf", "FileUpload", FormMethod.Post,
                                                                new { enctype = "multipart/form-data" }))
{
    @Html.AntiForgeryToken()
    <fieldset>
        <legend>Upload a Pdf file By Ajax</legend>
        <div class="editor-field">
            @Html.TextBox("pdffile", "", new { type = "file", accept = "application/pdf" })
        </div>
        <br />
        <br />
        <div class="editor-field">
            <input type="button" id="btnfileUpload" value="Upload Pdf" />
        </div>
        <div class="row">
            <h3>Uploaded Filles</h3>
            <table class="table">
                <thead>
                    <tr>
                        <th>FileName</th>
                        <th>Action</th>
                    </tr>
                </thead>
                @if (Model != null)
                {
                    foreach (var file in Model)
                    {
                        <tr>
                            <td>@file.filename</td>
                            <td><a href="@file.filepath">View Pdf</a></td>
                        </tr>
                    }
                }
            </table>
        </div>
    </fieldset>
    <script>

        $(document).ready(function(){
            $('#btnfileUpload').click(function () {
                if (window.FormData !== undefined) {
                    var fileUpload = $("#pdffile").get(0);
                    var files = fileUpload.files;
                    var fileData = new FormData();
                    for (var i = 0; i < files.length; i++) {
                        fileData.append(files[i].name, files[i]);
                    }
                    $.ajax({
                        url: '/FileUpload/UploadPdfFiles',
                        type: "POST",
                        contentType: false,
                        processData: false,
                        data: fileData,
                        success: function (result) {
                            alert(result);
                            window.location.reload();
                        },
                        error: function (err) {
                            alert(err.statusText);
                        }
                    });
                } else {
                    alert("Your browser doesn support FormData");
                }
            });
        });
    </script>
}

Uploading Multiple pdf files in Asp .net Mvc

if you wan to upload multiple pdf file then you can use the below code.

you only need to change action controller code with below one,

//For Uploading Multiple files at once
        [HttpPost]
        public ActionResult UploadMultiplePdfFiles()
        {
            // Checking if  Request object  has file
            if (Request.Files.Count > 0)
            {
                try
                {
                    HttpFileCollectionBase files = Request.Files;
                    //in case if you want upload the multiple pdf files
                    for (int i = 0; i < files.Count; i++)
                    {
                        HttpPostedFileBase file = files[i];
                        string fname = file.FileName;
                        // Get the complete folder path and store the file inside it.  
                        fname = Path.Combine(Server.MapPath("~/PdfFiles/"), fname);
                        file.SaveAs(fname);
                    }
                    return Json("Pdf Uplaoded Successfully!");
                }
                catch (Exception ex)
                {
                    return Json(ex.Message);
                }
            }
            else
            {
                return Json("No files selected.");
            }
        }

Download Source Code 

Result