How to send multiple image from MVC view to controller using Ajax in array format?

Question

I am trying to send multiple images using Ajax but with out form data as my bunch of data is in array format.

my jquery function is,

 $("body").on("click", "#btnSave", function () {
            //Loop through the Table rows and build a JSON array.
            var customers = new Array();

                var row = $(this);
                var files1 = $("#file").get(0).files;
            var customer = {};
            alert(files1);
                customer.EmpPic = "";
                customer.FirstName = txtFirstName.value;
                customer.SecondName = txtSecondName.value;
                customer.ThirdName = txtThirdName.value;
                customer.Tribe = ddltribe.value;
                customer.NationalID = txtNationalId.value;
                customer.Address = txtAddress.value;
                customer.Location = ddlcityy.value;
                customer.Education = txtEducation.value;
                customer.PhoneNumber = txtPhoneNo.value;
                customer.FamilyTree = "";
                customer.SignaturePath ="";
                customer.StempPath = "";
                customer.StempChangePath = "";
                customer.FamilyCertificatePath = "";
                customer.IBAN = txtIban.value;
                customer.IBANPath = "";      
                customers.push(customer);


            //Send the JSON array to Controller using AJAX.
            $.ajax({
                type: "POST",
                url: "/Home/AddEmployee",
                data: JSON.stringify(customers),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {
                    alert(r + " record(s) inserted.");
                }
            });
        });

Above here I am sending same fields that I have in my sql table "Employee". I need to send two images from this array that are,

   <input type="file" title="search image" id="EmpImage" name="file"/>
   <input type="file" title="search image" id="Document" name="file"/>

my controller is,

 public JsonResult AddEmployee(List<Employee> Emp)
        {                
                return Json();            
        }

Here I am getting all employee data need to send these images too

Hopes for your suggestions

Thanks

Now i am getting Images by using this code,

var formData = new FormData();
            var profile = $("#EmpImage").get(0).files;
            var Iban = $("#Document").get(0).files;



            //setting ArrayData to Json Object
            formData.append("mydata", JSON.stringify(customers));
            formData.append("EmpImage", profile[0]);
            formData.append("Document", Iban[0]);

HttpPostedFileBase EmpImage= Request.Files["EmpImage"];
            HttpPostedFileBase Document= Request.Files["Document"];
            var data = Request.Form;
            return null;

but still not able to get data passing in the form of object "customers"

What is your scenario? Are the images uploaded by the user, displayed on the page, and then you want to save them to the database, or...? — mortb
– mortb, Commented Mar 5, 2020 at 8:27
@mortb my mistake in post i mention <img> tag not i added i have input type file i need to pass it to controller with my data. i dont want to show it — Doc
– Doc, Commented Mar 5, 2020 at 8:33

Rahul Sharma · Accepted Answer · 2020-03-05 11:29:42Z

1

Well, if your are using form element and your controls are inside the tag, you can simply serialize the whole form and append it to your FormData. This will also include any files generated with <input type="file" name="myImage" .../>:

var formdata = new FormData($('form').get(0));

$.ajax({
  url: '@Url.Action("AddEmployee", "Home")',
  type: 'POST',
  data: formdata,
  processData: false,
  contentType: false,         
});

Controller:

[HttpPost]
public JsonResult AddEmployee(List<Employee> Emp)
{                
  return Json();            
}

If your model does not include a property for HttpPostedFileBase, then you can do:

[HttpPost]
public ActionResult AddEmployee(List<Employee> Emp, HttpPostedFileBase EmpImage)
{
return Json();
}

Regarding your scenario since you are using plain HTML and without form I am assuming, your generated FormData looks correct so you would need to access your form data in your Controller with the associated tag that you have given to your model array like this:

var emp = Request.Form["mydata"];

edited Mar 5, 2020 at 11:29

answered Mar 5, 2020 at 11:03

Rahul Sharma

8,3772 gold badges39 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Doc Over a year ago

i am using simple html

Rahul Sharma Over a year ago

@Doc Try this: Request.Form.GetValues("mydata"); or Request.Form["mydata"] on the Controller side.

Doc Over a year ago

I just did this var emp = Request.Form["mydata"]; it worked !

Bruno Martins · Accepted Answer · 2020-03-05 08:59:58Z

0

There are two parts:

Build your ajax request on client-side
Bind the request data to your model (using c# model binding) on server-side

For the client side, you can find inspiration in this other post. Basically, do not forget to add the enctype="multipart/form-data to the <form> tag, and arrange the request data using the FormData JS class.

For the server side, use the IFormFile c# class in your model.

public class Employee {
    ...
    public IFormFile EmpPic { get; set; }
    public IFormFile Document{ get; set; }
}

answered Mar 5, 2020 at 8:59

Bruno Martins

9922 gold badges11 silver badges22 bronze badges

Collectives™ on Stack Overflow

How to send multiple image from MVC view to controller using Ajax in array format?

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related