Pass (Send) HttpPostedFileBase with model from View to Controller without FormData in ASP.Net MVC

on Oct 08, 2021 02:34 AM

Is it possible to pass the form data with out using FormData by using the JavaScript Model. As my form has many controls I would like to go with Model approach instead of FormData.

Is there a way to pass selected files to controller with out using HttpPostedFileBase?

I have nearly 10 different class which accepts HttpPostedFileBase

I have a class as follows in c# 

public class ArtGallery{
   Public string GallerName {get;set;}
   Public HttpPostedFileBase[] Documents {get;set;}

The equivalent JavaScript Model is 

class ArtGallery{

On my save of the form here is how I am doing it 

function saveFormData(){
  let gallery = new ArtGallery();
  gallery.GallerName = "Test";
  $.each($("input[type=file]"), function (i, obj) {
        $.each(obj.files, function (j, file) {

function saveToDb() {
    let url = "/MyController/PostData/";
        url: url,
        type: 'POST',
        async: false,
        data: '{gallery : ' + JSON.stringify(gallery) + '}',
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        success: function (result) {
        error: function (request) {

My controller is as follows, which is getting triggered but documents I am unable to get 

public JsonResult PostUserData(ArtGallery gallery) 



Download FREE API for Word, Excel and PDF in ASP.Net: Download
on Oct 08, 2021 11:43 AM
on Oct 08, 2021 11:44 AM

Ok I got the solution we need to send the FormData as follows by giving the respective Model

let formData = new FormData();
formData.append("ArtGallery.GallerName", $("#GallerName").val());
let files = $("#galleryFile")[0].files;
for (let i = 0; i < files.length; i++) {
    formData.append('ArtGallery.Documents[${i}]', files[i]);