Uploading both data and files in one form using Ajax MVC

[Solved]-Uploading both data and files in FormData using Ajax MVC

ASP.NET has many different upload approaches. Thus, it is best to choose the one that best suits your needs: whether it is uploading a few files from one or more files at a time, working with small or very large files, only Sending entire folders or files, uploading a simple image beforehand or preprocessing pictures.

In this article, we consider various methods of file upload in ASP.NET MVC and discuss their use, but let’s grab how file upload input control works in general.

The file upload process is quite simple. There are always two parts, the client and server sides, that communicate with each other via HTTP requests and responses.

 

  1. Now Add a controller “Home” in the Project and also add an action method in it.
  2. Right Click in the Action Method and add a View 
let’s write code in controller for grabing files
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);
        }

        //For Uploading Multiple files at once
        [HttpPost]
        public ActionResult UploadMultiplePdfFiles()
        {
            //getting form data
            string username = Request.Form["Username"];
            string userId = Request.Form["UserId"];
            if (Request.Files.Count > 0)            // Checking if  Request object  has file
            {
                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.");
            }
        }
    }
}

View Htm Code

 

@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();
                    fileData.append('Username', 'testuser');
                    fileData.append('UserId', '1');
                    for (var i = 0; i < files.length; i++) {
                        fileData.append(files[i].name, files[i]);
                    }
                    $.ajax({
                        url: '/FileUpload/UploadMultiplePdfFiles',
                        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 both data and files in one form using Ajax MVC

Ashok Patel

I'm an electronic engineer working in a multinational company,having good experience on Electronics and electrical engineers design and oversee production of electronic equipment such as radios, televisions, computers, washing machines and telecommunication systems.I like to do RND and Research.I also have hands on experience graphic design software and in web designing having great command on ASP.NET, HTML5, JavaScript, T-SQL, JQuery.

Add comment

Your Header Sidebar area is currently empty. Hurry up and add some widgets.