Send array of files from Jquery ajax to controller action

Question

I am able to pass single file as System.Web.HttpPostedFileBase but when i pass same as array of files i am getting null in controller's action.

I've tried sending array of files.

HTML:

        <input type="file" id="Attachment1">
        <input type="file" id="Attachment2">
        <input type="file" id="Attachment3">
        <input type="file" id="Attachment4">
        <input type="file" id="Attachment5">

Javascript:

 var FileData = []; 
 $('input').each(function () {
                var type = $(this).attr("type");
                if (type == "file") {
                    FileData.push($(this).get(0).files[0]);
                }
            });    
var Data = new FormData();
Data.append("Attachments", FileData);         
if (url != '') {
    $.ajax({
        url: url,
        data: Data,
        type: "POST",
        contentType: false,
        processData: false,
        success: function (data) {
            alert("Saved successfully");
        }
    });
}

Controller:

public ActionResult InsertDetails(System.Web.HttpPostedFileBase[] Attachments)
{
   return Json(new { Success = false });
}

Need to get array of files. Thanks in advance.

Should it be data:FileData instead?

Stinky Towel
– Stinky Towel

2019-04-22 16:16:33 +00:00
Commented Apr 22, 2019 at 16:16 — Stinky Towel
– Stinky Towel, Commented Apr 22, 2019 at 16:16
post your html too

Kunal Mukherjee
– Kunal Mukherjee

2019-04-22 16:18:00 +00:00
Commented Apr 22, 2019 at 16:18 — Kunal Mukherjee
– Kunal Mukherjee, Commented Apr 22, 2019 at 16:18

vinoth kumar · Accepted Answer · 2019-04-29 09:42:39Z

2

Thanks for the effort guys. I found the solution. I just need to keep append files for same key "Attachments". Now i am able to get as array of HttpPostedFileBase.

 var Data = new FormData();
 $('input').each(function () {
                var type = $(this).attr("type");
                if (type == "file") {
                    var FileData = $(this).get(0).files[0]);
                    Data.append("Attachments", FileData); 
                }
            });

answered Apr 29, 2019 at 9:42

vinoth kumar

2166 silver badges15 bronze badges

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

Comments

saman samadi · Accepted Answer · 2019-04-28 06:58:24Z

0

Try It:

    var Files = new FormData();    

         $('input').each(function () {
         var type = $(this).attr("type");
          if (type == "file") {
Files .append("Attachment"+$(this).attr("id"), $(this).get(0).files[0]);   
                        }
                    });    

        if (url != '') {
            $.ajax({
                url: url,
                data: Files ,
                type: "POST",
                contentType: false,
                processData: false,
                success: function (data) {
                    alert("Saved successfully");
                }
            });
        }

answered Apr 28, 2019 at 6:58

saman samadi

5693 gold badges10 silver badges22 bronze badges

Comments

recnac · Accepted Answer · 2019-05-05 09:08:11Z

This is how I used to post array data from javascript to mvc controller, this is going to be a little bit lengthy but I've explained each line with comment, I hope this may help you

javascript:

var formData = new FormData(); //declare formData
var arrayData = []; //declare array and push/append your data to it.

var name="abc";
arrayData.push(name);

//setting ArrayData to Json Object
var AllData = {
            getUserData: arrayData
        };

//appending Json Object to formdata with the key "mydata"
formData.append("mydata", JSON.stringify(AllData));

//sending formdata through ajax request
$.ajax({
      type: "POST",
      url: yourURLHere,
      processData: false,
      contentType: false,
      data: formData,
      cache: false,
      success: function (data) {
            //your program logic here
      }
});

Controller:

public async Task<HttpResponseMessage> SaveResponse()
{

//receiving json data from the key "mydata" we set earlier 
var getData = HttpContext.Current.Request.Params["mydata"];

//deserialize json object (you will need Newtonsoft.Json library)
var model = JsonConvert.DeserializeObject<MyModel>(getData);

//you will get all of your data in model variable
//do what you want to do with that data

}

and here is the model class

public class MyModel
{
   //**dataList** will receive array data sent from javascript  
   public List<MyModel> dataList = new List<MyModel>();

   //Remember, whatever your push to array in javascript, should be declared here.
   public string name {get;set;}   

}

ps> if someone can simplify my logic, please do let me know, it would be much appreciated.

Collectives™ on Stack Overflow

Send array of files from Jquery ajax to controller action

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related