[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 i.e Upload file and JSON data in the same POST request using jquery ajax and discuss their use, but let’s grab how file upload input control works in general.

In the below articles I have explained the same thing without using Ajax call. if you want to do the same task without using Ajax then read the below article.

• How to post File Upload and other form fields to one action Asp Net MVC

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 

We are going to use FormData for achieving our task The FormData provides the best way to create a set of key-value pairs expressing form fields in our HTML page and their values, and we can easily send these values using the XMLHttpRequest.send() method.

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>
}

If you have any questions related to the post please comment.

Please also share this article to Facebook, Twitter, Reddit, and other social media platform to help developers who face the same issue.

Please like our Facebook and follow us on Twitter for the latest update on technology or any support.

The post [Solved]-Uploading both data and files in FormData using Ajax MVC appeared first on Software Development | Programming Tutorials.